podium_nam0422

출처 : https://brunch.co.kr/@kellypoly/104

정리

스픽과 듀오링고, 말해보카 3개의 앱 분석

1) 차별화 전략

스픽 : 말하기에 집중

듀오링고 : 영어 공부를 게임처럼 재밌게 할 수 있도록 게이미피케이션에 집중

퀴즈와 퀘스트를 통해 보상을 받는 외적 동기를 잘 자극

말해보카 : 단어 어휘와 반복 학습을 집중

2) 마케팅 전략

스픽 : 발화량, '틀려야 트인다'라는 슬로건을 가지고 영어 말하기를 많이 시켜주는 앱으로 포지셔닝

듀오링고 : '듀오'라는 초록 부엉이 캐릭터를 마스코트로 활용하며 밈으로 마케팅

말해보카 : 핵심 메시지인 '영어가 툭', '짬(짜투리 시간에 틈틈이)'를 내세워 바쁜 현대 한국 청년들에게 

와닿는 메시지로 다가옴

3) 핵심 UX/UI 비교/분석

 1. 스픽

프리톡 탭에서 바로 AI를 상대로 영어 대화를 할 수 있는 기능이 있습니다.

AI이지만 다른 앱들과는 다르게 대화형 UX를 가져가 더 말하고 있는 상황에 집중시키게 됩니다.

두 번째로 "리뷰"를 말하기 세션이 "다 끝나고 나서" 보여준다는 점이 있습니다.

틀렸을 때 즉각 답을 알려주는 게 아닌 틀렸던 부분을 맨 뒤에 모아 정정해 주며 동시에 발음하는 방법을 집중적으로

보여줍니다.

사용자는 다음에 말할 때 더 자신감을 가질 수 있도록 안내받는 부분에 긍정적인 효과를 받을 수 있습니다.

 2. 듀오링고

게임의 스테이지처럼 생긴 UX/UI를 확인할 수 있습니다.

사용자는 스테이지를 깨 가는 느낌으로 기대감과 즐거움이 생깁니다.

스테이지를 클리어할 때마다 엄청난 햅틱과 함께 아낌없는 칭찬을 해주어 

레슨을 끝까지 해낼 수 있도록 유도하고 있습니다.

별거 아닐 수 있는 요소이지만 "공부"라는 힘든 과정을 이겨내는 유저들에게 동기부여가 될 수 있는 요소를 넣어두었습니다.

B2C 게이미케이션 앱의 정석이라는 평을 받을 정도로, 게임의 요소를 게임이 아닌 교육이라는 분야에 자연스럽고 재밌게 잘

녹여있는 앱입니다.

 2. 말해보카

반복학습을 강조하는 앱인 만큼 UX Writing에서부터 어휘와 단어라는 표현을 많이 사용하고 있는 게 보입니다.

한국식 영어 학습에 익숙한 타깃에 맞춰 "오답노트, 단어, 반복, 복습"이라는 단어들이 앱 내에 자주 등장하는 것이 

핵심 UX Writing으로 보입니다.

나의 생각

세 개의 앱들 중 나에게 선택해서 사용하라고 한다면 스픽이 될 것 같습니다.

틀려야 트인다라는 슬로건을 가지고 그에 맞게 UX를 제작하여 AI와 대화하며 영어 실력을 키우는 것이 참 흥미로웠습니다.

영어는 듣고 쓰는 우리나라의 교육 방식이 아닌 말하기의 중요성을 더욱 높게 생각하고 있기 때문에 다른 앱들보다 방향성을 잘 잡았다고 생각합니다.

그렇다고 다른 앱들의 방향성이 잘 못 되었다고 생각하지는 않습니다.

교육 앱이라는 도메인을 게임과 접목시켜 목표달성형인 UX를 만든 듀오링고 또한 캐주얼하게 즐길 수 있도록 개발되었다 생각합니다. 입문자에게 오히려 더 선호도가 좋을 것 같다는 생각이 들었고 캐주얼한 분위기에 영어 공부를 시작하는 것이 오히려 처음 사용하는 사용자에게 시각적으로도 즐길거리가 되는 UI가 되는 것이라는 생각이 들었어요.

