[디자인부트캠프] DAY 33 | 디자인 핸드오프

 

33일!

 

벌써 목요일까지 왔당...! ㅎㅎ 근데 넘 졸리다..

힘내서 특강도 듣고 강의도 듣고 아자아자

 

 

개요

🔶강의내용은 교육용으로 재구성한 내용🔶

 

"완벽했던 디자인, 그런데 왜 이렇게 나왔죠?"

 

 

 

 

👩‍🎨 주인공: 지혜 – 5년 차 UX/UI 디자이너
👨‍💻 개발자: 민수 – 신입 프론트엔드 개발자

• 지혜는 한 달 동안 열심히 작업한 모바일 쇼핑 앱 디자인을 개발팀에 넘겼습니다.
  Figma에서 예쁘게 정리된 프로토타입과 스타일 가이드도 함께 전달했죠.
• 며칠 후, 개발이 거의 완료되었다는 소식을 듣고 기대에 찬 마음으로 결과물을 확인했는데…

 

 

😨 "어…? 내가 디자인한 거랑 완전 다른데?"

• 버튼 크기가 다르고 색깔도 이상함
• 간격이 뒤죽박죽
• 인터랙션 애니메이션이 누락됨
• 모바일 반응형이 엉망

지혜는 당황해서 개발자인 민수에게 물었습니다.

 

 

🗣️ 지혜: "민수 씨, 제가 전달한 디자인이랑 다르게 구현된 부분이 많아요!"
🗣️ 민수: "아…! 제가 받은 디자인 파일엔 정확한 간격이나 버튼 스타일이 없었어요.

그리고 애니메이션도 따로 설명이 없어서 기본값으로 넣었는데…"

 

💥 문제는 바로, ‘핸드오프’가 제대로 되지 않아서 발생한 것

 

 

 

 

UX/UI 디자인 핸드오프란?

 

 

UX/UI 핸드오프란?

 

 👉 핸드오프(Hand-off)란,

디자이너가 만든 UI 디자인을 개발자가 구현할 수 있도록 전달하는 과정을 의미

이 과정에서 개발자는 정확한 디자인 정보를 받아야 하고, 그래야만 원활한 협업이 가능

 

🚀 핸드오프의 핵심 역할

✅ 개발자가 디자인을 보고 그대로 구현할 수 있도록 상세한 정보 제공

✅ 디자인 의도가 정확하게 전달되어 오류를 최소화

✅ 개발팀과의 협업을 통해 더 빠르고 효율적인 개발 진행

 

 

💡 왜 핸드오프가 중요할까?

 

핸드오프가 제대로 되지 않으면 어떤 문제가 생길까?
제대로 전달되지 않으면 디자인과 다르게 구현되는 오류가 발생

 

핸드오프가 중요한 이유 TOP 3

1️⃣ 원활한 커뮤니케이션

• 디자이너와 개발자가 서로 같은 방향을 보고 일할 수 있도록 해줌

2️⃣ 디자인 의도 보존

• 원래 기획된 UI/UX 경험이 그대로 구현될 수 있도록 보장

3️⃣ 개발 속도 향상

• 개발자가 추가 질문 없이 빠르게 개발을 진행할 수 있다

 

💡 핸드오프가 잘못되면?

👉 디자이너: “이거 제가 디자인한 거랑 다르게 나왔어요!”
👉 개발자: “이 정보가 없었어요…😓”

 

📢 결국, 수많은 수정 요청과 일정 지연으로 이어질 수밖에 없다

 

 

UX/UI 디자이너의 필수 스킬 – 핸드오프

 

핸드오프는 단순한 전달이 아니라 효율적인 협업 과정

UX/UI 디자이너라면, 자신이 만든 디자인이 정확하게 구현될 수 있도록 핸드오프 스킬을 키우는 것이 중요!

 

💡 핸드오프를 잘하려면?
✅ 개발자가 필요한 정보를 명확하게 정리해서 전달하기
✅ Figma 핸드오프 도구 활용
✅ 디자이너와 개발자 간 소통 강화 (단순히 파일만 넘기지 말고, 설명도 함께!)

 

 

 

 

핸드오프 문서에 포함해야 할 필수 요소

 

 

핸드오프 문서에 포함해야 할 필수 요소

 

1️⃣ 디자인 파일 – 프로토타입 링크 제공

📌 핸드오프할 때 반드시 Figma 링크를 공유!

✅ Figma 프로토타입 링크 제공
✅ 페이지별 주요 UI 요소 설명
✅ 버튼, 입력 필드, 네비게이션 등의 역할 정리

 

🍀예시
💡 Figma 핸드오프 문서 예시

• 프로토타입 링크: [Figma 링크]
• 화면별 주요 UI 요소

• 로그인 버튼: Primary Color, Rounded 8px, Width: 100%
• 입력 필드: Border 1px, Radius 4px, Placeholder 텍스트 포함
• 네비게이션 바: 아이콘 크기 24px, Active 시 색상 변경

 

2️⃣ 스타일 가이드 – 컬러, 타이포그래피, 컴포넌트

📌 디자인에서 가장 중요한 요소 중 하나!
Figma의 Style 기능을 활용하여 개발자가 쉽게 확인할 수 있도록 정리

 

