내배캠 - 11/4 TIL

2024. 11. 4. 20:30내배캠 본캠프

9:00 - 11:00 오늘의 카타

하팀원 분들의 레퍼런스

좋았던 점 : 쏘카의 상단바가 화면을 내려가면 따라오지 않아서 의문이었는데, 알고보니 더 보고 싶을 경우 위로 올라가는 사용자의 심리를 반영해서 투명해졌다가 상단바가 다시 나타나는 방식이었다 ! 의도해서 본 적이 없었어서 새롭게 느껴졌다. 나중에 어떻게 구현하는지 찾아봐야지...

의견이 다양했던 부분 : 문학동네의 책 내용 소개 파트가 ...형식으로 줄글이 끊기는 형식으로 되어있다. 한 팀원분은 오히려 내용을 두세줄로 간략하게 정리하여 더보기를 다는게 좋았을 것이라고 했다! 나는 책을 좋아하는 사용자들은 오히려 간추려서 정리된 내용보다, 읽어내려가다 자연스레 세부내용을 파악하고 싶어하는 성향이 강할 것이라고 생각하였다. 

아쉬웠던 점 : 하이트 진로 사이트를 보면서 이야기 해볼 수 있는 부분들이 많아서 좋았다! 먼저 메인 페이지의 카테고리 글씨와 컨텐츠 소개 코너에서 사용된 폰트가 잘 어우러지지 않는 느낌이고, 폰트 사이즈도 좀 작다고 느껴졌다. 또한 컨텐츠 소개 코너에서 사진이 일관성이 부족하다는 의견도 있었다. 어떤 사진은 사진 자체에 텍스트 효과가 들어가 있는 반면 다른 사진은 제품 사진만 있다. 

더불어 난 개인적으로 주류면 주류, 보도자료와 사회공헌 같은 항목은 따로 분리하여 배치했다면 오히려 시선을 더 끌 수 있지 않았을까 생각했다.

 

11:00- 12:00 튜터님과 상담

튜터님과의 상담을 통해 막연하게 있었던 걱정들이 정리가 된 느낌이다! 

피그마 하면서 궁금했던거 : 패딩값을 적용 기준이 있는가? 컬러 1:3:6은 필수적인가?(마켓컬리를 봤을 때 보라색만을 주로 사용하는걸 보고 의문이 생겼다) ➡️ 패딩값은 버튼이나 컴포넌트들의 사이즈나 기기의 해상도에 따라 늘렸다 줄였다 할 수 있기 때문에 상황에 따라 적합한 패딩값을 찾아가는 것이 맞다. 그리고 본인만의 기준을 잘 정의해놔야 한다.(large는 20이라면 medium은 16, 이런식) / 컬러의 경우에도 무조건적으로 1:3:6 규칙을 따르지 않는 경우도 많다. 사용자의 입장에서 생각하는 것이 가장 중요하다. 한 화면에서 FAB 버튼이 가장 중요시 되어야 하고 잘 보여야 한다면 primary 컬러를 사용할 수도 있는 것. 즉, 디자인을 하는데 있어서 규칙은 없다. 사용자에게 편하고 필요한 디자인을 하는게 가장 중요하다 

 

디자인의 부가적인 스킬 부족(피그마 이외에 포토샵이나, 일러 등의 프로그램)이 걱정됐는데, 지금 당장은 피그마에 집중하고 피그마가 익숙해졌을 즈음 포토샵 정도는 배워두는 것을 추천해주셨다. 

그리고 소통을 하는데 있어서 단어를 자주 까먹음(단어장 같은거 만들어서 외워보자..!), 의견을 제대로 어필하고 있는지 의문이다. 라는 이야기에 잘해주고 계신다는 답변을 받았다! 분석력이 좋다고 해주셨다.. 전 팀원분들과 팀프로젝트를 했을 때도 그렇고 나 스스로도 해야할 일과 업무를 정리하는 것을 좋아하고 잘하는 편이라고 생각해서 그런 부분들을 잘 활용해보면 좋을 것 같다는 조언을 받을 수 있었다. 

UX 책도 좋지만 아티클을 많이 읽어보는 것을 추천해주셨다. 아티클은 그 기업과 도메인들이 디자인을 하면서 어려웠던 부분, 신경 쓴 부분들에 대해 상세하게 적어 놓은 경우가 많아서 오히려 책보다도 실무적으로 배울 점이 많으니 활용해보라고 해주셨다! 

그리고 디자인을 하시는 분들이 공통적으로 이야기해주시는게 다른 디자인시스템(material design 등) 잘 만들어진 컴포넌트들을 하나하나 뜯어보고 사이트를 분석해서 따라해보는 것이 디자인적인 스킬을 키우는데 좋다는 것을 다시 한 번 깨닫게 되었다. 

초조해하지말고 지금 내가 할 수 있는 것들에 최선을 다해야겠다! 아주 유익한 시간이었다~!

 

개인 과제 시작

 

레퍼런스로 이마트몰 쓱배송, 마켓컬리, 쿠팡을 참고했다. 개인적으론 셋 중에 마켓컬리가 제일 ui가 깔끔한 것 같고 쓱배송은 직관적인 편이고 쿠팡은 컬러를 많이 써서 그런가 정신이 없다고 느껴진다. 세가지 ui의 장점들을 잘 분석해서 반영하도록 노력해야지..

레퍼런스 찾고 와이어 프레임을 그려봤다! 홈화면은 카테고리로만 구성하고, 목록화면에서 우유/유제품의 세부카테고리를 탭바로 구성하고 탭바를 선택하면 우유의 다양한 브랜드가 나오도록 구성했다(필수 조건 중 10개 상품, 2열을 지켜야함).

상세페이지로 넘어가면 세 가지 추가 페이지를 만들어야 한다. 하나는 상품 좋아요 했을 때 프로토타입에서 컬러가 바뀌는 화면, 하나는 라디오 버튼을 이용해서 우유의 개수를 2개로 늘리는 화면.. 하나는 다이얼로그로 장바구니로 바로 이동하시겠슴까?? (모달 화면)

 

식재료 사이트니까 그래도 입맛 돋구는 색이 좋을 것 같아서 primary를 초록으로 secondary를 주황으로 잡았다! 

근데 주황을 어느 상황에 쓰면 좋을지 잘 모르겠다. 1:3:6 법칙..을 그래도 조금 신경 쓰며 만들어보려 했지만 생각보다 사용할 부분이 별로 없는 느낌? 

 

제일 어려운게 색을 어떤 곳에서 쓸지? 고민하는 시간이 길다. 지금 고민 중인건 목록화면 제품 하단에 장바구니 버튼을 비치할 예정인데 장바구니 색상을 주황vs초록vs검정으로 할지? 그리고 홈화면의 스파르타몰을 검정으로 하는게 좋을지..하양이 나을지이다...이건 팀원들과 친구들한테도 의견을 구해봐야겠다..! 

 

오늘은 전반적으로 느낀점 위주로 작성하여 따로 회고를 하지 않아도 될 듯! 끝!!

 

'내배캠 본캠프' 카테고리의 다른 글

내배캠 - 11/6 TIL  (1) 2024.11.06
내배캠 - 11/5 TIL  (0) 2024.11.05
내배캠 - 11/1 TIL  (2) 2024.11.01
Typography  (0) 2024.11.01
Color  (0) 2024.11.01