본문 바로가기

[내배캠] 프로덕트 디자인 트랙/[내배캠] TIL : Today I Learned

[내배캠] 프로덕트 디자인 / 11일차 / 2024_11_4

20204_11_4 월요일

 

오늘 또 다시 월요일이 돌아왔다. 이번주는 개인프로젝트 시작일...!오늘 디자인카타도 우리팀은 열정이 너무 넘치는 탓에 2시간을 진행해버렸다... 오늘 타카주제는 <좋은 홈페이지 페러런스 찾기>였었다.그리고 타카 이후시간에는 "식료품 및 생필품을 구매할 수 있는 가상의 커머스 앱 UI설계 및 프로토타입 제작하기" 개인프로젝트를 드디어 시작했다.

 

오늘은 먼저 컬러 팔레트와 폰트스케일를 먼저 지정하고 레퍼런스를 찾았다.나는 쿠팡과 올리브영의 UI를 레퍼런스로 잡고 시작하였고 컬러는 프라이머리컬러, 세컨더리컬러 그레이스케일 이렇게 세가지 팔레트를 제작했다.

컬러팔레트

 

 

폰트는 Pretendard로 설정하고 각각 용도에 따라 Headline, Title, Body로 나눴다!

폰트 스케일

 

 

 

 

그리고 컴포넌트를 제작하기 전에 와이어프레임을 짯는데...너무 대충짠건가 싶지만 난 딱히 문제 없이 와이어프레임대로 진행했다.

물로 와이어프레임에 생략한 부분이 좀 있어서 그런부분은 글로 적어놓고 작업했다.

조금 부끄러우니까 작게....

 

그리고 와이어프레임을 제작하고 화면을 만들면서 변경되는 부분이 꽤 있었다. 예를 들면 이미지 사이즈나 간격 그리고 홈화면에 있는 상품들에는 딱히 글을 적어두지 않고 대충 느낌만 보려고 했던거라서 생략된 부분도 많고 변경된 부분도 꽤나 많았다

 

 

 

 

 

배운점

오늘 디자인 카타시간에 내가 가지고 갔었던 레퍼런스 중 하나가 '쥬니버스쿨' 홈페이지 였는데, 튜터님께서 이 페이지가 좋은 페이지라는 피드백해주셨다!

아래의 링크로 들어가면 쥬니버스쿨 홈페이지로 바로 갈 수 있다!

https://mkt.naver.com/p1/jrschool?ver=2

 

쥬니버스쿨 | 키즈 코딩 수학 논리 사회성 교육

즐거운 첫 공부를 위한 무료 교육 앱, 네이버 커넥트재단이 만듭니다.

mkt.naver.com

 

일단 쥬니버스쿨을 레퍼런스로 가지고 갔던 이유는 브랜드 아이덴티티를 처음부터 끝까지 너무 잘 보여줬다고 생각했고,

인터렉션조차도 너무 아기자기하고 기여웠다.

 

쥬니버스쿨은 아이들이 사용하는 서비스이지만, 결국 학부모가 이를 결정하는(?) 타겟 사용자이기때문에

학부모에게 잘 어필할 수 있는 정보들이 많다. 다른 학부모들의 후기, 이 서비스를 어떻게 연구했는지(연구대상, 연구도구, 연구기간, 연구기관), 그리고 전문가의 평가까지 타겟사용자가 필요하는 정보들을 아주 가독성 좋게 보여주고 있다는 점에서 좋은 레퍼런스라고 할 수 있다.

 

 

그리고 외국기업의 홈페이지 같은 경우에 한글로 번역하면서 여백이라던지, 글의 간격이라던지가 어색해 지는 경우가 있는데

이는 프로젝트마다 다르겠지만 해당국가의 유저가 많고, 비즈니스 규모가 크면 따로 만들어 주기도 한다.

 

하지만 처음부터 모든 나라의 언어를 생각해서 만들기는 하지만 모든 언어에 레이아웃을 100% 맞추기는 어렵기 때문에 어느정도의 오차가 발생할 수 있다는 것이다!

 

 

 

느낀점

오늘 개인프로젝트를 진행하면서 어태까지는 강의를 들으면서 실습을 따라하고 복습하기의 반복이였었는데, 막상 시작하려니 계획을 어찌잡아야할지 조금 막막했다....

 

작업을 시작하는것은 막막하지 않았는데 계획을 잡는 것은 조금 막막했다.

그래서 에라모르겠다 하면서 그냥 무작정 스타일부터 지정하고 레퍼런스를 찾았다. 근데 계획을 잡지 않고 진행한 것 치고는 꽤나 계획이 있어보이는 것처럼 진행하고 있긴하다...?

 

스타일 지정하고 레퍼런스 찾고 와이어프레임짜고 어느정도의 컴포넌트(앱바, 바텀 네비게이션, 버튼)를 제작하고, 현재는 화면을 제작하고 있다. 그리고 컴포넌트는 화면을 제작하면서 계속 베리언츠도 추가되고 프로퍼티를 추가하면서 진행하고 있는데...사실 이게 맞는건지 아닌건지 구분이 잘 안가긴한다... 하지만 난 불편하진 않다...!

 

아마 다음주에 팀프로젝트를 하게 되면 협업으로 진행되니까 협업시의 계획이나 과정의 순서도 더 배울 수 있을 것 같아서 조금 기대가 되기도 한다.

일단 나는 최대한 화면을 서둘러서 제작하고 놓친 부분이나 추가로 변경, 수정해야할 부분들을 찾아서 진행하는 것이 나의 계획이자 현재로서의 목표이다!

 

오늘도 내일도 화이팅~!~!~!~!~!~!~!~!~!