안녕하세요!
오늘은 피그마로 배달 앱 스크린 클론 디자인 연습을 해보았습니다.
피그마의 뛰어난 기능들로 금방 후딱 만들 수 있었는데요!
배달 앱은 미국의 'gopuff' 라는 퀵커머스 딜리버리 앱입니다 :)
참고로 해외 서비스는 Mobbin.com, Collect UI 같은 사이트에서 많이 참고하는 편이에요.
그럼 피그마 완전 기초 연습 해보고 싶으신 분들은 단계별로 따라와주시면 될것 같습니다 :)
-------------------------------------------------------------------------------------------------------------
이 화면에 들어가는 컴포넌트들을 하나 하나 만들어보겠습니다.
예시로 만든 거라 가격이나 메뉴이름은 넣지 않았어요.
피그마 프레임, 오토레이아웃 기능을 활용해 금방 만들 수 있습니다!
저는 프로토타입을 만들 때 화면에 들어가야하는 주요 컴포넌트 부터 확인을 하는데요,
아이콘, 버튼의 형태 등을 포함한 주요 컴포넌트를 만들어 놓으면 시간이 훨씬 단축되더라구요!
그래서 이 화면에서 준비해 주실 컴포넌트는 이정도로 간단히 만들어 줄거에요!
위에서 부터 순서대로, '필터칩', '하단 내비게이션 바', '상품 카드', 입니다.
클론 디자인은 앱의 구성요소를 최대한 비슷하게 따라 만드는 것이지만 아이콘이나 폰트 같은 원 소스는 찾기 어려울 수 있어 그냥 최대한 비슷한 느낌으로 만들 수 있는 대체 소스로 대신하고 있어요.
아이콘의 경우 주로 구글 Material Design 시스템 아이콘을 쓰고 있습니다.
화면의 전체 레이아웃, 스페이싱, 비율 같은 것들은 비슷하게 따라해보며 피그마의 기능을 사용해보는것이 목적입니다!
기본 설정:
- 프레임 사이즈는 Iphone 13 Pro Max 를 사용했습니다 (428x926)
- Primary 컬러인 블루 색상의 HEX코드는 49A1F7 을 사용했어요!
- 폰트 : IBM Plex Sans KR
1. 상단 상태 바
- iOS 상단 바를 사용했습니다. 피그마 커뮤니티에 올라오는 iOS UI kit 최신 버전을 사용해주시면됩니다. 최근 iOS 16 UI Kit가 나왔으니 그 버전을 피그마 Community에서 복제하여 사용하시면 될거 같습니다.
2. Chip (칩) 만들기
Text 툴로 먼저 아무 텍스트나 적어주신 후, Shift+A를 눌러 오토레이아웃을 추가합니다.
그러면 우측 속성 패널에서 제가 한 설정으로 똑같이 만들어주세요!
색상 Fill도 해주세요.
3. 내비게이션 바 만들기
내비게이션 바는 오토레이아웃으로 금방 만들 수 있습니다.
버튼이 총 3개인데, 먼저 틀을 만들고자 다 똑같이 Home으로만 먼저 만들었습니다.
먼저 각 버튼에 들어가는 아이콘이 있는 자리와 아이콘 라벨이 들어갈 텍스트 자리를 만들어줘야 해요.
처음엔 단순하게 피그마 상에서 바로 아이콘과 text를 배치하여 오토레이아웃을 만들어주는 방식으로 했는데
(이렇게요)
왼쪽에 레이어 보시면 아무런 프레임도 없고 그냥 벡터 이미지와 텍스트만 있어요.
이 상태에서 두개를 함께 선택하여 Shift + A를 눌러 오토레이아웃을 씌워줘도 되기는 하지만,
같은 아이콘과 텍스트로 반복하는 것이 아니라, 다른 텍스트와 아이콘으로 대체해줘야하기 때문에,
동일한 사이즈의 컴포넌트를 만들어주기 위해 각 아이콘과 텍스트라벨에 각자의 프레임을 만들어주는게 좋아요.
저는 일반 프레임이 아니라 오토레이아웃을 씌워줌으로써 프레임으로 만들어주었습니다
이렇게요!
오른쪽 보시면 집 아이콘도 프레임에 들어가있고 Home이라는 텍스트도 일정 사이즈의 프레임에 들어가있어요.
정렬도 맞춰주면 좋겟죠.
프레임을 맞춰주지 않으면 나중에 다른 아이콘과 텍스트로바꿨을 때 아이콘과 텍스트 사이 간격이 일정치 않아보인다거나
들쭉날쭉 해보일 수 있어서, 일정 사이즈의 프레임 안에 모든 요소를 끼워 넣는다는 느낌으로 생각하면 될거같아요! 이게 꼭 정석은 아닐수도 있어요! 다른 분들은 프레임에 안씌우고 바로 오토레이아웃 해주시기도 하더라구요. 작업을 많이 해보시고 편하신 방법으로 하면됩니당 ~ 겉으로는 이렇게하나 저렇게하나 차이가 없으니까요!
다음으로는 아이콘과 텍스트 프레임 두개를 선택한 채로 오토레이아웃을만들어줍니다.
오토레이아웃 패널 설정은 이렇게 해줬어요.
마진은 왼쪽은 이미 충분해서, 위아래만 '5' 로 설정해주었고, 아이콘과 텍스트 사이는 '12'는 너무 멀고, '5' 로 바꿔주시면 딱 적당한것 같습니다.
다되었다면 Frame 60을 컴포넌트로 만들어줍니다. (선택한 후 Ctrl + K 누르면 컴포넌트가 되요)
Frame 60이 메인 컴포넌트가 된 것을 확인할수있어요.
Frame 60을 두개 복사해서 총 세개의 컴포넌트를 나란히 놓습니다.
그런 다음 오토레이아웃을 다시한번 만들어주고, 우측 패널 설정은 중앙 정렬로 한뒤, 세개의 컴포넌트 사이 간격을 적당한 수준으로 늘려주세요. 저는 83까지 하니까 적당한 간격이 되었어요.
중앙 정렬을 한뒤 프레임 전체 사이즈를 조절해주시면 좌우, 상하 마진이 일정하게 움직이며 컴포넌트들을 감싸줍니다!
이렇게 계속 중앙 유지가 되는 것을 확인할수있어요.
하지만 내비게이션 바를 이렇게 높게 만들건 아니기 때문에 ㅎㅎ 다시 원상복귀 시켜줍니다.
그런다음 Frame 63 을 선택하여 Fill을 한번만 눌러주시면
아래와같이 흰 바탕의 내비게이션 바가 완성되요
아이콘과 텍스트는 필요에 따라바꿔주세요
메인컴포넌트에서 복제한 인스턴스 상태로 text 수정은되지만 아이콘은 삭제가 아닌 숨기기만 가능하기 때문에, Detach instance (Ctrl+Alt+B) 해도 되요.
바꿔줄 아이콘을 선택한 상태에서 우클릭후 Plugin > Iconify (이건 미리 플러그인 설치를 해주셔야해요) 를 눌러준후
원하는 아이콘을 찾아 Import 해줍니다.
그러면 이렇게 아이콘이 나란히 배치되는데요
이때 홈 아이콘을 삭제해주시면 되요!
이런식으로 하단 내비게이션 바를 만들어주시면 되겠습니다!
4. 상품 카드 UI 만들어보기
상품명, 가격과 추가 버튼으로 구성된 상품카드 UI를 만들어볼게요.
위와 같이 각 구성요소를 쌓아주시구,
세가지 프레임을 다 선택한 후 오토레이아웃을 해주시고 가운데 정렬을 해주세요.
오토레이아웃의 마진값, 간격 등의 수치는 원하시는 수치대로 해주세요.
저는 클론이 목적이라 실제 앱의 비율을 참고해서 만들어봤습니다!
오토레이아웃을 했으니 전체 요소가 Frame 70 안에들어와있는걸 볼수있어요.
이제 frame 70 만 선택한 후, 배경 Fill 을 넣어줍니다.
그리고, 이미지 프레임엔 상품 이미지가 들어가겠죠!
이미지는 이미지프레임을 위와 같이 선택한 후 색상 Fill을 눌러 바꿔줘도 되고,
저렇게 선택한 상태에서 복사한 이미지를 붙여넣기해도 됩니다!
저는 Unsplash 플러그인을 써서 이미지를 아무거나 넣었어요.
프레임 70에 코너 라운딩을 주고싶다면 주셔도 좋아요,
Effect를 추가해서 그림자 효과도 한번 추가해주세요!
이제 얼추 컴포넌트 디자인은 완성되었어요. 완성된 컴포넌트를 Main Component로 만들어주시고
화면의 레이아웃대로 상품 카드를 복제하여 사용하면 됩니다!
이렇게 만들어진 컴포넌트로 한번 화면까지 만들어보시는 것을 연습해보시면 되겠습니다 :)
긴 글 읽어주셔서 감사합니다.
'UX Design' 카테고리의 다른 글
| [Figma] 피그마 프로토타이핑 시간 단축 팁 (3) | 2023.01.08 |
|---|---|
| [피그마 UI 연습] #01 - Lifesum App (0) | 2022.10.21 |
| [IA/정보구조] Medium app 미디엄 앱 정보구조 그리기 연습 (0) | 2022.05.19 |
| [IA] 정보구조는 어떻게 그려야할까? 정보구조의 8가지 원칙 (0) | 2022.05.19 |
| [앱 분석 01. ] Google Maps - 구글맵스 UX 분석 (0) | 2022.05.06 |