홈페이지를 들렀을때 가장 먼저 눈에 들어오는게 디자인입니다.
디자인으로 사람들을 끌어들일 수 있습니다. 신규 유저 유치에도 좋을거라고 생각합니다.
2. 디자인 컨셉
디자인 컨셉은 요즘 대세인 플랫형식 + 구글 롤리팝부터 적용된 머테리얼 디자인을 컨셉으로 잡았습니다.
3. 고 해상도 디스플레이의 보급
고 해상도 디스플레이가 보급되고 있는데 오유는 여전히 여러 해상도 지원을 하지못하고 있습니다.
해상도별 반응형으로 만들면 사용자들의 편의성이 증대된다고 생각합니다.
3. 메인 페이지 개선안
가. 오유는 게시판을 찾기 힘들다는 의견이 매우 많았습니다. 게시판을 현재방식보다 좌측 테이블로 뿌려주는게 더 낫다고 봤습니다.
나. 전반적으로 깔끔한 화이트톤으로 구성되었습니다.
다. 상단의 사파이어 색상은 머테리얼 지원 색상으로 원하는 색상을 지정할 수 있는 스킨 기능을 넣으면 좋을 것 같습니다. (5번 참조)
현재 적용된 색상은 Teal 500 (#009688) 입니다. (현재 개개인마다 자신의 글 배경을 커스텀할 수 있는 기능을 이것으로 옮겨도 될것같습니다)
라. 게시판 부분 말고 나머지 레이아웃은 거의 현재와 동일하게 유지하였고 폰트와 글씨 색깔이 변경되었습니다.
마. 좌측의 게시판 표시 Drawer는 三을 누르면 아래 사진처럼 아이콘만 보이는 형태로 변경되며, 스크롤을 따라다닙니다.
바. 좌측 게시판 표시 Drawer는 해상도가 낮을 경우 표시하지 않습니다. (三 아이콘을 누르면 옆으로 밀려나오도록 설계)
4. 글 페이지 개선안
가. 전반적으로 화이트톤 + 아이콘을 변경하였습니다.
나. 오른쪽 추천, 비공감, 뒷북 Div는 스크롤을 따라다니게 설계하였습니다. (해상도가 1024보다 낮을경우 현 오유 위치로 들어가도록 구현)
다. 추천 리스트는 5개 정도만 보여줘도 괜찮다고 봅니다.
라. 푸르딩딩의 색상도 머테리얼 Indigo(#3f51b5) Lightblue(#4285f4)를 사용하여 더 눈에띄게 변경하였습니다.
5. 상단바 색상변경
가. 위에서 언급했지만 Google Material Design > Style > Color http://www.google.com/design/spec/style/color.html#color-color-palette 에서 권장하는 색상으로 변경할 수 있습니다.
6. 결론
전반적으로 현 레이아웃과 거의 동일하면서 약간의 변경만 있게 만들어봤습니다.
css 조합과 font awesome 등의 폰트 아이콘의 이용으로 가벼우면서 더 깔끔한 디자인을 구현할 수 있다고 생각합니다.
빠르게 변해가는 웹 세상에서 오유가 오랫동안 현 디자인을 고수해왔고 이게 오유의 이미지가 되어버렸지만
이제는 변해야할 시기가 되었다고 생각합니다.
특히 타 사이트에서 이주해오는 사람들이 많은 이때, 디자인의 불편함 (90년대 스타일)에 대한 성토가 굉장히 많다고 봅니다.
현재 운영자님이 생각중인것들이 마무리 되면 디자인 관련해서 한번 생각을 해주시면 좋겠다는 생각을 하며 글을 마쳐봅니다.
글쓰기