이번 아티클의 세 가지 앱들의 차별화된 전략과 마케팅 전략, 그리고 핵심 UX/UI분석을 정리해서 보니

앱 개발에 있어서 어떤 차별성을 두는지에 따라 마케팅과 UX 디자인이 나오는지에 대해서 배운 것 같습니다.

만약 내가 '운동에 관련된 앱을 만들 거야'라고만 한다면 그냥 '운동 관련 지식', '운동 관련 커뮤니티, '운동 관련 상품' 탭들 같은

일반적인 UX 디자인만을 생각하고 만들게 될 것 같다고 생각했는데요.

어떤 차별성을 두는지에 따라 내가 만들고자 하는 앱의 디자인이 어떻게 결정이 될지 알게 해주는 아티클이였습니다.

참고 아티클

https://brunch.co.kr/@hijinnyjinny/19

UX Writing이 왜 중요한가 어떻게 설정하는가에 대한 아티클을 참고 아티클로 가져와 보았습니다.

A 텍스트 증정 방식

소비자들은 텍스트보단 이미지 확인 방식이 더 눈에 보인다.

1+1이라는 텍스트 부분이 잘 보이지 않는다.

소비자들은 다른 1+1 제품을 찾으러 이동할 가능성이 있다.

장점은 딱히 썸네일의 깔끔함? 그 정도

B 제품 이미지 증정 방식

증정이라는 키워드와 이미지 추가가 더 직관적이다.

이미지가 가장 상단에 있기 때문에 자연스럽게 눈에 잘 뜨인다.

결국 소비자는 기대 심리가 강해질 수밖에 없다.

결론

소비자는 사용 중 사은품 증정 문구를 어떻게 인지하는지에 따라 구매율이 달라질 수 있다. 

B안의 이미지 방식을 선호할 수밖에 없는 이유는 

시각적인 정보와 메시지 전달 방식이 뚜렷하며 즉각적인 인식이 강하다. 

뿐만 아니라 썸네일을 보고 기존 사용자가 아닌 소비자들도 "여긴 행사 중이네?" 하며 새로운 고객을 유치할 수 있다는 장점도 있다.

프로모션의 핵심은 직관적임과 전달력인데 A안의 경우는 B안에 비해 너무 빈약한 것이 핵심이라고 생각한다.

https://wcaxc5215.tistory.com/22

원티드 클론 디자인하기 대망의 3일 차입니다.

지난 시간에 이어 오늘은 앱 화면에 있는

요소들을 직접 만들고 컴포넌트로 묶어주는 작업을 해주었습니다!

바로 시작해 볼게요~!

01. 파운데이션 스타일화

먼저 앱에 나오는 색상과 텍스트들을 추출하여 쉽게 사용할 수 있도록 스타일화 시켜주었습니다.

스타일 조사에서 실수했던 부분이 모든 컬러와 폰트를 조사하지 못했습니다.

그러면서 제작을 하는 중에 또 다른 자간과 행간을 가진 요소들이 나와서 매우 당황했는데요.

폰트 같은 경우 결국 작업을 하는 중에 이리저리 왔다 갔다 하면서 파운데이션 정리를 해주었습니다.

결국 작업 소요 시간은 또 늘어나는 바보 같은 사태가 일어났죠...

(앞으로 조사는 꼼꼼하게)

02. app bar

이제 본격적인 UI를 만들어 보기 시작했습니다.

먼저는 화면 상단에 고정되어 있는 앱 바를 만들어 주었습니다!

03. Button, Chip

원티드 앱에 들어갈 버튼과 칩 요소들을 컴포넌트로 만들어서 다음에 사용 시 편리하게 꺼내 쓸 수 있도록 하였습니다~

04. Card

이미지가 들어갈 card는 지난 시간 미리 만들어 두었던 요소들을 가지고 조합하며 만들어 주었는데요.

여기에서 폰트들이 잘 맞아떨어지지 않아 당황하며 폰트 조사를 다시 했습니다...

힘은 힘대로 들고 작업 시간은 더 늘어났네요 ㅜㅜ

05. Carousel

저는 캐러셀이라는 단어가 떠오르지 않아 (강의 때 배웠던 건가...?) 인터넷에서 검색 후에 작업을 해주었답니다. ㅎㅎ

