[디자이너 부트캠프]33일차 디자인 핸드오프 , UX/UI Hand-off

 

[디자이너 부트캠프]33일차 디자인 핸드오프, UX/UI Hand-off

 

 

 

 

디자이너들은 단순히 제품의 형태를 결정하는데서 벗어나 소비자들의 행동을 보다 직접적으로 변화시키는 쪽에 힘을 쏟고 있다.

팀 파슨스

 

 

 

 

---

강의노트

---

 

 

 

1) UX/UI 핸드오프란?

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

 

 

🚀 핸드오프의 핵심 역할

 

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

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

2️⃣ 디자인 의도 보존

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

3️⃣ 개발 속도 향상

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

 

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

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

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

 

 

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

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

 

 

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

 

 

 

 

 

 

 

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

 

 

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"를 활용하면 개발자가 컬러, 폰트 값을 쉽게 가져갈 수 있다

<GS SHOP Mobile 개발팀 디자인 시스템 참고자료 https://gsretail.tistory.com/20 >

 

 

 

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를 한눈에 볼 수 있다

 

 

 

 

 

 

 

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

 

 

📌 (Figma)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에서 바로 코드와 간격을 확인할 수 있다!
✔️ 컬러, 폰트, 애니메이션 정보를 한눈에 볼 수 있다!

 

 

 

 

 

 

4) 실전 핸드오프 문서 작성

_ 예시) 로그인페이지

 

 

1️⃣ 프로젝트 개요

**핸드오프 문서는 개발자가 프로젝트를 쉽게 이해할 수 있도록 기본 개요부터 정리

 

📌 프로젝트명: "모바일 쇼핑 앱"
📌 주요 기능:
✅ 로그인 & 회원가입
✅ 상품 검색 & 상세 페이지
✅ 장바구니 기능
✅ 결제 프로세스

** 핸드오프 문서의 첫 번째 단계는, 개발자가 프로젝트의 큰 그림을 이해하도록 하는 것

 

 

2️⃣ UI 화면 목록 정리

** 핸드오프 문서를 볼 때 어떤 화면들이 포함되어 있는지 한눈에 보이는 게 중요

 

📌 핸드오프 대상 화면
✅ 로그인 페이지
✅ 메인 페이지
✅ 상품 상세 페이지
✅ 장바구니 페이지

 

📢 TIP:
👉 Figma에서 페이지별로 이름을 명확히 지정하면 개발자가 쉽게 찾을 수 있다

👉 [Figma 파일 예시] "로그인 화면 → Login Page"

 

 

 

3️⃣ 실전 핸드오프 문서 작성

** 예시 – 로그인 페이지

 

📌 1) Figma 화면 링크 제공

✅ 화면 링크: [Figma 프로토타입 링크]
✅ 설명: "로그인 페이지의 UI 구조 및 동작을 확인할 수 있습니다."

 

 

📌 2) UI 요소 정리

✅ 입력 필드

• Email & Password
• Height: 48px, Radius: 8px, Border: 1px solid #CCCCCC
• Placeholder: "Enter your email"

✅ 로그인 버튼

• Primary Color: #FF5733, Width: 100%, Height: 48px, Radius: 8px
• 폰트: Bold, 16px, White

📢 TIP:
👉 Figma Dev Mode를 활용하면, 개발자가 이 값을 직접 확인할 수 있다

 

 

📌 3) 상태 및 동작 정의

✅ 입력 오류 시

• Border 색상 변경 → #FF0000 (빨간색)
• 에러 메시지 → "이메일을 입력하세요."

✅ 로그인 성공 시

• "홈 화면으로 이동"
• 애니메이션 → 페이드 인(0.3초)

📢 TIP:
👉 Figma에서 Interaction(프로토타입 모드)을 설정하면 개발자가 직접 테스트할 수 있다

 

 

 

4️⃣ 개발자가 확인해야 할 추가 사항

 

✅ API 연동 필요

• 로그인 버튼 클릭 시 POST /api/login 호출

✅ 반응형 가이드

• 모바일 (375px) → 버튼 폭 100%
• 태블릿 (768px) → 좌우 패딩 24px

📢 TIP:
👉 Figma의 Variants 기능을 활용하면 반응형 디자인을 한눈에 보여줄 수 있다