이번 글에서는 “기능은 잘 돌아가는데 왜 내 앱은 불편할까?” 라는 고민을 해결하기 위해, 화면 배치부터 모션 효과까지 UI/UX 가이드를 작성하는 방법을 차근차근 설명드리겠습니다. 특히 AI에게 코드를 맡겨 빠르게 프로토타입을 완성하는 바이브 코딩 환경에서, 구체적인 UX 지침이 왜 중요한지 함께 살펴볼 텐데요. 편하게 따라와 주세요!
1. 화면 레이아웃: 정보 구조를 한눈에 보여주세요
- 헤더
- 구성 : 앱 로고, 설정(햄버거 메뉴), 다크 모드 토글
- 포인트 : 스크롤이 50 px 이상 내려가면 배경색을 살짝 불투명하게 바꿔 주세요. 사용자는 “지금 어디쯤 스크롤했는지”를 직관적으로 알 수 있습니다.
- 입력 섹션
- 구성 : ‘할 일’을 입력하는 텍스트 필드와 추가 버튼
- 포인트 : 버튼을 누르든
Enter키를 누르든 동일하게 동작하도록 통일하세요. 또, 120자 이상은 입력하지 못하게 경고를 주면 불필요한 오류를 줄일 수 있습니다.
- 할 일 리스트
- 구성 : 우선순위 색상이 입혀진 카드 형태
- 포인트 : 카드 간 간격은 12 px, 모서리는 8 px 정도 라운드(둥글게) 처리하면 깔끔합니다. 글이 너무 길 땐 네 줄까지만 보여 주고 ‘…’로 잘라 주세요.
- 푸터 내비게이션 (모바일에서만)
- 구성 : 전체·높음·중간·낮음 탭
- 포인트 : 화면 맨 아래에 고정해 두고, 현재 선택된 탭의 아이콘에만 컬러를 입혀 주세요. iOS의 ‘홈 바’ 영역을 가리면 안 되니
safe-area패딩을 적용하면 좋습니다.
2. 상호작용(Interaction): 손끝에 쫀득한 모션을 더하세요
- 새 할 일 추가 : 사용자가 입력 후 추가하면 카드가 “슥” 하며 리스트 맨 위로 내려옵니다. 0.3 초 정도의 슬라이드 + 페이드 인 애니메이션이면 충분해요.
- 우선순위 변경 : 카드 왼쪽의 ⭐ 드롭다운을 누르면 즉시 배경색과 배지가 바뀌게 하세요. 잉크가 번지는 듯한 0.15 초 효과를 주면 즐거운 경험을 제공합니다.
- 완료 체크 : 체크박스를 누르면 텍스트에 취소선이 생기고 카드가 반투명해집니다. 동시에 헤더 아래 진행 바(전체 완료율)도 조금씩 채워져야 해요.
- 스와이프 삭제 (모바일) : 카드를 왼쪽으로 70 px 이상 밀면 붉은 배경과 휴지통 아이콘이 나타납니다. 손을 떼면 0.2 초 동안 작아지며 사라지도록 설정해 보세요.
Tip 모든 모션은 60 fps(부드러운 화면) 유지가 목표입니다. 100 ms를 넘는 불필요한 지연은 지양해 주세요.
3. 시각적 표시기(Visual Cues): 정보는 “읽히지 않아도” 보여야 합니다
| 요소 | 목적 | 디자인 팁 |
|---|---|---|
| 진행 바 | 완료된 할 일 비율 표시 | 헤더 바로 아래, 4 px 높이로 배치하고 연한 스트라이프 애니메이션을 넣어 보세요. |
| 우선순위 배지 | 1~5단계 구분 | 빨강 → 주황 → 노랑 → 연두 → 청록으로 색을 점진적으로 바꾸면 한눈에 우선순위를 알 수 있습니다. WCAG 대비 4.5 : 1 이상을 지키면 가독성도 확보됩니다. |
| 체크 아이콘 | 완료 여부 확인 | FontAwesome의 fa-check-circle을 권장합니다. 미완 → 회색, 완료 → 녹색으로 색만 바꿔도 충분해요. |
| 토스트/스낵바 | 알림·오류 메시지 | 화면 오른쪽 아래에 2.5 초간 노출 후 사라지도록 설정하세요. 스크린 리더를 위해 ARIA alert 속성을 잊지 마세요. |
4. 모바일 우선 & 반응형: 어떤 화면에서도 일관성 있게
- 터치 타깃 : 버튼·아이콘은 최소 44 × 44 px로 설정하세요.
- 그리드 브레이크포인트 :
- 휴대폰 → 한 열(
col-12) - 태블릿 → 두 열(
col-md-6) - 데스크톱 → 세 열(
col-lg-4), 여유가 된다면 사이드바도 활용 가능합니다.
- 휴대폰 → 한 열(
- 제스처 : 모바일에서는 스와이프 삭제, 아래로 당겨 새로고침 같은 자연스러운 제스처를 지원하면 편리합니다.
- 성능 최적화 : 이미지 Lazy Loading, 코드 스플리팅, 그리고 Lighthouse PWA 점수 90점 이상을 목표로 해 보세요.
5. 전체 사용자 흐름 예시
- 앱 실행 — 0.8 초 내에 로고·진행 바·리스트가 차례로 등장
- 할 일 입력 및 추가 — AI가 150 ms 안에 우선순위를 계산, 카드가 리스트 맨 위에 삽입
- 우선순위 수정 — 별 드롭다운을 탭하면 즉시 색상 변환
- 완료 체크 — 취소선, 진행 바 업데이트, 카드 반투명 효과 (모두 0.3 초 안)
- ‘높음’ 탭 선택 — 중요도 4·5만 필터링, 0.2 초 동안 리스트 재정렬
- 다크 모드 전환 — 전체 팔레트가 8 ms 내 부드럽게 바뀜
- 스와이프 삭제 — 휴지통 아이콘, Undo 토스트(5 초) 표시
- 앱 재실행 — 마지막 필터·스크롤 위치 그대로 복원
이 시나리오를 테스트 케이스로 사용하시면, 누락된 동선이나 버그를 효율적으로 찾아낼 수 있습니다.
AI에게 요청할 때는 이렇게 말해 보세요
“다음 UI/UX 가이드를 기준으로 전체 코드를 생성해 주세요.
1) 헤더·입력·리스트·푸터 레이아웃(bootstrap 5)
2) addTask / updatePriority / toggleDone / deleteTask 구현
3) slide-in·fade·잉크 번짐·스와이프 삭제 애니메이션
4) 진행 바·우선순위 배지·토스트 디자인
5) col-12 → col-md-6 → col-lg-4 반응형 SCSS
6) ARIA 속성과 키보드 내비게이션 지원”
마치며
UI/UX 가이드를 세심하게 작성해 두면, AI가 단순 예제 코드를 넘어서 바로 실제 서비스 수준의 화면과 동작을 만들어 줍니다. 이제 여러분도 위 지침을 참고하여 바이브 코딩의 빠른 개발 속도는 물론, 사용자에게 사랑받는 경험까지 모두 가져가 보세요.
