웹 또는 앱서비스의 디자인을 클론(clone)해봅니다. 이를 통해 피그마 기초 실력 향상과, UI/UX에 대한 이해를 갖추고 좋은 서비스를 보는 눈을 길러봅시다.
•
강의를 완주하셨다면, 여러분들은 모두 클론을 할 수 있습니다!
◦
혹시 완주하지 못하셨더라도 아래 가이드를 따라 차근차근 진행해봅시다.
•
강의에서 배운 컴포넌트(필수)와 유저 플로우(선택)를 적용해봅시다.
•
진행 순서와 함께 예시가 첨부되어 있는데, 이는 편의상 작성되어 있는 부분이며 절대적인 ‘정답’ 은 아닙니다. 여러분이 공부하며 생각하시는 바를 나타내주세요!
클론 디자인의 정의, 목적, 그리고 목표
클론 디자인이란, 이미 잘 만들어진 웹사이트나 앱 화면을 그대로 따라 그리면서 디자인의 기본 구조와 원리를 배우는 재미있는 실습이에요. 이 과정을 통해 디자인 도구에 익숙해지고, 화면을 어떻게 구성해야 하는지 감을 잡는 것이 목표예요! 마치 그림을 따라 그리듯이 차근차근 따라 하다 보면 어느새 실력이 쑥쑥 늘어날 거예요!
진행 순서
1.
디자인 클론을 진행할 웹/앱을 선정합니다.
웹/앱 선택 Tip!
2.
선정한 서비스에서 클론할 페이지와 범위 정하기
a.
추천범위
i.
메인화면: 앱의 첫인상과 핵심 기능이 담긴 페이지. 필수
ii.
핵심 서비스: 사용자들이 가장 많이 사용하는 페이지.필수
iii.
보조 기능 화면: 설정, 프로필 등 추가적인 서비스 화면 선택
3.
클론 디자인을 진행합니다.
a.
캡처본 준비 및 세팅하기
•
클론할 페이지를 캡처하고 Figma에 불러옵니다.
•
캡처본의 **불투명도(Opacity)**를 30~50%로 조정해 연하게 만듭니다.
클론 디자인 Tip!
b.
화면을 따라 그리기
•
기본 프레임 설정
◦
먼저 클론할 핸드폰 디바이스 유형에 맞는 프레임을 설정합니다.
▪
프레임 설정이란? Figma에서 작업을 시작할 때 사용하는 화면 크기 틀입니다.
◦
핸드폰 프레임 설정 방법:
1.
Figma 툴바에서 ‘Frame Tool’ (단축키: F) 을 선택합니다.
2.
오른쪽 패널의 Device Presets 목록에서 캡쳐에 사용된 디바이스를 선택합니다.
3.
선택한 프레임을 캔버스에 추가해 작업을 시작합니다.
이렇게 디바이스 유형에 맞는 프레임을 설정하면 나중에 화면 크기가 어긋나는 문제를 방지할 수 있고, 실전 앱 화면과 똑같이 디자인을 진행할 수 있습니다.
c.
화면을 따라 그리기
•
도구 활용: 사각형, 원, 텍스트, 아이콘 등을 사용해 화면 위에 따라 그립니다.
•
간격과 수치 확인: 요소 간 간격, 폰트 크기, 색상을 정확히 재현합니다.
d.
캡처본 삭제 및 디자인 검토
•
화면을 다 그린 후 캡처본을 삭제 또는 숨겨 디자인만 확인합니다.
•
최종적으로 요소들이 정확하게 배치되었는지 확인해보세요.
4.
팀원들과 협업하기 선택
a.
팀원들과 역할 나누기
•
UI 분석하기: 각자 헤더, 푸터, 버튼 등 컴포넌트를 나눠서 분석하고 그립니다.
•
공유 및 정리: 작업한 컴포넌트를 하나의 공유 파일에 정리해 일관성을 맞춥니다.
b.
페이지 나눠서 작업하기
•
팀원별로 클론할 페이지를 나누어 진행합니다.
c.
최종 클론 디자인 병합하기
•
팀원이 만든 페이지와 컴포넌트를 병합하고 최종 결과물을 점검합니다.
•
피드백을 주고받으며 부족한 부분을 수정합니다.
혹시, 내가 클론한 페이지를 개선해보고 싶으신가요? 선택
•
클론이 완료된 후에 진행해주세요!
•
내가 생각하는 개선 아이디어 방향을 러프하게 스케치나 메모로 표현해봅시다.
•
피그마에 직접 디자인을 진행해보세요.
•
Before / After 로 피그마에 배치하여 정리해주세요.
•
왜 그렇게 디자인 했는지에 대해 작성해보세요.
참고 아티클