[TIL] 1104 학습일지

 

오늘 한 일

- 디자인 카타

- 개인과제(커머스 앱 메인-목록-상세)

  1)레퍼런스 수집(이마트몰, 마켓컬리, CJ더마켓, 쿠팡)

  2)사용자 시나리오를 바탕으로 한 와이어프레임 그리기

  3)필요한 컴포넌트들 정리

 

오늘 겪었던 문제점

Button-Secondary or Outlined?

상세페이지 내에 하단 버튼들을 만드는데 레퍼런스들을 참고하면 찜하기/장바구니 담기/바로 구매하기 버튼의 중요도 순서가 '바로 구매하기'-> '장바구니 담기'->찜하기로 즉시구매에서 멀어지는 순서대로인 것까지는 파악했는데, 레퍼런스들에서는 모두 '장바구니 담기'가 Outlined Button이었다.(왜 채워진 Secondary가 아닐까?) 내일 튜터님에게 여쭤봐야겠다.

 

오늘 배운 점

오늘은 카타시간에 많은 레퍼런스들을 보았다.

 

1)브랜드무드를 잘 살린 레퍼런스들

• Byte(씹는 치약): 무드를 보여줄 때에 사진 이미지, 깔끔하고 차가운 이미지로 구분한 부분. 브랜드 전략에 대한 부분. 무드와 컨셉을 보여주는 것도 중요하다.
• 탬버린즈: 이미지에 큰 힘을 준 느낌. 일반적인 커머스와 다르게, 간결하게 시크하게 제품들 큐레이션 해두는, 마치 오프라인 상점의 형태를 웹에 차용한 느낌.
• 이솝(Aesop): 이미지를 연출할 때, 어떤 방식으로 보여지는지 사진과 웹의 디자인을 관찰해보자.
• 파허티(farherty): 빠른 구매에 최적화된 사이트
• 오틀리(Oatly)가로 스크롤 중심의 사이트(https://www.oatly.com/)

 

2)기본에 충실한 웹사이트

• 크몽: 일반적인 구조를 잘 보여주는 포멀한 사례. 전체 2뎁스 안에 넣어버려 일반적이고 쉽게 접근할 수 있게 했다.
• 알툴즈: 여러 요소들을 시끄럽게 나열하지 않고, 아이콘/카드 형식으로 보여주고 진입해서 볼 수 있도록 잘 정리했다.

->크몽과 알툴즈는 잘 정리되어있지만 투뎁스 이상 진입해보아라.

 

 

3)뉴스: 요소를 많이 넣는게 복잡한게 아니라 정리되지 않은 것이 복잡한 것
뉴스에서 이미지 사이즈, 타이틀의 사이트 디스크립션 양 카테고리들도 잘 나올 수 있도록 찾아보자. 

B2B사이트의 경우에는 구조를 크게 바꾸지 않음. 투자자들과 관련 하청/상위 업체들과 같이 다양한 밸류에 대해 브랜드를 위한 살이 붙어야 하기 때문에 깔끔한 레이아웃으로 잘 전달할 수 있어야 함. 쿠팡 뉴스룸의 페이지는 정말 깔끔하다. 레퍼런스를 찾으면 아마 깨끗한 레이아웃들이 참고할 수 있는 곳이 많을 것이다.
기업의 뉴스사이트 말고, 자체 뉴스 사이트들의 경우(중앙/네이버 뉴스)같이 일관성있는 레이아웃 안에 잘 정리되이있음. 신문같은 느낌을 그대로 구조를 가져왔기 때문에 그럴 수 있음. 이는 헤리티지를 느껴지게도 함. MZ보다 기성세대들이 익숙한 레이아웃이기 때문에, 더 편하게 볼 수 있음. 이는 네이버 뉴스와 비교해보아도 알 수 있다. 글과 이미지와 연결되어있는 레이아웃, 기자 사진이 있는 레이아웃, 신문 1면 모아보기 등 다양한 기법들이 있음. 꼭! 뉴스페이지 클론해보기!! 구조파악에 넘 좋음.

4)기타

• 롤체지: 왜 페이지가 다크/라이트 모드가 나뉘어져있는지, 페이지바이페이지인지 살펴볼 것.
• 서브페이지에 대한 스터디가 추가로 필요함. 좋은 서브 페이지는 진입하는 것이 얼마나 쉬운지, 요소가 어떤 것이 좋은지에 대한 디테일을 찾아도 좋다. 서브페이지 리스트업 해보는 것만으로도 공부가 많이 될 것이다. 어떤 페이지가 구조가 어땠다. 이런 것들을 가볍게 살펴보면 좋을 것 같다.

 

[+ 추가 스터디]

- 뉴스 사이트 클론해보기

- 서브페이지에 대해 구조 리스트업해보기