✅ 컬러 시스템

• Primary Color: #FF5733
• Secondary Color: #222222
• Background Color: #F5F5F5
• Text Color: #333333

✅ 타이포그래피

• 기본 폰트: Roboto
• 헤드라인: Bold 24px, Line Height 32px
• 본문 텍스트: Regular 16px, Line Height 24px

✅ 컴포넌트 및 UI 패턴

• 버튼: Primary(Orange), Secondary(Gray), Disabled(Light Gray)
• 카드: Border Radius 8px, Shadow 적용

 

 

📌 TIP!
Figma에서 "Design Tokens"를 활용하면 개발자가 컬러, 폰트 값을 쉽게 가져갈 수 있다

 

 

3️⃣ 레이아웃 및 간격 정보

📌 디자인이 딱 맞게 개발되려면 정확한 간격 정보가 필요

 

✅ 그리드 시스템 설명

• 12 Grid 사용
• Column Width: 80px, Gutter: 16px

✅ 픽셀 단위 간격 정보

• 버튼과 텍스트 간 여백 8px
• 카드 간격 16px
• 섹션별 패딩 24px

📌 Figma 핸드오프 꿀팁!
👉 "Inspect" 모드에서 개발자가 직접 픽셀 간격을 확인할 수 있도록 설정

👉 Auto Layout을 활용하면 반응형 간격을 더 쉽게 전달할 수 있음

 

 

4️⃣ 인터랙션 및 애니메이션 가이드

📌 정적인 디자인만 전달하면 안됨

✅ 버튼/메뉴 상태를 명확하게 정의
✅ 애니메이션 효과 설명

✅ 버튼 상태

• Normal: #FF5733
• Hover: #DD4422
• Pressed: #AA3311
• Disabled: #CCCCCC

✅ 애니메이션 효과 예시

• 로딩 애니메이션: 페이드 인 0.3초
• 페이지 전환: 슬라이드 애니메이션 적용 (0.5초)

📌 Figma 프로토타입에서 Interaction을 설정하면 개발자가 쉽게 이해할 수 있다

 

5️⃣ 개발자 참고 사항 – API 연동 및 반응형 가이드

📌 개발자가 헷갈리지 않도록 기능 설명을 추가

 

✅ API 연동이 필요한 부분

• 로그인 버튼 클릭 시 API 호출 방식
• 상품 리스트 불러올 때 GET /api/products 사용

✅ 반응형 가이드

• 모바일(375px), 태블릿(768px), 데스크톱(1440px)
• 모바일에서는 메뉴를 햄버거 아이콘으로 변경

📌 Figma의 Variants 기능을 활용하면 반응형 UI를 한눈에 볼 수 있다

 

핸드오프 문서가 중요한 이유

 

📌 핸드오프가 잘되면?

👉 개발자는 디자인 의도를 정확하게 이해하고 빠르고 오류 없이 개발 가능

👉 디자이너는 수정 요청을 줄이고 효율적으로 작업 가능

 

 

 

 

 

실무에서 사용하는 핸드오프 도구

 

 

💡 Dev Mode가 뭐길래 이렇게 효과적일까?

 

📌 Dev Mode란?

• 개발자가 디자인의 코드, 스타일, 간격을 자동으로 확인할 수 있는 기능!
• 예전에는 개발자가 "Inspect" 기능을 사용했지만, Dev Mode는 더 직관적이고 강력함.

 

1️⃣ Dev Mode로 디자인 공유하기 (디자이너 관점)

 

✅ Figma에서 ‘Dev Mode’ 활성화
✅ 개발팀을 프로젝트에 초대
✅ 디자인을 넘기기 전에 ‘Annotations(주석)’ 추가
✅ ‘Variables(변수)’를 사용해 컬러와 폰트를 일관되게 정리

 

2️⃣ Dev Mode로 코드 확인하기 (개발자 관점)

 

✅ CSS, iOS, Android 코드 자동 변환
✅ 버튼 크기, 간격, 컬러 값 쉽게 확인 가능
✅ Auto Layout 정보까지 한눈에 확인 가능

 

4️⃣ Dev Mode에서 인터랙션 확인하기

 

버튼의 Hover, Click, Disabled 상태를 구현해야 한다고 가정

👀 Figma Dev Mode에서 상태 변화까지 다 볼 수 있다

 

✅ 버튼 상태

• Normal: #FF5733
• Hover: #DD4422
• Pressed: #AA3311
• Disabled: #CCCCCC

✅ 애니메이션 정보도 포함 가능

• 페이드 인 애니메이션: 0.3초
• 슬라이드 애니메이션: 0.5초

📌 개발자가 직접 확인할 수 있으니, 디자이너와 소통할 필요 없이 그대로 적용 가능

 

 

💡 Figma Dev Mode의 장점

 

🎯 디자이너 입장
✔️ 디자인 넘긴 후, 개발자의 질문이 줄어든다!
✔️ 추가 설명 없이도 개발자가 디자인 의도를 이해한다!

 

🎯 개발자 입장
✔️ Figma에서 바로 코드와 간격을 확인할 수 있다!
✔️ 컬러, 폰트, 애니메이션 정보를 한눈에 볼 수 있다!

 

 

2025.03.13 과제 33일차