[제로베이스]UIUX디자인스쿨 4주차_01

이제 곧 목요일인데 4-1 과제를 오늘 끝냈다...

이번주는 산 넘어 산이었다. 

지금은 그룹프로젝트가 마무리 되어서 업로드만을 기다리고 있지만 막바지에 이르러 대본을 만들고 검수하는 과정까지 동시에 하려니 정말 정신 없이 시간이 간 것 같다. 여기서 항상 마음에 걸리는 한가지. 나 제대로 하고 있는 거야? 아직 3주차라서 그런가 아직도 이 질문이 종종 맴돈다. 그룹 프로젝트 기간에는 매일 10시에 그녀들을 만나기 위해 설레는 마음으로 미팅방을 만들었는데 이미 습관이 되어버린 그들..어떻게 잊어야 하지? 그룹프로젝트에 대한 소감은 아마 다음편에 쓸 수 있을 것 같다. 강의 들은 것만 학습일지에 올릴줄 알았는데 과제하는 데에 생각보다 시간이 너무 오래 걸려서 강의를 듣지 못하고 있다. 아우 걱정 돼! 어찌됐든! 이번 과제를 통해 배운 것들도 있으니 얘기를 이어나가겠다. 

---

4주차 첫번째 과제는 회원가입 페이지 UI분석 및 클론 디자인이다. 

 

 

최종 작업 화면이다. 프리스쿨 때 항상 그룹핑하고 이름 적어서 정리하는 습관을 들이는 게 좋다고 하셔서 하나씩 정리하면서 했더니 아직 손에 익지 않아서 그런지 시간이 오래 걸리는 이유 중 하나이다.

 

좋은점 1 내가 찾고자 하는 컴포넌트를 검색해서 찾을 수 있다. 검색하지 않아도 순서대로 정리되어 있어서 눈으로 바로 찾을 수 있다. 

좋은점 2 가끔 움직이지 말라고 잠가놓고 어디에 있는지 못 찾아서 난감한 경우가 있는데 빠르게 찾을 수 있어서 시간이 절약된다.

좋은점 3 보이는 화면이 깨끗한 만큼 생각도 정리된다. 

좋은점 4 간격을 맞추면 기분이 좋다. 내가 보기 편한 만큼 공유 받는 상대에게도 도움이 되기 때문에 좋은 습관을 들이고 있는 것 같아서 기분이 좋다.

 

과제를 하는 과정은 다음과 같다.

1. 10개의 앱의 회원가입 화면을 수집한다. (당근마켓, 텔레그램, 잡코리아, 케이크, 뱅크샐러드, 토스, 에어비앤비, 숨고, 구글, 인스타그램)

 

💡 기존에 로그인되어 있는 어플에서 로그아웃을 하고 새로 가입을 하려고 하면 중간 과정에서 이미 계정이 있어서 중단되는 경우가 많았다. 사용자인 나에게는 좋은 기능이지만 과제하는 나에게는 절망스러운 순간이다. 왜냐? 다시 다른 앱 찾아야 하거든. 찾다가 찾다가 이대로는 안 되겠다 싶어서 사이트에서 일부를 수집해왔다. 