프레임 사이즈는 내가 만들 앱인 가로 사이즈 375에 맞추어 만들어 보았습니다.

이 캐러셀 요소들은 화면 밖에까지도 넘어가는 요소이기 때문에 적어도 5개 이상씩은 만들어서 컴포넌트로 만들어 주었습니다.

06. Icon

기존에 아이콘들도 수정해야 하는 부분들이 있었습니다.

비슷한 아이콘들끼리 묶어 조금 더 보기 편안하게 정리해 보았습니다.

(정리는 제 스타일이 아닌가 봅니다...ㅎ;;;)

07. Navigation Bar

앱 화면 하단에 고정으로 들어갈 네비게이션 바입니다.

서로 갭이 잘 맞지 않아 굉장히 고심하고 고생해서 만들어야 했습니다.

그냥 오토레이아웃을 전체 적용해 주면 MY 원티드의 크기가 너무 커서 갭 차이가 이쁘게 떨어지지가 않습니다. ㅜㅜ

08. Section Title, Text Box

 사실 이 페이지에는 뭘 추가해 주어야 할지 갈피를 못 잡아서 남는 요소들을 만들어 주었습니다.. ㅎㅎ

09. Tab

이제 마지막으로 만들어 준 텝 컴포넌트입니다.

이렇게 제가 클론 디자인 할 화면에 들어갈 요소들을 얼추 전부 만들어주었습니다!

개인 회고

이제 디자인 시스템이라고 하기 뭐 하지만 원티드 클론 디자인 하기 위한 준비는 끝났습니다.

오늘 목표는 도전 과제 시작해 보는 것이 목표였지만 오늘도 실수와 무지함이라는 지옥 구렁텅이에 빠져버려

원하는 목표까지 달성하지 못했습니다.

또한 다른 분들이 작업한 것을 보았는데요.

스타일 분석에서 제가 너무 디테일하지 못했던 부분이 너무 많더라구요..

as is와 to be를 나누어 작성해야 했었는데 그렇게 하지를 못헀어요...

앞으로 스타일 조사를 어떻게 해볼지 고민을 좀 해야겠다를 느낀 하루였습니다.

초반에 작업을 힘들게 해야 이렇게 후반부에 고생을 덜 하겠구나를 생각했습니다.

A 숫자 순서 랜덤

장점

게임이나 기본 앱에서 사용되는 것 같다. 기존 다이얼에서 번호 배치만 바뀐 것이기 때문에 많은 사용자들이 

A의 사용성이 편할 것이라고 생각한다. 

나이가 많은 사용자들이 사용하기에 차라리 A안의 사용이 편할 것이다.

상대적으로 빠른 사용이 가능할 것도 장점에 한몫할 것 같다.

단점

B안에 비해서 다소 보안 수준이 낮을 수 있다.

A안은 패턴이 비슷하게 반복되므로 패턴의 예측이 가능한 리스크가 있다.

B 공백 + 순서 랜덤

장점

보안성이 높다. 많은 금융 서비스에서 사용하는 것 같다.

공공장소나 주변에 사람이 많은 곳에서 사용시 어깨너머로 훔쳐보기가 다소 어려워 질 것이다.

단점

배열 자체가 늘어남에 따라 사용성이 보다 불편해진다.

시니어 사용자들에게는 다소 불편함과 '핸드폰이 망가졌나?'라는 인지 오류를 받을 수 있게 된다.

결론

핀테크와 같은 보안이 다소 필요한 앱에는 B안을, 기존/앱들 같은 경우에는 A안을 사용하는 것이 좋을것 같다.

일부 사용자 에게는 B안 같은 경우 온라인 경험도 중요하지만 오프라인에서의 프로덕트 사용 교육이 필요할 수도 있다.

한번 생각해보기

시니어 사용자에게는 보통 A와 B안 둘다 키보드로 인식이 될까?

B안을 더욱 직관적이고 깔끔하게 보이는 방법이 무엇이 있을까?

https://toss.tech/article/toss-design-system-guide

정리

기존 가이드로 컴포넌트를 개선하려 할 때, 동료들과의 소통이 힘들었다는 것을 인지하였습니다.

