하루치 UX 다듬기

오늘은 큰 기능 하나를 만든 날이 아니라, 작은 결정 여러 개를 고친 날입니다. “여기가 좀 어색해”, “이건 헷갈려”를 듣고, 하나씩 다듬었습니다. 막상 묶어 놓고 보니 같은 결을 향해 가고 있었어서, 같이 적어 둡니다.

사진 한 장에도 맥락을

첨부 사진에 제목과 설명을 붙일 수 있게 했습니다. 사진을 클릭하면 큰 미리보기가 뜨고, 우상단 편집 아이콘을 누르면 옆에 작은 편집 패널이 뜹니다. 평소엔 그냥 사진을 보다가, 적어 두고 싶은 게 있을 때만 한 단계 더 들어가는 방식입니다.

이건 Fecit이 추구해온 방향과 같습니다. 태스크는 그냥 체크박스가 아니라, 의도와 결과를 같이 적을 수 있는 단위입니다. 첨부된 사진도 단순한 파일이 아니라, “여기 왜 찍었는지”를 같이 담을 수 있어야 한다고 생각했습니다.

같은 맥락에서 드래그 앤 드랍 영역도 사진 칸 한 자리만이 아니라 태스크 상세 화면 어디로든 떨어뜨릴 수 있게 넓혔고, 텍스트 에디터 위에 떨어뜨려도 동작하도록 만들었습니다. 에디터 안의 ProseMirror가 drop 이벤트를 먼저 가져가는 것을, 캡처 단계에서 native 리스너로 잡아 우회했습니다. 작아 보이지만, “여기는 받고 저기는 안 받아”가 사용자 입장에선 버그처럼 느껴지기 때문입니다.

차단하지 말고, 알려주기

사진은 최대 3장까지 첨부할 수 있습니다. 그 이상을 드랍하려고 하면 원래는 그냥 받지 않았는데, 사용자에겐 그게 “버그처럼” 보였습니다. 어디 잘못된 건지 모르는 거죠.

지금은 4장째를 떨어뜨리면, 받지는 않더라도 “사진은 최대 3장까지 첨부할 수 있습니다”라는 토스트가 뜹니다. 같은 결과지만, 의도가 전달되는 것과 침묵하는 것은 다릅니다.

같은 결로, 사진을 업로드하면 첨부 섹션이 자동으로 펼쳐집니다. 사용자가 첨부 섹션을 안 펼친 상태에서 사진을 드랍했을 때, 그 사진이 어디로 갔는지 모르면 안 되니까요.

URL을 붙여넣으면 자동으로

태스크 상세 화면 빈 곳에 URL을 그냥 붙여넣으면 웹링크로 자동 등록됩니다. 직접 ”+” 버튼을 누르고 모달을 띄워서 URL을 붙여넣고 저장하는 단계를 생략했습니다.

다만 입력칸 안에서 붙여넣은 URL은 그 입력칸 안에 들어가야 합니다. 설명을 쓰다가 URL을 붙여넣었는데 그게 갑자기 웹링크로 등록되면 곤란하니까요. paste 핸들러가 현재 포커스가 텍스트 에디터 같은 입력 영역인지 확인하고, 그렇지 않을 때만 자동 등록되도록 했습니다.

라벨을 빨리

라벨을 붙이려면 picker를 열고, 목록에서 찾고, 없으면 다른 메뉴로 가서 만들고 다시 돌아와야 했습니다. 단계가 너무 많았습니다.

지금은 picker 상단에 검색창이 있고, 결과에 없으면 바로 옆에 “‘keyword’ 만들기” 옵션이 뜹니다. 누르면 색깔과 설명까지 입력할 수 있는 작은 모달이 뜨고, 만들면 바로 그 태스크에 붙습니다. 라벨은 가벼운 도구여야 한다고 생각했습니다.

검색은 처음에 클라이언트에서 필터링했는데, 모바일은 라벨을 12개씩 페이지 단위로 받아오기 때문에 아직 받아오지 않은 라벨은 검색에 안 잡혔습니다. 그러면 “결과 없음”으로 보이고 잘못된 “만들기” 옵션이 뜨면서 같은 이름의 라벨이 중복으로 만들어질 수 있었습니다. 그래서 API에 keyword 파라미터를 추가하고 서버 검색으로 통일했습니다. 검색은 캐시에서 흉내 내지 말고, 데이터 출처에서 해야 합니다.

빈 카드부터 보여주지 말기