* Mobbin(https://mobbin.com/)  

* WWIT(https://wwit.design/)

💡 로그아웃 했다가 다시 로그인을 영영 못하게 되는 수가 있으니 조심해야 한다. User name으로 로그인 해야하는데 기억나지 않는다거나 해외 유심으로 인증한 것들이 그 예이다. 왜 이렇게 자세하냐고? 그것이 실화니까.

 

2. 수집한 화면 중 5개의 앱을 골라서 간격을 분석한다. (당근마켓, 뱅크샐러드, 토스, 구글, 인스타그램)

각 영역 간의 간격을 위와 같이 표시했다. 처음에는 이것보다 더 심한 막장이었다. 여기저기 도형을 덕지덕지 붙이다가 이건 아닌 것 같아서 Material Design을 참고했다. 처음에 10개의 화면을 정리하느라고 줄인 걸 다시 늘려서 하다가 아차 싶었다. 그래서 다시 비율을 아이폰 13 미니(375X812)에 맞춰서 작업했다.

 

사이트를 참고하긴 했지만 각 영역마다 가이드라인이 있을 텐데 내가 임의로 잡고 간격을 재다보니 이게 맞나 싶은 생각이 들었다.

하나씩 차근 차근 간격을 재는데 은근히 홀수가 나올 때가 많아서 흠..내가 배운 것과 현실은 다른 것인가 싶었다. 

특히 '숨고' 간격을 재는데 왜 소수점이 나오는지 내가 잘못하고 있는 게 분명하다는 생각이 드는데 새로운 사례도 필요하겠다 싶어서 끝까지 진행했다. 

 

💡동일한 앱 동일한 과정을 진행하는 페이지인데도 마진이 바뀌는 경우가 있다. 일관성과 통일성도 중요하지만 각 과정에서 필요한 컴포넌트들이 가장 효과적으로 돋보일 수 있게 레이아웃과 마진을 다르게 적용하는 것 같다. 어찌보면 당연한 소리? 

 

3. 그 중 하나의 화면을 클론디자인 한다. (구글)

4장 더 있는데 제일 잘한 것 같아서 가져왔다. 와... 이건 진짜 여기 들어있는 각 아이콘들까지도 하나하나 만들어서 했다. 첫 화면을 완성하는 데에 오래 걸리는 것에 비해 다음 페이지는 조금씩만 고치면 돼서 수월했다. 특히 기본틀을 디자인 할 때 위치가 소수점이 나와서 하나하나 자리 잡느라고 난감했지만 이미 틀린 걸 아는 상황에서 대충하고 싶지 않았다. 사실 성격상 계속 생각나서 그냥 지나칠 수 없었다 엉엉

 

💡 간격을 재보고 클론디자인을 진행하니 맞게 디자인 하고 있는 건지 어느정도 가이드 역할을 해준다. 

💡 아이콘을 만들면서 이 곡률 저 곡률 쓰다보니 이건 어떤 값을 줘야하는지 점점 감이 온다. 

💡 구글에서 Roboto를 쓴다고 해서 했다가 영 아닌 것 같아서 Inter로 바꾸니 그나마 비슷해졌다.

💡 텍스트 간격이 조금씩 달라진다. 왜죠? 다른 폰트를 써서 그런가? 덕분에 텍스트 크기와 글간격에 대한 감도 잡는 연습이 되긴 했다. 

💡 폰트의 중요성. 크기와 간격이 비슷해진다고 한들 어떤 폰트를 쓰느냐에 따라 정보를 더 명확히 전달할 수 있다. 

💡 폰트 크기의 중요성. 분명 다 맞췄다고 생각했는데 PDF로 추출해서 확인하니 해커들이 사기용으로 보내는 앱인가 싶은 어딘가 모자란 느낌이 났다. 폰트 크기 하나가 전체 분위기를 바꿀 수 있구나 느끼게 됐다. 

💡 디자인시스템의 중요성. 과제를 하다보니 디자인시스템 없이 그 수많은 페이지들을 어떻게 확신을 가지고 일관성을 주면서 브랜드 아이덴티티까지 챙길 수 있을까 생각했다. 

 

---

그룹 프로젝트 중에 팀원분이이번 과제를 어떻게 했는지 공유해주셨는데 너무 예쁘게 잘하셔서 놀랐다. 이런분들이 높은 점수를 받나 싶었다. 이렇게 서로 과제한 것을 주고 받으니 내가 어떤점을 발전시키면 좋겠다 싶은 포인트들이 나오니 좋았다. 점수 잘 받고 싶다.. 다시금 드는 생각인데 개인적으로 과제 점수가 있어서 경쟁의식 덕분에 그나마 더 알아보려고 노력하고 내가 매일매일 UXUI 곁에 있겠구나 싶다. 이 코스가 최고의 선택이었는지는 나중에야 알 수 있겠지만 어제보다 나은 내가 될 수 있게 도움이 되는 것은 확실하다. 

 

과제가 오래 걸리는 이유 중 하나는 이 산이 아닌가벼하면서 애써 올라간 산을 내려와서 다시 다른 산을 올라야 하는 과정이 반복돼서이다. 

 

블로그 남길 때 졸려 죽겠는데 내가 뭘 공부했고 뭘 배웠는지 뭐가 부족한지 글로 적으니까 계속 그 점을 유의하려고 노력하게 된다. 처음에는 잉 학습일지? 라는 생각이 들었는데 점점 더 좋아진다. 

 

제로베이스의 과제 순서는 다음 과제를 헤쳐나가기 위해 잘 짜여진 상자 속의 상자인 것 같다. 또는, 고통 속의 작은 고통~? 할 때마다 힘들어 죽겠는데 다음 과제를 하다보면 도움이 된다. 이론상 점점 수월해져야 맞는 것 같은데.. 월요일에 시작한 것 같은데 왜 벌써 수요일? 

 

저번주에 이번 과제 목록을 미리 확인하고 퇴사했는데 안 했으면 지금 어떻게 했을까 싶다. 직장인분들이 많던데 다들 살아계시나요..?

퇴사를 했는데 왜 강의 들을 시간이 안 나는거지?의문이 드는데 일단은 당면한 문제부터 풀어보자.