기존에는 한눈에 스펙을 확일할 수 있게 정사각형에 가까운 형태로 가이드를 배치해 주었지만 동료들이

어떤 순서로 읽어야 하는지 파악하기 어려웠다는 것을 알게되었습니다.

그래서 정보를 단순히 그룹핑하는 것이 아닌 읽는 방식부터 누구나 같은 방향으로 읽을 수 있게 

그룹핑된 가이드 내용을 위에서 아래로 흐르게끔 배치했어요.

개발도 그림을 그리듯이 큰 구조부터 자세한 요소로 진행된다는 점을 생각했습니다.

개발자가 구조를 이해할 수 있도록 컴포넌트의 상위옵션인 상단과 하단 타입을 먼저 보여주고, 각 타입에

포함된 요소들을 정리했습니다. 그다음 컴포넌트의 다양한 상태 변화의 상세 스펙을 추가해 주었습니다.

나의 생각

디자이너는 끊임없는 생각과 공부가 생명이라고 느낍니다.

300명이 넘는 개발자와 디자이너를 위한 디자인 시스템을 4명의 디자이너가 운영하고 있다는 게 참 대단하다고 느끼고

'사명감을 가지고 일해야겠구나'라는 생각을 하게 되었어요.

현재 디자인 시스템을 만들어보는 과제를 하고 있지만 300명이 봐야 하는 디자인 시스템을 만들어야 한다고 생각한다면

"지금 내가 만들고 있는 디자인 시스템이 사람들에게 잘 읽힐까?"라는 생각을 하게 되는 아티클이었습니다.

이 아티클을 작성한 디자이너님은 디자인 시스템을 만들고 나서 끝이라고 생각하지 않았어요.

'어떻게 하면 더 좋은 가이드를 만들어서 업무의 효율을 높일 수 있을까?'를 끊임없이 생각했다고 느꼈습니다.

결국 이 디자인팀은 가이드 작성 규칙이 없었을 때는 하나의 컴포넌트 가이드를 작성하는 데에만 일주일이 걸렸지만,

개선 후 3개를 하루 만에 가이드 작업할 수도 있게 되었다고 합니다.

하물며, 새로 합류한 디자이너도 시스템을 빠르게 이해할 수 있게 되어 바로 기여할 수 있게 되었다고 해요.

오늘 읽은 아티클을 기준으로 새롭게 디자인 시스템을 다시 만들어봐야겠어요.

하지만 아직은 기술적으로나 속도로나 부족한 게 많으니 배치하는 방법부터 바꾸어 봐야겠습니다.

내가 만드는 앱이나 웹뿐만이 아닌 디자인 시스템 가이드도 신경 써서 만든다를 생각하고 정진해야겠습니다.

https://wcaxc5215.tistory.com/9

참고 내용 : 디자인 시스템에 대하여

https://www.elancer.co.kr/blog/detail/268

참고 아티클 : 기존 다른 앱들에는 어떤 디자인 시스템 가이드를 가지고 작업하는지, 어떤 식으로 작업을 하는지 알아보았습니다.

업무 시간을 단축하는 방법도 있습니다..!

안녕하세요. 한 주의 시작인 월요일입니다!

지난주 금요일부터 시작한 원티드 앱 클론 디자인 하기!

준비의 준비의 준비 단계를 해보았습니다~

오늘도 이어서 앱 분석 진행을 하겠습니다!

01. 반복되는 UI 요소 파악하기

지난 시간 조합 요소와 조합 요소가 합쳐진 section UI를 분석해 보았습니다,

이제는 조금 더 작은 단위 UI를 쪼개면서 Module과 Item까지 분석을 해볼게요!

사진 밑에 있는 바는 고정 바 또는 버튼입니다.

앱 슬라이드시 고정되어 있는 바는 밑에 따로 표시해 두었습니다.

저는 module 프레임을 만들고 스크린샷 이미지를 일일이 잘라가며 분석을 해보았습니다.

이렇게 자르다 보니 시간을 너무 많이 뺏기게 되었어요...

다음부터 더 빠르게 작업할 수 있는 방법이 있는지 찾아봐야 할 것 같습니다

