아이콘 하나, 댓글 한 줄

레이블이 글자만 있으면

Fecit의 Task 화면에는 필드가 많습니다. 시작 시간, 마감 시간, 소요 시간, 장소, 난이도, 우선순위, 목표, 기대, 주의사항, 만족도, 회고, 웹 링크, 라벨, 사진. 계획부터 회고까지 전체 사이클을 담으려다 보니 그렇게 됐습니다.

문제는 이 필드들이 전부 텍스트 레이블로만 되어 있었다는 겁니다. “시작 시간”, “장소”, “난이도”… 글자가 쭉 나열되면 눈이 어디를 봐야 할지 모릅니다.

아이콘을 붙이자

해결은 간단했습니다. 각 레이블 앞에 16px 아이콘을 하나씩 붙이는 것.

• 시작 시간, 마감 시간 → 시계
• 소요 시간 → 타이머
• 장소 → 지도
• 알림 → 벨
• 난이도 → 게이지
• 우선순위 → 깃발
• 목표 → 과녁
• 기대 → 전구
• 주의사항 → 경고
• 만족도 → 스마일
• 회고 → 거울
• 웹 링크 → 링크
• 라벨 → 태그
• 사진 → 카메라

아이콘이 들어가니까 각 필드의 성격이 글자를 읽기 전에 눈에 들어옵니다. 스캔이 빨라졌습니다.

SVG를 만들 때 한 가지 신경 쓴 점이 있습니다. 아이콘마다 시각적 크기가 미묘하게 다릅니다. 벨이나 지도처럼 속이 빈 아이콘은 같은 24px이라도 더 커 보입니다. 그래서 SVG 내부에 scale(0.875)를 적용해서 시각적 크기를 맞췄습니다. ViewBox는 24x24로 유지하면서 실제 도형만 살짝 줄이는 방식입니다.

모바일에서 만들고, 데스크탑에도 같은 아이콘을 복사해서 적용했습니다. 모바일은 React Native SVG 컴포넌트로, 데스크탑은 ?raw import로 SVG 문자열을 dangerouslySetInnerHTML로 렌더하는 방식. 플랫폼은 다르지만 아이콘은 동일합니다.

댓글 기능

아이콘 작업을 마치고 나서, Fecit이 “무언가를 해내는 과정”을 충분히 담고 있는지 돌아봤습니다. 계획, 준비, 실행, 회고 — 큰 틀은 다 있었습니다. 빠져있던 건 실행 중 기록이었습니다.

Task를 진행하면서 짧은 메모를 남기고 싶을 때가 있습니다. “재료 수급이 늦어지고 있다”, “방법을 바꿔야 할 것 같다”, “여기까지 완료”. 나중에 회고할 때 이런 기록이 있으면 그때의 상황이 선명하게 떠오릅니다.

처음에는 별도의 “로그” 기능을 만들까 생각했는데, 돌아보니 서버에 댓글 API가 이미 있었습니다. Overview와 자유게시판에서 쓰고 있던 댓글 시스템을 Task에도 연결하면 되는 거였습니다.

Task 상세 화면의 상단 바에 말풍선 아이콘을 추가하고, 누르면 댓글 페이지로 이동합니다. 별도 페이지로 분리한 이유는, Task 상세 화면이 이미 필드가 많아서 거기에 댓글 목록까지 넣으면 너무 무거워지기 때문입니다.

댓글은 개인 메모로 쓸 수도 있고, 공유 프로젝트에서 팀원들과 소통하는 데 쓸 수도 있습니다. 구조는 같고, 맥락이 다를 뿐입니다.

작은 변화, 큰 차이

아이콘 하나 붙이는 건 기능 추가가 아닙니다. 동작이 바뀌는 건 아무것도 없습니다. 그런데 화면을 보는 느낌이 달라집니다. 댓글도 마찬가지입니다. 텍스트 한 줄 남기는 것뿐인데, 그 한 줄이 나중에 회고의 실마리가 됩니다.

복잡한 앱이 되어가고 있지만, 기본은 여전히 심플하게. 필요한 만큼만 펼쳐 쓰는 것. Fecit의 방향은 변하지 않습니다.