TIL (Today I learned)
오늘 나는 무엇을 했나요
- 카타 ( 웹페이지 레퍼런스 분석)
- 개인 과제 (이커머스 앱 )
오늘은 어떤 것을 배웠나요
1. 카타 ( 웹페이지 레퍼런스 서치)
기존의 있는 브랜드들이나 그 브랜드들의 키워드를 많이 알고 있으면 컨셉 레퍼런스 찾을때 용이함
그 예로 픽셀바이 픽셀으로 시초가 마이크로소프트이며, 오늘 현대자동차를 튜터님과 분석을 하였는데,
현대자동차의 브랜드 소개페이지를 보면 알수 있듯이 그 컨셉을 알려주고있는데, 아래 사진을 보면 그 컨셉을 브랜드 사이트에 의도적으로 잘 녹여내는것을 알수 있다. 내가 그 브랜드의 컨셉,키워드를 알고있으면
그 브랜드들의 사이트가 왜 이렇게 만들었는지 생각을 할 수도 있다.
만약 아이콘을 사용할려는 단어나 문구가 사용자가 한번에 이해하기 너무 세세한 나눠져있는데 아이콘메타포로 크게
돋보이게 사용한다면 사용자는 그것을 한번에 이해하지 못하고 결국 아래 글씨를 보게된다.
하지만 이런 경우 아이콘을 작게 단조롭게 하고 내용을 잘 보일 수 있게하면 사용자에게 좋은 경험을 줄 수 있다.
그외
3.언어도 현지화를 해야 할때 문장이 이상한곳에서 스페이스바가 되지 않도록 해야한다.
4.효율적으로 읽을수있는 가로사이즈가 있으며 이러한 디자인은 사용자 관심이 증가하고 사용자가 제품 및 서비스에 대해 더 많이 배우도록 해준다.
2. 개인 과제 (이커머스 앱 )
개인과제 D-3
1.팀원과 공통목표 스크럼을 잡은다음 앱 레퍼런스를 찾았다 (쿠팡과 지그재그)
2. 그다음 사용자시나리오를 정하고 와이어프레임을 최대한 간단하게 그렸다.
3.디자인가이드(컬러,폰트) 와 아이콘 와이어프레임을 참고하여 컴포넌트도 제작하였다
( 컴포넌트는 제작 진행중)
컬러는 그레이계열을 포함하여 4개의 컬러를 정하였다. 또한 폰트는 프리텐다드로 정하였고, 헤딩,타이틀,본문 폰트를 따로 정하였다.
오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
오늘은 오버플로우, 마진값, 계층구조에 대해 문제를 겪었다
오버플로우는 먼저 컨텐츠가 아니라 프레임에 걸어야한다.
하지만 다음 사진과 같이 오버플로는 가로와 세로중 하나만 정할수 있다.
처음에는 Both로 하면 되는줄 알고 시도를 해보았지만 이상하게 작동하였다.
그래서 세로로 스크롤도 하면서 가로로 배너와 같은것을 넘기려면 어떻게 해야하는지 생각해보았다.
그건 가로로 넘기는 컨텐츠를 감싼 프레임에 오버플로를 적용해야 한다.
먼저 기본 틀 프레임 자체가 세로로 오버플로우를 했기 때문에 가로로는 원래는 안되지만
그안에 프레임을 하나 더넣어 그 자체를 오버플로우해야 하는 것이였다.
개인과제를 하면서 앱을 레퍼런스 하는데 각자 마진값이 다 제각각이다. 이러한 마진값을 정하는 방식이 딱히
정해진것은 없지만 그 앱이 무슨앱인지에 따라 마진값을 정한다. (ex 이커머스 ,sns 등 )이러한 마진값에 대해 각 앱의
레퍼런스를 살펴보고 앱의 성질에따라 마진값이 어떻게 되는지 확인하며 공부해야겠다.
계층구조중 폰트의 계층구조가 중요도에따라 눈에 잘 띄게 하는 방식인데 거기서 물건상세정보에서 내가 생각하는게
틀렸었다. 나는 제목과 설명중 눈에 잘띄게 계층을 더 높게 잡는것은 제목인줄 알았지만 쿠팡과 같이 가격을 중요시 하는 앱은 제목보다 가격을 계층구조가 높게 잡는걸 보고 계층구조는 무조건 제목이 더 높지는 않다는것을 알았다. 계층구조에 대해 더 공부해보고 앱 레퍼런스들을 찾아보고 생각해봐야겠다.