Home 화면만 일단 작업이 끝났으니 리스트와 상세 화면까지 작업을 해주어야겠죠?

깔끔히~ 정리된 모습.

리스트와 상세 화면까지 정리를 해보았습니다.

그리고 그 안에 이미지가 들어가는 카드와 텍스트, 아이콘 바로 이렇게 3씩으로 나누어 작업을 해주었습니다.

이제 아이템입니다.

이 것도 일일이 스샷 뜨고 이미지 사이즈 맞춰보고... 일일이 수작업으로 진행했어요...

버튼 만들고 UI 만드는 건 재밌는데 분석하는 건 왜 이렇게 힘들까요... ㅎㅎ...

아이템이 왜 생각보다 별로 없냐구요?

카드 이미지는 따로 작업해 주었거든요~

이미지 카드들은 대부분 반복적인 UI이기 때문에 사이즈도 잴 겸 먼저 만들어 주었어요~

제가 생각하는 반복적인 UI요소들을 밑에 이렇게 또 분류를 해주었습니다.

이제 이렇게 캡쳐한 요소들을 가지고 피그마로 비슷하게~! 만들어 보는 작업을 해볼 겁니다.

이제 반복되는 UI요소 파악이 끝났습니다.

아무래도 아직 아마추어이다 보니 빼먹은 게 있을지도 모르지만 그건 나중 가서 생각해 보자고요.

이 정도 분석하는데도 진이 빠져서...

02. 스타일 분석

이제는 스타일 분석입니다.

원티드 앱의 컬러와 폰트(사이즈와 행간), 마진 값을 분석해 볼 예정입니다.

1) 컬러 분석

 지난 포스팅에서 컬러에 대해서 포스팅을 다루어 보았습니다!

UI 컬러에는 primary color, secondary color, background color 등이 있다고 말씀드렸습니다!

디자인 기초 컬러에 대하여 : https://wcaxc5215.tistory.com/18

원티드 앱의 프라이머리 컬러는 블루 컬러입니다.

블루 컬러를 활용해 앱에서 중요한 요소를 강조해주고 있습니다.

Nomal은 기본적인 색상을, Strong은 의사상태일 때, Heavy는 터치 또는 클릭한 후의 의사상태일 때의 색상입니다.

그리고 백그라운드 컬러와 세컨더리 컬러라고 생각되는 라벨 컬러와 라인 컬러를 나누어보았습니다.

2) 폰트 분석

원티드 앱에서 폰트는 보통 프리스텐다드 폰트를 사용합니다.

각각의 상황에 맞게 사용할 폰트들을 정리해 주었습니다.

3) 아이콘 분석

아이콘 분석은 제가 만들지 않고 오픈 라이브러리 소스를 끌어다 사용해 주었어요.

하나하나 만들어줄 수는 있지만 ,.... 앞에서 스샷 찍느라고 시간을 뺏긴 아마추어 1인이기에...

아이콘은 그냥 끌어다 사용해 주었습니다 ㅎㅎ

어짜피 나중에 아이콘 다 다운 받아와서 쓸꺼자나욧~!

사용할 아이콘들을 모아 와서 멀티플 컴포넌트로 만들어 주었습니다!

이렇게 하면 Assets에서 편하게 끌어다 사용할 수 있으니까요~

4) 마진, 갭 분석

스샷 한 이미지는 픽셀값이 딱 알맞게 떨어지지 않아서 마진 값이 19, 15 이렇게 수치가 나오는데요...

UI를 디자인할 때 짝수로 떨어지거나 4 or 8의 배수로 떨어지는 게 좋다고 했는데

모든 화면마다 19가 나와서 난감했습니다 ;;

아무래도 나중에 UI 만들 때 조금씩 수정해 주면서 해야겠어요

개발자 모드 앱에서 확인해 볼 수 있겠지만 마진, 갭 수치가 어디서 확인할 수 있는지는 잘 모르겠네요 ㅠㅠ

이렇게 만들 모든 화면을 분석해 주었습니다!

03. Foundation

자! 이제 클론 디자인하기, 준비의 준비의 준비 단계가 얼추? 끝났습니다!

