디자인 핸드오프 (Design Handoff)
: 디자이너가 완성한 UI 디자인을 개발자가 실제 구현할 수 있도록 전달하는 과정
➡️ 디자이너와 개발자 간의 원활한 커뮤니케이션 브릿지 역할을 하는 단계
왜 중요한가?
핸드오프 과정은 단순히 “디자인 파일 전달”을 넘어서
기획 의도와 UX 경험을 그대로 구현하기 위한 핵심 단계이다.
-
디자인 의도 보존
→ 사용자가 경험해야 할 UI/UX가 왜곡되지 않도록 보장 -
개발 속도 향상
→ 개발자가 불필요한 추가 질문 없이 빠르게 구현 가능 -
협업 효율성 강화
→ 명확한 기준과 문서화로 팀 간 오해 최소화
핸드오프에 포함되어야 할 필수 요소
1️⃣ 스타일 가이드 : 컬러 시스템, 타이포그래피, 버튼·입력창 등 컴포넌트 정의
2️⃣레이아웃 및 간격 정보 : 그리드, 패딩, 마진, 섹션 간 간격 등 배치 기준
3️⃣ 상호작용 정보 : Hover, Click, Transition 등의 인터랙션 정의
4️⃣ 플로우 구조 : 페이지 간 이동 경로 및 사용자 흐름(Flow)
핸드오프 작업 시 이용하는 기능
- 개발자 모드 (Shift + D): 개발자가 CSS, 속성값, 거리 정보 등을 바로 확인 가능
- DesignDoc 플러그인: 디자인 명세서를 자동으로 문서화해 전달 용이
- Autoflow 플러그인: 유저 플로우(화면 간 연결 흐름)를 시각적으로 표현
- Annotation 기능: 특정 요소의 상세 정보(Height, Padding 등) 표기 가능
오늘은 34일차,,,~! 였고 핸드오프 작성법에 대해서 배웠다.
인터랙션도 신기했는데 핸드오프를 편하게 작성할 수 있는 플러그인이 아주 많았다!!
과제는 역시나 핸드오프 작업해보기~~
과제
1️⃣ 화면 정리
- 서비스 선정 후 프로토타입 제작 화면 정리 진행 (5페이지 이상)
- 각 화면을 번호(#1 로그인 / #2 메인 / #3 상세 등)로 구분
지난시간 작업했던 쇼핑 화면 플로우와 비슷한 서비스인 F1 Store 를 선정하였다.
이 서비스가 따로 모바일용 어플은 없고 반응형으로 작동하여 동일하게 클론하지 않았고 패딩이나 갭에서 달라진 부분이 있다. 디자인적으로도 중요도 컬러나 래디우스 추가 등의 변화도 주었다.
컬러가이드 및 컴포넌트
컬러는 배리어블에 등록하여 사용하였고, 플러그인을 통해서 가이드를 쉽게 뽑을 수 있었다.
화면 구분
스플래쉬/제품페이지/주문페이지로 크게 나누고, 이후 각 페이지들의 이름들을 적어주었다.
인터랙션 적용
상단네비게이션 위치 고정, 전체 프레임은 버티컬로 스크롤 할 수 있게 설정해두었다.
호리존(가로) 방향으로 스크롤 되어야 할 부분들은 프레임내에서 따로 설정하였다.
장바구니의 경우 오픈 오버레이로, 아래에서 올라오는 방식으로 적용해주었다.
컴포넌트에도 인터랙션을 적용했다.
호버 시 변경할 수 있도록 적용했으나 타이핑 중..을 어떻게 해야할지 몰라서 호버 시만 적용해주었다!
체크박스는 클릭 시 서로 변환될 수 있도록 설정하였다.
모든 로고에 홈으로 돌아가는 기능을 넣어주었다.
2️⃣ 사용자 플로우 설명 (autoflow플러그인사용)
- 화면 간 이동 경로를 한 문장 요약으로 기록
예: “로그인 성공 시 → 메인 화면 이동 / 상품 클릭 시 → 상세 화면 이동”
해당 사진들처럼 유저플로우 설명에 대해서 달아주었다.
3️⃣ 어노테이션 기능 사용해서 작성하기
이부분은 따로 지정해주신 건 없었고, 필요한 부분들을 자율적으로 달아보라고 하셨다.
그래서 정말 개발자에게 전달하는 것처럼 내 코멘트들을 몇개 달아보았다.
이부분은 동일하게 래디우스값 4 or 8 px을 사용하다가 혼자 달라서 달아주었다.
이런식으로 스크롤 방향이 다른 프레임들에도 표기해주었다.
4️⃣ 완성작 첨부 및 링크
회고
과제!! 클론도 버거워하던 내가 요로코롬 클론부터 인터랙션, 핸드오프까지 완성해내다니!!
시간은 아주아주 오래 걸렸지만,,,,, 완성작을 봤을 때 너무 뿌듯했다 ㅎㅎ
지금까지 습작만 조금씩 했는데....!! 드디어 한 플로우를 완성해보아서 너무 좋았다
앞으로의 프로젝트도 너무 기대된다 😝
#한발짝더성장하다
