알림을 켜다

알림 기능

알림은 꽤 매력적이다. 알림을 통해 서비스가 살아있다는 느낌을 주고싶었다. 내가 쓴 기록의 조회수, 댓글, 좋아요 알림은 또 다른 기록을 쓰게 만드는 동력이 될 수 있다. 그리고 또 다른 동력 요소인 스프린트는 이름에 걸맞은 '반복적이고 짧은 주기'의 목표들을 던져주는데, 알림과 자연스러운 상호작용을 할 수 있도록 신경을 썼다.

댓글 개선

댓글 관련해서도 꽤 많은 개선을 했다. 댓글을 통해 커뮤니케이션이 활발하게 이뤄지면 좋겠다는 마음이 있었다. 그래서 이 부분도 UX 측면에서 최대한 불편함이 없도록 느끼게 만들고 싶었다. 사용자 멘션, 본인 댓글/답글 수정 + "수정됨" 라벨, "작성자" 라벨 등 고민한 흔적들이 꽤 많이 추가되었다.

@ 멘션

처음에는 답글을 달면 상대방에게 알림이 가는 방향으로 만들려고 했다. 하지만, 하나의 부모 댓글 안에서 여러 사용자가 대화를 나눌 수 있고, 다른 참여자에게 답하는 경우가 있을 수 있다. 알림 자체가 노이즈가 되지 않도록 멘션 모델을 도입했다.

기본 동작은 댓글 작성자에게 자동 멘션이 되도록 만들었다. 사용자 의도에 따라 다른 참여자를 멘션하거나, 여러 명도 멘션할 수 있다. 또는, 알림이 안 가도록 할 수도 있다. 멘션은 "@"를 통해 사용자를 검색할 수 있다. 지목된 상대는 아래와 같은 알림을 통해 누가 멘션을 했는지 알 수 있다.

댓글 사이드 시트(Drawer)

기존에는 댓글 관련 알림이나 기록 상세 페이지의 댓글 아이콘을 클릭하면 댓글 섹션으로 스크롤이 되었다. 그런데 기록의 내용이 길면 스크롤 시간이 길어져 이 경험이 썩 좋지 않게 느껴졌다. 이러한 부분의 개선은, 기존에 답글 계층이 깊을 때 사용했던 사이드 시트를 활용하기로 했다.

이렇게 하면 기록의 댓글을 확인할 때 본문의 맨 아래로 이동할 필요도 없고, 댓글을 보기 위해 모든 이미지를 로드할 필요도 없어진다(smooth scroll + lazy loading). 개선된 버전은 댓글에만 집중할 수 있다. 추가로, 작성자 라벨을 통해 기록의 작성자를 쉽게 구별할 수 있도록 만들었다.

기록 개선

기록 관련 개선은 생각이 날 때마다, 또는 직접 사용하다가 불편한 점을 찾게 되면 개선해보고 있다.

에디터(작성/수정)

드래그 핸들로 이미지의 위치를 옮길 수 있도록 개선했다. 드래그 핸들의 영역을 이미지 전체로 잡을까도 고민을 했지만, 그렇게 하면 이 기능 자체를 사용자가 알아채지 못할 것 같아서 드래그 버튼을 따로 만들고, 해당 버튼으로 핸들링하도록 만들었다.

이미지의 너비도 수정할 수 있도록 개선했다. 이미지가 본문 너비를 꽉 채우다 보니 모바일 화면의 캡처본은 화면의 영역을 너무 많이 차지했었다.

따라서, 이미지 너비 프리셋(좁게/보통/넓게)을 설정해서 버블 메뉴로 토글할 수 있도록 만들었다. 이것은 취향의 영역이라 생각해서 사용자의 선택지로 남겨두었다.

이때는 이미지의 확대 기능도 같이 생각하고 있었던 때라서 아래처럼 만들까도 고민을 했었다. 적절함을 찾는 게 참 어려운데, 이건 오히려 너무 많은 옵션을 제공해서 글의 일관성이 깨질 수 있다 판단하여 제거했다.

이 외에 소소한 개선은 플러스 메뉴에 인용 버튼을 추가했고, 키보드 단축키 도움 팝업을 추가했다. 키보드 단축키 도움 팝업은 내가 필요해서 넣게 되었다.

상세 페이지 UX

이미지 확대 보기 기능을 추가했다. 브런치나 티스토리처럼 이미지 툴 박스 형태로 만들려고도 해봤지만, 그동안 글을 읽으면서 사진만 모아서 보거나, 90도를 돌려보는 등의 행동을 해본 적이 없었기 때문에 단순함을 유지하기로 했다.

작성자의 인접 글 네비게이션도 추가했다. 작성자의 다른 기록을 유도하면서 탐색 비용을 줄이고, 콘텐츠의 이동 동선이 생기는 등의 이점이 크다.

소소한 개선, 수정들

• 프로필 경로에 대문자가 있을 경우, 조회가 되지 않는 버그를 수정했다. 일부 플랫폼의 로그인은 대문자가 허용되어 들어올 수 있다는 것을 놓쳤었다.

• SEO, 브랜딩을 개선했다. RSS 피드와 구조화 데이터를 추가했고, 로고/파비콘/OG 이미지 등의 일관성을 높였다.

• 외부 오리진의 이미지를 차단했다. 예를 들어, 노션 같은 곳에서 이미지를 복사 후 기록에 붙여넣기를 하면 차단한다.

• 기본 뷰 모드(리스트형/카드형)를 카드형으로 설정했다. 이 뷰 모드는 이제 프로필의 기록 리스트와 동기화된다.

• 기본 썸네일을 변경했다.

• 리팩토링과 안정성을 크게 보완했다. FSD 경계를 재정리하고, 진입점들을 분리했다. 그리고 좀 더 안전하게 기존의 서버 요청들을 server-only로 추출했다.

2주가 아니라 2일 지난 것 같다. 요즘 아주 도파민 파티다. 집에 가는 길에도, 밥을 먹을 때도, 씻을 때도 항상 Sprinters 생각을 한다. 어떤 부분을 개선할지, 그리고 추가할지 고민한다. 너무 재밌다. 점점 제품이 개선되고, 완성도가 높아지는 게 느껴져서 그런 것 같다.