이제 다음 작업부터는 조금 더~ 스무스~ 하게 진행이 될 것 같은데요.

파운데이션으로 UI의 작인 단위인 컬러와 아이콘, 타이포그래피까지 스타일러로 만들어 

편하게 끌어다 쓸 수 있는 작업을 해보려고 합니다.

이렇게 프라이머리 컬러와, 백그라운드, 세컨더리 컬러까지 컬러 파레트를 만들어 주었습니다.

전에 피그마에서 스크립트해둔 플러그인인 스타일러로 저장해 주었습니다.

여기에 폰트까지 저장해 주면 오늘 작업은 끝~

사실 시간이 남아서 app bar와 button까지 작업을 해주었는데요.

다음 시간 TIL로 다룰 예정입니다요~~

개인회고

오늘 하루가 너무 짧은 하루였습니다 ㅜㅜ 눈 깜짝할 사이 저녁 9시가 되었는데요.

개인 과제를 진행하면서 애매했던 부분들(생각나지 않았던 용어들)이 많아서 지난 시간 복습을 해주면서

진행해 주었습니다. 

세컨더리 컬러 같이 간단한 용어도 생각나지 않아 강의 자료를 훑어보러 간 나... 반성합니다...

분명 강의는 열심히 들었건만 피그마의 하얀 도화지 같은 화면만 보면 지난 시간 배운 강의가 백지와 함께 사라지는 마법...!

역시 피그마는 마법인가 봅니다 ㅎㅎ

계획해 둔 일정에 스타일 분석까지는 오전에 끝낼 예정이였지만 디자인 카타와 스크린샷의 무한 노가다로 생각보다 늦게 

끝나 오후 시간 대부분의 일정을 빼앗겼는데요.

시간 계획은 꼼꼼하게 세운 다고 해도 항상 틀어지네요 ㅠㅠ 

하지만 계획보다는 배운 학습 내용 위주로 오늘 작업을 해주었다고 생각했습니다.

부족했고 애매했던 부분을 조금씩 채워줄 수 있었던 하루가 되었지 않았나 생각되네요.

Leading icon A 

아무래도 친숙한 UI일 것 같다.

개수파악이 용이한 것도 사용자들에게 편리함을 제공한다.

읽은 메세지와 읽지 않은 메세지 모두 배경이 같아서 리스트 자체가 균일하게 보인다.

텍스트에 더 집중하게 만들수 있으며 회색 처리처럼 읽은 메시지를 죽이지 않기 때문에, 

읽은 메시지도 여전히 가치 있게 느껴질 수 있다.

하지만, 파란 점을 찾아야 해서 스캔 효율은 B안보다 떨어질 수 있다.

특히 리스트가 길어질수록 "어디 읽지 않은 게 있었지?" 하고 다시 위아래로 탐색해야 할 수 있다.

Grayed out B

어찌보면 B의 장점이 더 많을 수 있다.

블로그와 이메일에서 사용하는 표현 방식이다.

일단 첫번째로 시각적 위계가 생긴다.

읽지 않은 메세지인 흰색 배경이 눈에 확 띄이며 읽은 메세지인 회색 화면이 뒤로 물러나게 되어

사용자는 자연스레 "읽지 않은 것"에 집중하게 된다.

두번째는 목표 지향 행동이 빨라짐에 있을 수 있다.

"읽지 않은 메시지만 빨리 확인하고 싶다"는 사용자의 니즈에 잘 부합하다.

리스트를 스크롤할 때 한눈에 읽지 않은 항목만 걸러낼 수 있어 빠른 분류가 가능해진다.

특히 메일 같은 수신량이 많은 시스템에서는 이런 분리 효과가 체감 차이를 크게 만든다.

그러나 회색 처리의 부작용으로 읽은 메시지들이 "비활성화"처럼 느껴질 수 있다.

회색은 보통 '꺼짐, 완료, 비활성' 상태를 상징하기 때문에

무의식적으로 "읽은 건 별로 중요하지 않음"을 인식하게 된다.

그래서 읽은 메시지도 재확인하거나 다시 보기를 원할 때에는 UX 저항이 생길 수 있다.

결론

어떤 서비스를 제공하는 곳에서 UX를 적용할 것인가를 고려할 필요가 있다,.

