바로메모를 만들며 어려웠던 점

UX 디자인

• 코딩은 AI가 해주더라도, UX 시나리오는 전부 내가 사용해가면서 고칠 점을 찾아야했기에 일주일 내내 하루종일 QA를 해도 시간이 모자랐다.
• 계속 QA를 하며 개선사항을 찾았지만, 아직도 부족한 점이 있다.
• 예시
  • 각종 단축키 설정
  • 휴지통에 있는 메모를 확인하여 영구 삭제했을 경우, 메모 본문은 어떤 것을 보여주어야하는지
  • 메모 목록에 구분선을 넣으면 위아래 메뉴 구분선과 딱 붙어 1px이어야할 구분선이 2px로 보여 어색하게 보였던 문제 - VSCODE를 참고하여 아예 메모 목록에는 구분선을 없앰
  • 태그 목록이나 타이틀바 등의 레이아웃 디자인

 

대표적인 트러블

• 링크 적용 문제
  • 기본적으로 링크 붙여넣기를 할 경우, 링크 기능이 적용되지 않고 일반 텍스트로 붙여넣어졌다.
  • 링크 기능을 넣자니, 링크 전체가 한 블록으로 인식되어 주소 중간에 커서가 이동되지 않는 문제가 있었다.  
    • 따라서 링크를 어떤 식으로 동작하게 할 것인지에 대한 고민이 필요했다.
  • <a> 태그를 쓰는 대신 <span>을 써서 일반 텍스트에 밑줄표시를 하고 ctrl+클릭하면 링크가 브라우저에서 열리는 형식으로 만들었으나, 이것도 문제가 많았다.
    • 스페이스나 엔터를 눌렀을 때, 링크 서식이 계속 이어진다.
    • 메모 첫 줄에 링크를 붙여넣기할 경우, 플레이스홀더가 겹치거나 사라지지 않는다.
    • 링크 텍스트가 길어질 경우, 텍스트 래핑이 어색해보인다.
• 이미지 호환성
  • 이미지를 앱에 붙여넣기 했을 때, 바로메모는 윈도우 환경에서 동작하는 프로그램이기때문에 폴더 경로에 있는 images폴더에 저장이 되어 별 문제가 없었다.
  • 외부 에디터에 붙여넣을 때가 문제였다. 단일 이미지를 복사할 경우 클립보드에 이미지가 저장되어 문제 없는데, 텍스트와 이미지를 동시에 복사할 경우에는 외부 에디터에 이미지가 제대로 뜨지 않았다.
    • 티스토리같은 경우는 이미지 자체나 Base64 인코딩 둘 다 지원하기 때문에 그대로 붙여넣기가 되었다. 붙여넣기 시간이 오래걸릴 수 있어 이미지 품질만 조금 조정해주면 되었다.
    • 네이버 블로그 에디터는 일반적인 방법으로는 안 되고, 로컬 서버를 돌려서 서버에 있는 이미지를 붙여넣으면 정상 동작하였다.
    • 노션에도 텍스트와 이미지를 동시에 복사하여 붙여넣을 수 있게 시도해봤으나 실패했다. 티스토리나 네이버 블로그 에디터에 있는 글을 복사해도 노션에서는 이미지 처리가 안 되는 것을 보아 내 수준에서는 할만한 일이 아니라 판단, 포기했다.
• 스크롤바 가시성 설정
  • 처음에는 스크롤바가 잘 보이지도 않고 클릭도 되지 않아서, 스크롤바 크기를 늘리고 클릭해서 이동시킬 수 있는 기능을 추가했다.
  • 추가하고보니 스크롤바에 마우스를 갖다대도 마우스 모양이 I-beam으로 텍스트 입력과 큰 차이가 없어서, 스크롤바에 마우스 호버 시에는 커서가 일반적인 모양으로 보이도록 설정하고 싶었다.
    • 호버하면 스크롤바 색상이 진해지기에 호버 조건 똑같이 설정하면 금방 되겠다 싶었는데 생각보다 적용이 잘 되지 않았다.
    • 특정 픽셀에 마우스가 위치하면 커서 모양이 바뀌는 것으로 설정하니 의도대로 동작했다.

 

개인적인 용도로 사용하기에는 충분하니 별일 없으면 이대로 쓸 생각이다.