📍목차
1. 프로토타입 복습
2. 디자인 핸드오프
1. 프로토타입 복습
1) 돌아가는 삼각형?
동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.
2) 지도 화면
동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.
** 선택한 위치로 이동하면서 확대까지 되는걸 해보고 싶다는 생각이 아아아ㅏㅏㅏ아ㅏ주 강하게 들었다.
2. 디자인 핸드오프
" 디자이너가 만든 시안을 개발자에게 전달하는 과정 "
1) 핸드오프의 핵심 역할
- 개발자가 디자인을 보고 그대로 구현할 수 있도록 상세한 정보 제공
- 디자인 의도가 정확하게 전달되어 오류를 최소화
- 개발팀과의 협업을 통해 더 빠르고 효율적인 개발 진행
★★★ 핸드오프가 중요한 이유: 디자인 의도 보존 / 원활한 커뮤니케이션 / 개발 속도 향상
2) 핸드오프 문서에 포함해야 할 필수 요소
📌 디자인 파일 (프로토타입 링크 제공)
- Figma 프로토타입 링크
- 페이지별 주요 UI 요소 설명 ▶ Annotation
- 버튼, 입력 필드, 네비게이션 등의 역할 정리 ▶ Auto Flow 플러그인
📌 스타일 가이드
- 컬러
- 타이포그래피
- 컴포넌트
📌 레이아웃 및 간격 정보 (디자인이 딱 맞게 개발되려면 정확한 간격 정보가 필요) ▶ Design Doc 플러그인
- 그리드 시스템 설명: 12 Grid 사용 / Column Width: 80px / Gutter: 16px
- 픽셀 단위 간격 정보: 버튼과 텍스트간 여백 8px / 카드 간격 16px / 섹션별 패딩 24px
★★ 꿀 TIP...!
Inspect 모드에서 개발자가 직접 픽셀 간격을 확인할 수 있도록 설정
Auto Layout을 활용하면 반응형 간격을 더 쉽게 전달 가능
3) 단축키
Shift + D : 디자인모드(Design)와 개발자모드(Dev) 오갈 수 있음
** 디자이너가 컨포넌트로 편하게 활용하는 것 처럼
개발자들도 모듈, 소프트웨어 블록, 위젯 등 컨포넌트로 활용할 수 있는 것들이 있다.
▼ UI 레퍼런스 사이트
과제.
완성된 와이어프레임/프로토타입을 개발자가 이해할 수 있는 산출물로 전달한다.
화면별 **디자인 스펙(색상, 폰트, 크기, 여백 등)**과 플로우 설명을 문서화한다.
(1) 화면 정리
서비스 선정 후 프로토타입 제작 화면 정리 진행 (5페이지 이상) 각 화면을 번호(#1 로그인 / #2 메인 / #3 상세 등)로 구분 (프레임명 또는 섹션으로 구분해서 정리해주기)
(2) 사용자 플로우 설명 (autoflow플러그인사용)
화면 간 이동 경로를 한 문장 요약으로 기록 예: “로그인 성공 시 → 메인 화면 이동 / 상품 클릭 시 → 상세 화면 이동”
(3) 어노테이션 기능 사용해서 작성하기
💡 전에 혼자 피그마 사용법 잘 모르면서 지그재그 클론했던걸
프로토타입 배우고도 왜 하단바 고정이 안되나.. 했는데
이번 과제로 해내고야 말았다!!!
못하던거 해내야지 하는 생각으로 오늘 과제는 서비스 선정 고민없이 1초만에 정했다 ㅎㅎ
★ Annotation의 존재를 오늘 알게 됐는데 필요한 정보를 간단하게 전달하기 편리한거 같다.
근데 Auto Flow랑 같이 써두니까 만들어둔 UI랑도 겹치고 냅다 붙어있는 느낌이라 보기에 편한거같지는 않다...
동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.
🤔 오늘도 생기는 궁금증... 찜하는 하트처럼 두개를 왔다갔다 하는 버튼 만드는 방법은 알겠는데,,, 결제 방식 선택처럼 하나를 선택하면 나머지는 선택 해제되는,, 그런거는 화면을 두개 만드는 것 말고는 방법이 없는건지..?
Day 32에 실습한 화면은 스크롤이 안내려가는 화면이라 두개를 만들어서 왔다갔다 했지만, 오늘 만든건 화면 두개로 만들면 버튼 하나 누르면 다시 스크롤해서 내려가야되는 효율성 없는 흐름이 돼버린다..ㅜㅜㅜㅠ
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
'PRODUCT DESIGNER > Daily 🫧' 카테고리의 다른 글
| [Day 35] 그로스 해킹 (2) (0) | 2025.10.31 |
|---|---|
| [Day 34] 그로스 해킹 (0) | 2025.10.30 |
| [Day 32] 프로토타입 Prototype (0) | 2025.10.28 |
| [Day 31] 프레임 워크 (0) | 2025.10.27 |
| [Day 30] UX 리서치 | 멘탈모델 (0) | 2025.10.24 |