🔗 Figma : https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_강소연?node-id=1363-591&p=f&t=JgJYJCPOjW0R1fGU-0
디자인 핸드오프(Design Handoff)란
디자이너가 만든 UI/UX 시안과 설계 의도를 개발자에게 명확히 전달하는 과정.
이때 단순한 이미지 전달이 아닌, 구조, 상태, 동작 방식까지 구체적인 정보를 문서화 또는 주석 형태로 함께 제공.
| 이유 | 설명 |
|---|---|
| 오해 방지 | |
| → 품질 저하 또는 재작업 발생 | 디자이너 의도가 불분명하면 개발자가 임의로 해석해 구현하게 됨 |
| 정확한 구현 | 컴포넌트의 역할, 상태, 인터랙션을 정확히 정의하면 디자인대로 구현 가능 |
| 협업 생산성 향상 | 명확한 핸드오프는 디자이너와 개발자 사이 소통 비용을 줄이고 시간 절약 |
| 반응형/상태 대응 설계 | 다양한 상황(예: 가로/세로, 선택/비활성 등)을 사전에 정의해 이슈를 예방 |
| 재사용성 | 설계된 컴포넌트를 토대로 디자인 시스템화 가능 |
| 실습 예제 | 컴포넌트 유형 | 핸드오프 시 중요한 포인트 |
|---|---|---|
| 세그먼티드 컨트롤 | 필터 + 토글 UI | 단일 선택 방식, 상태별 스타일 정의, 터치 영역 고려 |
| 필터 칩 캐로셀 | 가로 스크롤 필터 바 | 선택 가능 방식, 스크롤 처리, 아이콘/텍스트 병행 여부 |
| 바텀시트 | 슬라이드 업 UI | 등장 타이밍, 뎁스 레이어, 닫힘 조건, 애니메이션 |
| 카드 리스트 | 카드형 콘텐츠 묶음 | 콘텐츠 단위 구분, 텍스트 길이 대응, 그리드 배치 반응형 |
| 탭바/네비게이션 | 화면 전환 컨트롤 | 활성 탭 표시 방식, 고정 위치, 아이콘/텍스트 비율 |
| 리소스 다운로드바 | 진행형 정보 표시 | 실시간 업데이트, 수치 정렬, 완료 후 사라지는 조건 |
| 채팅창 + 키보드 | 입력 & 포커스 UX | 키보드 상승 시 UI 반응, 배경 흐림, 입력 포커스 시 상태 정의 |
| 보기 | 정확한 명칭 |
|---|---|
| 선택 가능한 라운드 버튼 | Segmented Control or Filter Chips |
| 화면 하단 팝업창 | Bottom Sheet |
| 콘텐츠 필터용 가로 칩바 | Scrollable Filter Chip Carousel |
| 수직 콘텐츠 묶음 리스트 | Card List / Grid-style Card |
| 하단 고정 탭 메뉴 | Tab Bar / Bottom Navigation |
| 채팅창 + 키보드 반응 | Chat Input UI with Keyboard Behavior |
| 다운로드 진행 UI | Progress Bar with Realtime Update |