💡 25-06-05 (목)
재밌다 재밌는거 같다 재밌어
UX/UI 디자인 핸드오프란?
: 디자이너가 만든 UI 디자인을 개발자가 구현할 수 있도록 전달하는 과정
▶︎ 개발자가 정확한 디자인 정보를 받아야만 원활한 협업이 가능
📍 핸드오프의 핵심 역할
▫️ 개발자가 디자인을 보고 그대로 구현할 수 있도록 상세한 정보 제공
▫️ 디자인 의도가 정확하게 전달되어 오류를 최소화
▫️ 개발팀과의 협업을 통해 더 빠르고 효율적인 개발 진행
💁♀️ 디자이너는 "왜 이게 이렇게 배치됐는지"와 같은 디자인 의도에 집중
💁♂️ 개발자는 그 의도를 바탕으로 실제 기능을 구현하는 데 집중
왜 핸드오프가 중요할까?
핸드오프는 단순한 전달이 아니라 효율적인 협업 과정이다
✅ 원활한 커뮤니케이션
디자이너와 개발자가 서로 같은 방향을 보고 일할 수 있도록 해준다
✅ 디자인 의도 보존
원래 기획된 UI/UX 경험이 그대로 구현될 수 있도록 보장해준다
✅ 개발 속도 향상
개발자가 디자인 의도를 정확히 이해하면 추가 질문 없이 빠르고 오류 없이 개발을 진행할 수 있고 마찬가지로 디자이너도 수정 요청을 줄이며 보다 효율적으로 작업할 수 있다
💁♀️ : 이거 제가 디자인한거랑 다르게 나왔어요
💁♂️ : 정보가 없어서 기본으로 했어요
핸드오프가 제대로 이루어지지 않으면 디자인과 다르게 구현되는 오류가 발생하고, 그로 인해 잦은 수정 요청과 일정 지연으로 이어질 수밖에 없다
▶️ UX/UI 디자이너라면 자신이 만든 디자인이 정확하게 구현될 수 있도록 핸드오프 스킬을 키우는 것이 중요하다
📍 핸드오프를 잘하려면?
▫️ 개발자가 필요한 정보를 명확하게 정리해서 전달하기
▫️ 피그마 핸드오프 도구 활용하기
▫️ 디자이너와 개발자 간 소통 강화하기 -> 단순히 파일만 넘기지 말고 설명도 함께 제시
핸드오프 문서에 포함해야 할 필수 요소
1️⃣ 디자인 파일 (프로토타입 링크 제공)
▶︎ 핸드오프 시에는 Figma 디자인 파일과 프로토타입 링크를 함께 공유하여 개발자가 전체 흐름과 인터랙션을 직관적으로 이해할 수 있도록 해야 한다
또한 페이지별로 버튼, 입력 필드, 네비게이션 등 주요 UI 요소의 역할을 명확히 정리해 두면 개발자가 디자인 의도를 정확히 이해하고 불필요한 질문 없이 개발을 진행할 수 있다
☝️ 화면별 주요 UI 요소
로그인 버튼 : Primary Color (색상), Rounded 8px (모서리), width, 100% (너비)
입력 필드 : Border 1px (테두리), Radius 4px (모서리), Placeholder 텍스트 포함
네비게이션 바 : 아이콘 크기 24px, Active 시 색상 변경 (상태 변화)
2️⃣ 스타일 가이드 (컬러, 타이포그래피, 컴포넌트)
▶︎ 스타일 가이드는 디자인에서 가장 중요한 요소 중 하나로 일관된 UI 구현을 위해 반드시 포함되어야 하는 항목이다
피그마의 스타일 기능을 활용해 컬러, 타이포그래피, 컴포넌트 등의 정보를 명확하게 정리해두면 개발자가 시안을 해석할 때 혼동 없이 빠르게 작업할 수 있다
☝️ 컬러 시스템
Primary Color : #FF5733
Secondary Color : #222222
Background Color : #F5F5F5
Text Color : #333333
3️⃣ 레이아웃 및 간격정보
▶︎ 디자인을 실제 화면에 정확하게 구현하려면 정밀한 간격 정보와 레이아웃 기준이 필수적이다
특히 일관된 간격 유지를 위해 4px 또는 8px 단위의 시스템 그리드 기반으로 디자인하는 것이 좋다
☝️ 그리드 시스템
12 Column Grid 사용
Column Width : 80px
Gutter : 16px
☝️ 픽셀 단위 간격 정보
버튼과 텍스트 간 여백 : 8px
카드 간격 : 16px
섹션별 패딩 : 24px
4️⃣ 인터렉션 및 애니메이션 가이드
▶︎ 디자인은 단순히 정적인 화면만으로 전달해서는 안 되며 버튼·메뉴 등 인터랙션 요소의 상태와 애니메이션 효과까지 명확히 정의하는 것이 중요하다
☝️ 버튼 상태
Normal : #FF5733
Hover : #DD4422
Pressed : #AA3311
Disabled : #CCCCCC
☝️ 애니메이션 효과 예시
로딩 애니메이션 : 페이드 인 0.3초
페이지 전환 : 슬라이드 애니메이션 0.5초 적용
📍 피그마 핸드오프 꿀팁
▫️ Inspect 모드에서 개발자가 직접 요소 간 간격을 픽셀 단위로 확인할 수 있도록 설정
▫️ Auto Layout을 활용하면 반응형 간격 및 구조 전달이 훨씬 수월해짐
▫️ 피그마 프로토타입 모드에서 Interaction을 직접 설정해두면 개발자가 인터랙션 흐름과 애니메이션 동작을 직관적으로 이해함
Dev Mode
: 디자인 시안을 기반으로 개발자가 필요한 정보만 효율적으로 확인할 수 있도록 도와주는 Figma의 개발자 전용 보기 기능
💁♀️
디자인을 넘긴 후 개발자의 질문이나 수정 요청이 줄어든다
추가 설명 없이도 디자인 의도와 흐름을 개발자가 정확하게 이해할 수 있다
💁♂️
피그마에서 코드, 간격, 스타일 정보를 바로 확인할 수 있어 개발 속도가 빨라진다
컬러, 폰트, 애니메이션 등 핵심 디자인 정보를 한눈에 확인할 수 있어 구현 오류를 줄일 수 있다
피그마 하단에서 Dev Mode를 클릭하면 프레임 간격, 색상 등의 정보를 모두 확인할 수 있다
아이콘을 넣을 때는 가이드라인을 반드시 넣어주기 ‼️
-> 개발자는 이 가이드라인을 기준으로 간격을 측정함
프로토타입 실습
💡 https://youtu.be/bxd5SMK-P18 (세모)
💡 https://youtu.be/6KplvhY2Uuc (지도맵)
💡 https://youtube.com/shorts/z1b_l-d6smM?feature=share (화살표)
화살표 3개를 Component Set으로 묶어 컴포넌트화한 뒤 시작 화살표 하나를 인스턴스로 꺼내와서 프레임에 복제하면 완성!
☑️ Navigate To > 컴포넌트화 > Change To로 자동으로 변경된다
☑️ Select matching layers 아이콘(네모 4개)을 클릭하면 선택한 요소와 같은 속성을 가진 레이어들이 모두 선택된다
☑️ Shift 키를 눌러 누들을 한꺼번에 선택한 후 동일한 값을 한 번에 적용할 수 있다
☑️ Follow 프로토타입을 적용하면 상대방이 어떤 프레임을 보고 있는지 실시간으로 함께 따라가며 볼 수 있다
▪️ Horizontal은 가로 방향 스크롤
▪️ Vertical은 세로 방향 스크롤
▪️ Both directions는 가로와 세로 양방향 스크롤
➡️ 프로토타입에서는 디자인 변경 사항을 실시간으로 확인할 수 있으며 Smart Animate를 적극 활용하면 더욱 자연스럽고 효과적인 인터랙션을 구현할 수 있다
✏️ 자신의 서비스에 와이어프레임 적용해서 제출하기 (연결 페이지 3개이상)
