UX 사용성 · 인터랙션 노트

'누구나 쓰는 서비스'로 잡으면 모든 기능을 첫 화면에 우겨넣게 된다. 기능 명사가 아니라 사용자가 처한 상황과 해결하려는 목적(Job To Be Done) 문장으로 적어야 첫 화면 우선순위가 정리된다.

• 예시: '점심시간이 짧은 직장인이(상황), 대기 없는 근처 식당 메뉴를 1분 안에 고르고 싶다(동기). 그래야 제시간에 식사하고 쉴 수 있다(결과).'
• 이렇게 적어 두면 첫 화면의 주인공은 브랜드 소개가 아니라 '도보 5분 · 대기 없음 필터'로 즉시 좁혀진다.

정보 구조는 서비스의 콘텐츠와 기능을 예측 가능한 위치에 정리하는 설계도다. 처음엔 꼭 필요한 핵심만 보여주고 부가 설정은 필요할 때 열리게 하는 '점진적 공개'로 첫인상의 복잡도를 낮춘다.

• 상단 주 메뉴(GNB)는 한눈에 파악되는 5~7개 이내로 두고, 탐색 깊이(Depth)는 3단계를 넘기지 않는다.
• 메뉴와 버튼 라벨은 내부 DB 용어(`board_mst`, `설정값 관리`) 대신 일상 언어(`공지사항`, `알림 설정`)로 적는다.
• 세부 옵션이 많을 때는 필수 항목 3개만 기본 노출하고 나머지는 `'고급 옵션 더 보기'`로 접어 둔다.

버튼 텍스트 한 줄과 안내 문구 한 줄이 오작동을 막는다. 모호한 `'확인 / 취소'` 대신 버튼을 누르면 실제로 일어나는 결과를 동사로 적는다.

• 모호한 `'확인'` 대신 구체적 행동 표기: `'변경사항 저장'`, `'내보내기'`, `'영구 삭제하기'`.
• 원인을 모호하게 적는 문장(`'형식이 잘못 입력되었습니다'`) 대신 해결 방법을 바로 알려주는 문장(`'이메일에 @ 기호를 포함해 주세요'`)을 쓴다.

목록, 대시보드, 검색 결과, 상세 화면을 만들 때는 아래 5가지 상태를 기본 한 세트로 묶어서 설계한다.

• 1. Ideal State(이상적 상태): 데이터가 적정량 채워진 표준 화면.
• 2. Loading State(로딩 상태): 최종 레이아웃 크기를 미리 잡아두어 화면 덜컥거림(CLS)을 막는 스켈레톤 화면.
• 3. Empty State(빈 상태): 첫 진입·검색 0건일 때 비어 있는 이유와 바로 누를 다음 행동 버튼(CTA)을 함께 보여주는 화면.
• 4. Error State(에러 상태): 실패 시 내부 에러 코드를 숨기고 쉬운 원인 안내와 `[다시 시도]` 버튼을 제공하는 화면.
• 5. Partial / Edge State(부분·극단 상태): 데이터가 1건뿐이거나 제목이 길어져도 카드 폭과 말줄임(`line-clamp`)이 유지되는 상태.

같은 2초 대기라도 아무 반응 없이 멈춰 있으면 고장으로 느껴지고, 뼈대(Skeleton)가 먼저 뜨면 훨씬 짧게 체감된다. 반대로 0.1초 이내의 빠른 응답에 스켈레톤을 띄우면 불필요한 깜빡임만 생긴다.

• 필터를 바꾸거나 새로고침할 때 기존 화면을 백지로 지우지 말고 투명도만 살짝 낮춘 채 자연스럽게 교체한다.
• 요청 처리 중인 버튼은 즉시 `disabled + 스피너`로 잠가 중복 전송과 중복 결제를 차단한다.

북마크·좋아요처럼 가볍고 성공 확률이 높은 동작은 서버 응답 전에 UI부터 즉시 반영해 체감 지연을 없앨 수 있다. 단, 금전·원본 삭제와 직결된 작업에는 쓰지 않는다.

• 낙관적 UI 적합: 북마크, 좋아요, 체크리스트 토글, 정렬 순서 변경 (실패 시 원복 + 토스트 안내).
• 낙관적 UI 금지: 결제 승인, 송금, 예약 확정, 영구 삭제 (반드시 서버 확정 응답 후 완료 처리).

