[제로베이스]UXUI디자인스쿨_WEEK 04 (1)

카공하러 가는 길에 귀여운걸 봤다

📍TO DO LIST

A. 회원가입 페이지 UI분석 및 클론 디자인

B. 벤치마킹 인프라 구축

C. Group project : 유저리서치 발표 준비

---

A. 회원가입 페이지 UI분석 및 클론디자인

[ Step 1. 앱의 회원가입 페이지 UI 화면 수집 ]
[ Step 2. 수집화면 중 5개의 앱 분석해 영역 간 간격과 크기 분석 ]
[ Step 3. 분석한 5개의 앱 중 1개 클론디자인 ]





설 연휴에도 불구하고 노트북을 켜게 되었다. 그래도 슬프거나 하지는 않은 게, 잠자리가 바뀌면 쉽게 잠들지 못하는 편이라서 '오히려 잘됐다'하고 할아버지 서재에서 혼자 노트북이랑 아이패드 켜고 과제를 시작했다!

이번주 과제는 전부 클론 디자인이라고 적혀있다. 솔직히 클론 디자인이라는 게 뭔지 정확한 뜻을 잘 모르겠어서 인터넷에 검색해 보았더니, 제시된 화면과 똑같이 만들면 되는 것 같았다. 프리스쿨 과제를 진행하며 화면을 본떠서 만드는 것에는 약간 익숙해져 있는 상태였기에 부담감 없이 시작할 수 있었다.






1) 앱의 회원가입 페이지 UI 화면 수집

선택한 앱은 다음과 같다.

1. 캐치테이블
2. 요기요
3. Fassker
4. hyde
5. Flo
6. D_Museum
7. W Concept
8. 인터파크(티켓)
9. KREAM
10. 테이블링

화면 수집은 간단할 거라고 생각하고 시작했는데, 예상외로 시간이 꽤 걸렸다. 요즘 사이트에서는 간편 로그인을 따르는 추세인지, 많은 플랫폼에서 애플 / 카카오 / 구글 등의 아이디를 통한 간편 가입을 통해 회원가입을 진행하고 있었다. 그동안은 지나치면서 보았던 '3초 만에 회원가입'이라는 문구에 이렇게 발목이 잡힐 거라고는 생각도 못했다. 로그인같이 무심코 지나쳤던 것들 하나에도 트렌드가 있구나' 하고 실감할 수 있었다.

---

2) 수집화면 중 5개의 앱 분석해 영역 간 간격과 크기 분석

영역 간격 및 크기 분석

개인적으로 클론 디자인보다 화면 분석이 더 어려웠다.

PPT도, 블로그 글을 쓸 때도 양식과 형식을 맞추는데 가장 시간이 오래 걸리는 편이기도 하지만, 어떤 식으로 표시해야 강사님께 좀 더 편하게 보실 수 있을까 하고 고민하는 시간이 길었다. 처음엔 검은색으로 통일했는데 너무 심각하게 눈에 안 띄는 것 같았고, 수십 명의 과제를 검사하시는 강사님께 너무 민폐가 되는 과제라고 느껴져서, 다른 사람들이 보았을 때 '시간 쏟지 않아도 되는 일'에 시간을 들이게 되었다. 그래도 깔끔하게 잘 나온 것 같아 만족한다! 이 과정에서 잘 정해둔 덕분에 이후에 클론 디자인에서도 헤매지 않은 부분도 있었고, 앞으로 진행될 다른 분석에서도 사용할 수 있는 형식이라는 생각에 뿌듯하다:)

---

3) 분석한 5개의 앱 중 1개 클론디자인

클론디자인 _ KREAM

클론디자인을 하며 느꼈다. Figma와 같은 디자인 툴을 사용할 때는 '이름변경'과 '그룹화' 같은 레이어 정리가 정말 정말 정말 중요하다는 것을 깨달아버렸다. 3주 전만 해도 내가 이렇게 될 거라는 걸 몰랐지,,🫠 그래도 평소에 각 맞추고, 오름차순으로 정리하고 이런 거 좋아했던 나로서는 이 부분에서 많이 힘들지는 않았다.

진짜로 힘들었던 건 아이폰 Status Bar 플러그인 찾는 것,,, 이거 너무 짜증 났다. 어떤 걸 가져와도 사이즈나 비율이 안 맞아서 결국에는 2가지 플러그인을 커스터마이즈 해서 사용했다. 남은 4개는 최소한 이걸로 시간 보내지 않을 수 있겠지,,😂

---