템플릿이 있는 태스크를 완료하면 회차와 평균 비교를 보여주는 카드가 뜹니다. “3번째 회차예요. 만족도 평균 3.8보다 높네요” 같은 거요.

원래는 카드가 즉시 페이드인되고, 그 다음 데이터(템플릿 통계)가 도착하면서 회차 행과 비교 행이 덜컥 추가되었습니다. 빈 카드 → 채워진 카드. 사용자 입장에선 작은 흔들림이지만 자꾸 거슬렸습니다.

해결은 의외로 간단했습니다. 데이터가 도착할 때까지 카드를 마운트하지 않고, 도착한 시점에 페이드인을 시작합니다. 한 줄짜리 변경(if (!stats) return null)이지만, 보이는 흔들림은 사라졌습니다.

같은 흐름은 같은 골격으로

프로젝트와 꼬리표는 도메인이 다르지만, 사용자 흐름은 거의 같습니다. 목록에서 하나 골라 들어가서 편집한다. 그런데 어쩌다 보니 한 쪽은 우측 패널이고, 한 쪽은 모달이었습니다. 다를 이유가 없는데 다른 거죠.

꼬리표를 프로젝트 쪽에 맞춰 정리했습니다. 좌측 목록 + 우측 상세 패널, 상단의 끈끈한 제목바, 우상단의 ⋮ 더보기 메뉴까지. 웹링크 추가/편집 모달도 사진 편집 패널과 같은 가로 레이아웃(라벨 좌측, 입력 우측)으로 통일했고, 설명은 모두 같은 리치 에디터를 쓰도록 했습니다.

같은 흐름은 같은 모양이어야 한다고 생각합니다. 매번 다르게 만들면 사용자가 매번 새로 배워야 합니다.

위험한 액션은 한 단계 더

프로젝트 상세 본문 안에 “삭제” 버튼이 있었습니다. 너무 당당했죠. 사용자도 그렇게 느꼈고, 모바일 쪽은 이미 별도의 inform 메뉴 화면에 격리해 두고 있었기 때문에 데스크톱도 같은 결로 옮겼습니다.

지금은 제목바 우상단의 ⋮ 더보기 메뉴 안에 들어가 있습니다. 한 번 더 누르고 한 번 더 확인하는 식. 자주 누르지 않는 위험한 액션은 한 단계 안쪽에 있어야 합니다. 삭제 확인 메시지도 모호한 “정말 진행하시겠습니까?” 대신 명확한 “삭제하시겠습니까?”로 바꿨습니다.

데스크톱에 협업 채우기

데스크톱 프로젝트는 사실상 단일 사용자 편집 화면이었습니다. 멤버 초대, 역할 변경, 토큰으로 가입, 받은 초대 수락—전부 모바일에만 있었습니다. 그게 이상한 거였죠. 협업이 핵심인 프로젝트인데.

오늘 모바일에 있던 기능을 데스크톱으로 다 옮겼습니다. 멤버 행을 누르면 상세 모달에서 역할을 바꾸거나 제거할 수 있고, 헤더의 초대 버튼으로 친구를 한 번에 부르거나 초대 코드를 발급해서 보낼 수 있습니다. 받은 초대는 프로젝트 페이지 상단 버튼에서 처리할 수 있습니다.

이건 시작입니다. Project를 진짜 “목표 달성 도구”로 키우려면 협업 기능부터 빈자리가 없어야 했습니다. 다음은 목표 정의와 진척 측정 쪽일 텐데, 그건 다음 글로.

만족도는 숫자가 아니라 표정으로

프로젝트 만족도를 0100 숫자 입력으로 받고 있었습니다. 모바일은 15 단계의 표정 아이콘 picker였는데, 데스크톱만 다르게 두고 있었던 거죠. 데스크톱도 같은 picker로 맞췄습니다.

같이 작은 변경 — 모바일 회차 카드 배경을 누르면 닫히게, 모바일 태스크 리스트의 상태 아이콘을 길게 누르면 상태 선택 모달이 바로 열리게. 이미 많이 쓰는 패턴인데 안 되어 있던 자리들입니다.

---

큰 변화 하나가 사용자 경험을 바꾸기도 하지만, 작은 결정 여러 개가 모여서 그 인상을 만듭니다. 어디서 덜컥거리는지, 어디서 침묵하는지, 어디서 같은 흐름인데 다르게 생겼는지—그걸 듣고 하나씩 다듬는 게 결국 만드는 일의 대부분이라고 생각합니다.

사용자가 “이상해”라고 말할 때, 그건 대개 작은 결정 하나가 어긋났다는 뜻입니다.