수신량이 많거나 방대한 자료를 다루는 서비스일 경우 B안을

핸드폰 기본 메시지나 대화형 서비스를 경우 A안을 선택할 수 있다고 생각한다,

읽은 후에도 다시 답장하거나 이어서 대화할 확률이 높은 핸드폰 메시지에서는 '비활성화'

같은 느낌을 주는 B안 보다 여전히 살아 있다라는 느낌을 주는 A안에 더 적합하다고 생각한다.

한 번 생각해보기

핸드폰 기본 메시지 앱에 A안의 '파란 점'과 텍스트의 굵기를 강조할 'Bold'를 조합해 주면 어떨까?

디자인 카타 토픽 참고 사이트 : https://designus.io/

참고 아티클 : https://ditoday.com/%eb%b9%a8%eb%a6%ac%eb%b9%a8%eb%a6%ac-%eb%af%bc%ec%a1%b1%ec%9d%84-%eb%a7%8c%ec%a1%b1%ec%8b%9c%ed%82%a4%eb%8a%94-ui-ux-%eb%8f%84%ea%b0%90%e2%91%a2/

안녕하세요~! :)

드디어 길었던 평일을 보내고 금요일 저녁입니다 ㅎㅎ

오늘부터 이제 피그마에서 본격적으로 클론 디자인을 공부하게 되었습니다.

처음으로 시작해 보는 앱은 '원티드' 앱입니다!

01. 디자인할 화면 캡쳐

총 세 가지의 화면을 디자인해볼 생각입니다.

1. 홈 화면

2. 리스트 화면

3. 상세 화면

이렇게 세 화면을 어플에서 캡쳐해준 후 피그마로 가져와 

클론 디자인을 해볼 생각이에요!

클론 디자인을 하기 전에 디자인 시스템을 만들어 볼 생각입니다. 

그 디자인 시스템을 하기 전의 전 단계라고 생각하면 되겠네요 ㅎㅎ 

디자인 시스템이 무엇인지 아래 링크에 정리해두었습니다.

이미지 사이즈는 링크를 걸고 가로값 375 사이즈로 통일해 주었습니다.

https://wcaxc5215.tistory.com/9

02. 반복되는 UI, 그리드 파악

캡쳐 후 피그마에 깔끔하게 정리를 했다면 반복되는 UI를 정리해볼 겸

그리드를 나누어 보았습니다.

화면 안에 구성이 어떻게 되어 있는지, 반복되는 UI요소와 엘리먼트 같은 작은 단위의 요소들을 

분석해 보기 위해 그리드를 그려주었습니다.

반복되는 UI는 한눈에 보기 어렵기 때문에 다른 페이지로 복사 후

반복되는 UI들만 다시 찾아보겠습니다!

그리드로 나누면서 이미지가 들어갈 item 요소들을 따로 빼서 컴포넌트로 묶어 놓았는데요.

아직은 해야 할 작업이 남아 있기 때문에 따로 저장해둘게요! :)

(사실 분석하기 지쳐서 딴짓했음)

홈 화면에서 반복되는 UI 요소들을 파악해 주었습니다.

이어서 리스트 화면(커리어 화면)과 상세 페이지 화면까지 반복되는 UI 요소를 파악해 주었습니다.

이렇게 파악한 UI들을 또다시 따로 캡쳐 후 

section, module, item으로 나누는 작업을 해 볼 겁니다!

item : 가장 작은 요소의 컴포넌트

module : 기본 요소와 기본 요소, 조합 요소와 기본 요소가 조합된 요소

section : 조합 요소 + 조합 요소 + 여백(마진, 패딩)이 조합된 요소

오늘 작업을 생각보다 늦게 시작해서 오늘은 일단 이 정도까지만 해주었는데요!

이제 본격적으로 들어갈 UI 만들기 작업 기대도 되고 앞으로 잘할 수 있을지 걱정도 됩니다.

강의를 들으면서 작업을 할 때 뭔가 만들어 가는 뿌듯함이 있었는데요. 

앞으로 만들 디자인 시스템과 클론 디자인을 만들어 가면서 설렘 가득 안고 작업에 임해보겠습니다 :)