시선이 좌우로 튀는 2열 폼보다 위에서 아래로 곧장 내려가는 1열 폼이 빠르고 정확하다. 오류 메시지는 타이핑 도중에는 숨기고 입력칸을 벗어날 때 표시한다.

• 플레이스홀더(Placeholder)로 라벨을 대체하지 않는다: 글자를 입력하는 순간 무슨 칸이었는지 사라지므로 라벨은 항상 입력창 위에 고정한다.
• 입력 조건(예: 영문·숫자 포함 8자 이상)은 에러가 난 뒤에야 알려주지 말고 처음부터 라벨 근처에 작게 적어 둔다.
• 제출 시 오류가 있으면 첫 번째 오류 입력창으로 스크롤과 포커스를 자동 이동시킨다.

모든 알림을 모달 팝업으로 띄우면 내용을 읽지 않고 습관적으로 닫게 된다. 행동의 위험도와 되돌리기 가능 여부에 따라 피드백 방식을 나눈다.

• 가벼운 완료(복사, 북마크, 임시저장): 2.5~3초 뒤 자동 소멸하는 하단 토스트(Toast).
• 되돌릴 수 있는 삭제·보관(목록 숨김, 휴지통 이동): 확인 모달 없이 즉시 반영하고 토스트에 `[실행 취소(Undo)]` 버튼을 5초간 둔다.
• 되돌릴 수 없는 고위험 동작(계정 탈퇴, 영구 삭제): 이때만 배경을 멈추는 확인 모달(AlertDialog)로 재확인한다.

탭 전환이나 카테고리 필터 조건을 브라우저 URL 쿼리에 반영해 두면 새로고침, 뒤로 가기, 링크 공유 시에도 보던 화면 상태가 그대로 유지된다.

• 주요 단축키 관례: `/` 또는 `Cmd/Ctrl + K`(검색창 포커스), `Esc`(모달 닫기·검색 초기화), `Tab / Shift+Tab`(순차 이동).
• 포커스 트랩(Focus Trap): 모달이 열린 동안에는 `Tab` 초점이 모달 내부에서만 순환하고 닫히면 원래 버튼으로 돌아가야 한다.

스마트폰을 한 손으로 쥐었을 때 엄지가 편하게 닿는 곳은 화면 중앙과 하단이다. 상단 모서리는 손을 고쳐 쥐어야 닿으므로 보조 메뉴나 닫기 용도로 둔다.

• 모바일 핵심 행동 버튼은 화면 하단 고정 바(Sticky Bottom Bar) 등 엄지 영역에 배치한다.
• 시각적 아이콘이 18px로 작더라도 투명 패딩(`padding: 12px`)을 확보해 실제 터치 영역은 44×44px 이상으로 맞춘다.
• iOS Safari는 입력창 글자 크기가 `16px` 미만이면 포커스 시 화면을 강제로 확대하므로 모바일 입력 폰트는 `16px` 이상으로 둔다.
• 모바일 브라우저 주소창과 하단 홈 바 대응을 위해 `100dvh`와 `env(safe-area-inset-bottom)` 여백을 사용한다.

접근성은 특수 환경뿐 아니라 야외 햇빛, 한 손 조작, 트랙패드 고장 같은 일상적 제약에서도 화면을 온전히 쓰게 해주는 기본 품질이다.

• P · 인식(Perceivable): 색상만으로 상태를 구분하지 않고 아이콘·문구를 함께 표기하며 의미 있는 이미지에 `alt`를 적는다.
• O · 운용(Operable): 마우스 없이 키보드만으로 모든 기능을 열고 닫고 실행할 수 있게 한다.
• U · 이해(Understandable): 일관된 탐색 위치와 예측 가능한 동작, 명확한 오류 해결 문구를 제공한다.
• R · 견고(Robust): `<div onClick>` 가짜 버튼 대신 네이티브 `<button>`, `<nav>`, `<main>`, `<dialog>` 시맨틱 태그를 사용한다.

직접 만든 화면은 제작자 본인에게만 익숙하기 때문에 막히는 지점이 잘 보이지 않는다. 다른 사람 3~5명에게 구체적 목표 하나만 주고 옆에서 지켜보면 주요 병목의 85%가 바로 드러난다.

• '디자인이 괜찮은지' 묻는 대신 구체적 행동('특정 기준표를 찾아 프롬프트를 복사해 보기')을 요청하고 개입 없이 관찰한다.
• 시선이 멈추거나 '이게 버튼인가?' 하고 망설이는 지점을 최우선 수정 대상으로 기록한다.