[클론 디자인]피그마 SSG 홈화면 만들고 분석하기
행복한 연휴를 보내고 왔습니다~!
별로 한 거는 없지만 쉬면서 재충전하고 왔답니다!
이제 어느덧 캠프 4주차가 되었는데요. 지난번 원티드 클론 디자인을 위해 UI분석까지만 해보고 아직 완벽히 끝내진
못한 상태입니다...
요즘 하루 24시간이 너무 너무 짧은 것 같아요 ㅠㅠ
이번에는 라이프 스타일 플렛폼을 카피해 보는 과제를 받았는데요.
저번에는 디자인 시스템을 만들고 클론 디자인을 해보는 작업을 해보았지만
이번에는 앱 화면을 만들면서 컴포넌트를 추가해 UI키트를 만드는 작업식으로 진행해보려고 합니다!
1. 앱 화면 캡처 기본 분석
먼저는 홈 화면입니다.
SSG 홈 화면에는 상단바가 고정으로 들어가면서 하단 바가 슬라이드시 사라지는 UI구조를 가지고 있었습니다.
상단바에는 브랜드 로고와 Input 검색창, 아이콘들로 가득 채워준 것을 확인해 보았습니다.
특이한 점은 다른 앱들과는 달리 카드나 배너 요소에 radius를 적용하지 않고 직각 모서리를 보여주는 것이
보입니다.
SSG 모바일의 UI 좌우 마진 값은 16px로 맞춰준 것으로 확인했는데요.
(안드로이드 폰으로 촬영 후 아이폰 화면 비율인 375가로 비율을 적용 후 파악해 본 값입니다!)
이러면 대부분 4의 배수로 패딩이나 마진값을 주면서 앱이 만들어졌겠죠?
2. 홈 화면 만들기
먼저 상단바를 만들기 시작했습니다.
일일이 폰트와 사이즈를 재보면서 수작업을 진행해 주었는데요.
어떤 폰트를 사용하는지는 정확히 파악이 어려워 일반적인 프리스탠다드와 인터 폰트를 사용했습니다.
이렇게 컴포넌트를 하나 만든 후에 이 안에 있는 요소들을 파악해 주었는데요.
파악할 수 있는 요소는 폰트와 폰트에 사용된 컬러, 백그라운드 컬러, 인풋 필드의 컬러, 아이콘 컬러를 확인 후
따로 정리를 해주었습니다.
아이콘은 구글 메테리얼 사이트에서 다운로드할 수 있는 아이콘으로 대체해 주었습니다.
이런 식으로 만들어 나가면서 컴포넌트를 만들고 Item들을 파악하는 방식으로 앱을 분석하며 만들어 주었습니다~
3. 홈 화면 클론 완성, 홈 화면 분석 UI키트
오늘 작업한 분량입니다!
강의 들으랴~ 과제 하랴~ 아티클 공부하랴~ 디자인 카타하랴~ 하루하루 할 일이 정말 산더미처럼 많네요 ㅎㅎㅎ
그래도 하루하루 배워 나가면서 성장한다는 뿌듯함이 있는 것 같습니다!
느낀 점
여러 앱을 비교하면서 다른 앱들을 비교하면서 어떤 구성으로 되어 있는지, 파악해 보았습니다.
SSG는 많은 제품을 다루는 데에 비해 UI가 뭔가 깔끔하다는 느낌을 받았는데요.
명품을 취급하면서 다양항 생필품까지 함께 다루는 플렛폼이라서 UI 구성에 더 신경을 써야 했기 때문이지 않을까 생각을 했습니다.
UI구성 조사와 함께 컴포넌트를 만들면서 앱 화면까지 만드는 게 더 빠를 줄 알았는데 생각보다 시간이 더 오래 걸리긴 하네요...
여러 방법을 고민하고 계속해보면서 연습하고 내 방법을 찾아가야겠다고 생각되는 하루였습니다.ㅎㅎ