[UI/UX] 오늘의집 모작해보기

오늘의 모작: 오늘의집

 

[ 레이아웃 그리드 ]
Count: 4
Type: Stretch
Width: Auto
Margin: 18 (양 옆으로 18px씩 여백)
Gutter:20 (Gutter은 column사이 간격을 말함)

위처럼 레이아웃 그리드를 설정하면 아래 사진(왼쪽)과 같이 그리드가 적용된다.

---

왼쪽은 그리드가 있는 version, 오른쪽은 없는 version

[ 오늘의집 모작을 통해 알게 된 점 ]
- 검색창: Round 10

- 배너 광고: Round 10, 높이는 116 정도

- 영역 구분: 선이나 박스? 영역?으로 구분함.

  근데 구분선을 보면

  맨 위 구분선은 1px로 옅은 회색
  가운데 구분 영역 16px로 아주 옅은 회색
  내비게이션 바로 위에 구분선은 0.4px로 진한 회색이다.

  진한 정도로 따지자면
  맨 아래 내비게이션 구분선> 맨 위 구분선> 가운데 구분 영역

  두께로 보자면
  가운데 구분 영역 >>> 맨 위 구분선> 맨 아래 내비게이션 구분선

 

  이렇게 된다. 왜 각각 두께랑 짙은 정도가 다를까... 고민해봤는데

  혼자서 유추해 본 결론은.. 영역 구분 두께가 두꺼울 수록 색은 옅고, 두께가 얇을수록 색은 진해진다..? 는 것이다.

  사실 잘 모르겠다ㅎㅎ

- 작고 여러 개인 카테고리: 정사각형, 57px, Round 20, 카테고리 간격은 40 정도(가로 세로 간격 같음)

- 갤러리 형태 사각형: Round 10, 크기는 186 정도
- 아이콘: 거의 26*26px 안에 들어가는 사이즈
- 내비게이션 바: 아이콘만 있는 게 아니라 아래쪽에 글(홈, 스토어..)도 같이 있음, 폰트 크기는 12pt

 

[ 느낀 점 ]
포인트 컬러로 비비드한 컬러를 사용해서 확실히 눈에 잘 띈다!

비비드한데, 눈 아플 정도는 아니라 좋은 것 같다. 메인 컬러를 예쁘게 잘 뽑았다는 생각이 들었다.

 

그리고 컴퓨터나 타블렛과 달리 스마트폰은 화면이 작아서
Round값으로 30을 주면 너무 동그래지는 문제가 발생한다. (그냥 원이 되어버린다...)
스마트폰 기준으로 둥그런 사각형을 만들고 싶다면 Round 값으로 10 or 20을 써야 할 것 같다.

---

이렇게 오늘의집 모작 끝 !