스파르타 코딩클럽 제작일지 (6주차)
1. 기본 레이아웃
index.html의 틀이 어느정도 잡혀가고 있다.
처음에 생각했던 레이아웃이 좀 밋밋하고 너무 기능이 없는 것 같아서 롤링배너를 부트스트랩에서 베껴왔다.
부트스트랩은 정말 짱인 것 같다.
요즘 흔한 느낌의 상단바에 메뉴를 고정해놓고 하단에 롤링배너를 입혀보았다.
사실 디자인할 때 가장 고민되는게 설명하는 문구를 어떻게 적을까 하는 것이다. 마케터들이 포인트를 정해주는게 기본적인 룰이지만 마케터가 없으면 디자이너가 그걸 안고 가야한다. 대충 이쁘게 만들어오라고 위에서 일감을 주지만 이게 뭔지 정확히 설명도 안해주면서 본인이 원했던 느낌의 문구가 없으면 일단 디자이너를 까고 본다.
"이런 느낌을 주는 문구가 있어야 해. 센스가 없구만. 말을 안해도 딱 보고 찰떡같이 알아듣고 결과가 나와야지."
그런 기분 나쁜 말들을 들어왔던 덕분에 나는 아무 의미 없고 당연한 말을 있어보이게 늘어뜨리는 재주가 생겼다. 아마 대부분의 디자이너들이 그러할 것이라고 믿는다.
이걸 좋다고 해야하나 쓰잘데기 없는 재주라고 해야하나.
약간의 하소연을 하며 글이 삼천포로 빠지고 있다.
2. Card Columns
카드도 부트스트랩에서 틀만 가져왔다.
사실 처음에는 일일이 손으로 css로 만져볼까 했는데 그나마 어느정도 틀이 잡혀있는 뼈대를 가져와서 손을 보는게 낫다고 생각했다.
열심히 구글링을 하고 선생님께 여쭤도 보고 '이렇게 해보면 되지 않을까'하는 마음을 열심히 모아서 시도하다보니 생각보다 어려운 과정은 아니었던듯 싶다.
가장 어려웠던 부분은 하단의 긴 설명을 원하는 길이만큼 조절하는 법!
이렇게도 해보고 저렇게도 해보고 제일 많은 시도를 했던 부분이다. 결국에 구글링을 통하여 찾게되었지만 정말 코딩의 세계는 너무나도 복잡한 것임을 다시금 느낀다.
3. Font
디자인 업무를 하는 입장에서 폰트(서체)는 생명이나 마찬가지이다. 작업물의 컨셉을 가장 1차원적으로 느끼게해주는 존재랄까.
네이버에서 나눔폰트를 뿌릴때까지만 해도 상업용으로 사용가능한 폰트는 생각보다 많은 편은 아니었다. 암암리에 불법적으로 사용하는 경우도 많았고 폰트업체에서도 일일이 대조하기 어렵기에 유야무야 넘어가는 경우가 많았다.
요즘은 한글날에 폰트업체들에서 유료폰트를 무료로 배포하기도 하고 상업용 무료폰트들의 퀄리티가 굉장히 좋아지고 있기에 굳이 버튼이나 배너등을 이미지화 하지 않고 원하는 서체를 사용하여 바로 css로 작업할 수 있다는게 좋다.
개인적으로 뽑는 최고의 폰트는 산돌에서 출시하는 '격동고딕'이다.
유료폰트이고 산돌의 시스템 상 특정 프로그램이 켜져있을때만 사용이 가능했기에 아쉬움이 있었지만 얼추 비슷한 느낌을 주는 Gmarket Sans가 무료로 출시되었다. 한글 뿐만 아니라 영어를 적어도 아주 느낌이 좋다.
(영어를 적었을 때는 약간 Keep Calm 폰트를 좌우로 약간 늘린 느낌이랄까)
고민할 것도 없이 이 폰트를 메인으로, 구글 폰트인 Noto Sans를 서브로 사용하기로 결정하였다.
4. 상세 페이지 레이아웃
이제 그 다음으로 하려고 마음먹은 일은 클릭시 넘어가는 상세페이지 레이아웃의 틀을 잡아놓는 것이다. 이것까지만 하면 내가 만들 웹페이지의 모든 레이아웃이 완성되며 그 뒤에는 정말 말 그대로 자료를 모아서 DB화하여 연결하면 되기 때문이다.
과연 나는 기한내에 마무리할 수 있을 것인가.
기본적인 틀은 '스페이스클라우드(spacecloud.kr)'의 틀을 참고하려고 한다. 깔끔하면서도 요악을 잘 해놓은 페이지라고 생각한다. 이전의 보라색을 메인컬러로 한 버전을 더 좋아했지만 지금도 깔끔하니 아주 좋다.
생각보다 많은 자료가 들어가지 않을 것이기 때문에 적은 내용으로 넓은 공간을 이쁘게 커버할 방법을 연구해보아야 할 것이다. 남는 공간을 채우게되면 그만큼 수집할 자료들이 방대해지기 때문에 연구를 포기할 경우에는 다른 레이아웃으로 선회할 수도 있을 것이다.
글을 마치며.
이제 프로젝트 마무리까지 2주밖에 남지 않았다.
평일에는 늘 녹초가 되어 집에 와서 아무것도 하고싶지 않지만
시간 날 때마다 부딛혀보기로 마음을 먹어본다.
시작이 너무 거창할 필요는 없다고 스스로 위안을 삼으며.
