02.'다시' 웹디자이너가 되려는 준비를 시작했다.
당신은 늦었습니다. 여기서 이야기는 시작한다.
- 1주라는 시간이 흘렀다.
2주째 그 첫날. 오늘도 과제에 대한 피드백을 받으러 갔다.
리뉴얼을 할 브랜드를 정하고 경쟁 사이트를 조사하고 와이어 프레임을 만들고. 이게 일주일 만에 가능한 건가? 하지만 나는 하고 있다. 어떻게 지났는지 모르게 시간은 흘렀다.
xd프로그램을 사용하고 있다. 이걸로 작업 중이다.
와이어 프레임을 만든 곳 옆에 비핸스에서 가져온 사이트들을 참고하여 만든 초안을 "샘"에게 보여주었다.
그리고 "샘"은 오케이 그럼 일단 포토샵으로 만들어 봅시다. 였다.
이제 포토샵을 이용해 초안을 잡아본다.
사이즈는 1920x8000 정도 주어서 xd에서 초안을 잡아놓은 것을 바탕으로 작업이 들어간다. 여기서 시간이 많이 걸리는 건 무엇일까? 역시나 이미지를 찾는 것이다.
사이즈가 커야 하면서 퀄리티가 높아야 한다. 보통 이런 것은 구글에서 많이 찾게 된다. 혹은 무료이미지 사이트에 가서 내가 원하는 이미지가 있는지도 찾아본다.
이미지를 찾는데 많은 시간이 소요된다. 웹디자인의 80~90%는 이미지 아닐까?
그리고 이미지를 찾게 되면 이제 배치를 하면서 다듬어가는 것이다.
포토샵으로 작업을 하고 "샘"에게 피드백을 받았다.
그중 나는 일러스트를 사용해 구름의 배경에 비행기를 넣어서 가져갔었다. 그리고 샘은 이건 없애는 게 좋겠다고 했다. 요즘은 2D보다는 3D가 대세라고. 3D를 넣지 않을 거라면 사용하지 않는 게 좋다고. 어설프게 하는 건 안 넣는 게 좋다고.
그리고 나는 한쪽 분량에 한 것들을 지웠다. 쓱삭~ 내 시간, 내 생각이 날아갔다.
수정을 반복하다 보니 내가 생각해던 고급스러운 느낌이 아닌 뭔가 아늑한 것에 심플함이 있는 사이트가 되어갔다. 이게 맞나? 내가 원했던 느낌이 아닌데? 나도 잘 모르겠다.
어찌어찌 만들어는 갔다.
- 타이포그래피에 대해서.
세리프와 산세리프의 차이. 아주 간단한데. 이걸 알고 있는가부터 타이포그래피는 시작한다.
세리프는 돌기가 달려있는 서체 ex) 명조체
산세리프는 돌기가 없는 서체 ex) 고딕체
그리고 세리프체 종류는 뭐고 산세리프체의 종류는 뭐고 등 기본적으로 알아야 할 것들이 있다고 "샘"은 말했다. 그리고 나는 이런 부분에 대해서 잘 알지 못했고 "샘"에게 기초가 부족하다는 소리를 들었다.
그리고 "샘"이 보내준 타이포그래피에 관련된 내용을 읽어오라고 하셨다.
여러 번 읽어야 할 것 같다. 모르는 게 많다.
그리고 "샘"은 책을 하나 추천해셨는데. 마법의 디자인이라는 책이었다. 집에 오자마자 중고책으로 구입을 했다.
책의 저자는 사카모토 신지라는 분이었는데. 책이름 그대로 디자인의 기본기에 대해 간편하게 설명을 해두었다. 생각보다 잘 정리해 놓은 책으로 디자인을 할 때 상식적으로 알면 좋은 것들이 많았다.
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=83674565
- Radius
레디우스는 앞으로 계속 듣게 되는 말인데. "샘"에게 피드백을 받으면서 일반적으로 레디우스는 잘 사용하지 않는다는 것이다.
그럼 레디우스는 무엇인가?
포토샵이나 일러스트를 하는 사람은 모두가 알고 있는 양쪽 모서리를 둥글게 해주는 것을 말한다. 가장 적게 들어가는 게 4px이라고.
이 레디우스가 많이 들어가 있는 사이트는 키즈의 느낌으로 아기자기함을 표현하는 사이트에 많이 사용된다.
그래서 일반적으로 기업에서는 잘 사용되지 않는다는 것이다.
- 심플해도 너무 심플한데.
사이트 리뉴얼에 대한 수정을 계속하다 보니깐 내가 생각한 데로 되는 것 같지 않았다. 뭐랄까. 너무 심플함이 느껴져서 현재 디자인한 부분들이 만족스럽지 못하게 되었다.
그리고 "샘"에게 좀 더 역동적으로 해야 하냐고 물었다. 샘은 내가 정한 사이트는 역동적인 거와는 거리가 멀다고. 좀 더 아늑하고 포근함이 들어간 사이트라고. 이걸 포인트로 잡아서 만들어야 한다고 했다.
그렇기는 한데 많이 부족해 보였다.
하지만 사이트가 간단해 보여도 하나하나 수정할 것들은 많았다.
- 시각디자이너와 웹디자이너의 차이
"샘"의 갑작스러운 설명이 시작되었다.
시각디자이너와 웹디자이너의 차이는 무엇인가?
달력을 예로 들으셨다. 달력에 별표를 넣는다고 하면 시각디자이너는 달력에 별표를 넣으면 되지만 웹디자이너가 사이트 한쪽에 별표를 넣으려고 하면 개발자한테서 연락이 오면서 메인에 넣었으면 다른 페이지도 넣는가? 아니면 메인에만 넣는가? 혹은 이것을 계속 유지하는가? 아니면 잠깐 하고 끝내는 것인가? 등등. 조정하는 게 한두 개가 아니라는 것이다.
그러면서 하시는 말이 웹디자이너는 사이트를 조정하고 컨트롤하는 존재라는 말을 하셨다. 뭔가 거창한 말을 하셨다.
포트폴리오를 만들면서 피드백을 받는다. 부족한 부분에 대한 지적을 해주면서 개인적으로 공부할 수 있는 부분을 얻을 수 있고. 작업에 대한 수정할 부분을 지적하고 더 좋은 퀄리티의 포트폴리오를 만들어 간다.
이러면서 나는 내가 지금까지 배우고 익혔던 부분에서 잘못된 부분을 잘 고쳐나가고 있는 걸까?라는 생각이 들었다.
- 반응형 사이트를 만드는 건 아닌데.
포트폴리오를 만드는 건 무엇일까? 디자인 작업을 하는 것이다. 디자인을 보여주는 것이다. 코딩을 해서 사이트를 구축하는 게 아닌 것이다.
리뉴얼 작업을 하면서 사이트에서 창에 마우스를 대면 한쪽에서 작은 창이 나오는 것을 생각하면서 포토샵으로 디자인 작업을 하게 되었다. 그리고 이것을 보고는 "샘"은 응 아니야. 창을 보여주는 거야.라고 하셨다.
물론 사이트를 구축하고 하는 것이면 좋겠지만 디자인 작업을 하는 거니깐. 디자인을 보여줘야 한다고. 나의 착각이다.
왜 이런 착각을 했을까? 웹디자이너의 포트폴리오는 디자인을 하는 것이다. 이건 인지하자. 이런 착각은 내가 예전에 그렇게 배워서 사이트 구축까지 하는 줄 알았다.
그리고 다른 피드백을 받았다.
배경색과 글자와의 대비를 충분히 주어서 작업을 해야 한다고. 그리고 폰트를 보시면서 행각과 자간의 기준에 대해서 말을 하셨다. 자간은 글자크기 x1.5를 꼭 해줘야 한고. 행간은 메인글일 때 -50을 주어 폰트의 간격이 넓어 보이지 않게 해야 한다고 하셨다.
헤더와 네비의 명확한 구분을 해줘야 한다고 하셨다. 그리고 하얀색으로 불투명을 하지 말라고. 이건 어디 사이트에 가도 없다고. 그런가?
사이트를 보면서 사람들이 인지하는 부분에 대해서 말하셨는데.
형태> 그림> 텍스트 순으로 생각하면 된다고 하셨다. 사람들은 텍스트를 읽는 것보다는 그림 혹은 일러스트를 보고 무언가 찾는다는 것을 알고 있어야 한다고.
계속 수정이 되어갔다. 그리고 계속 작업을 하면서 나의 디자인은 바뀌어 갔다.
- 위계
다시 피드백이 시작되었다.
이번엔 위계(강약을 준다)에 대해서 말을 해주셨는데.
다른 사이트를 보면 폰트별로 색상과 크기가 다르고. 두께감도. 다 다르다고. 같은 게 없다는 말이다.
강조하는 컬러와 그냥 지나가는 컬러가 다르다는 것.
위계에 대해서 잘 알아야 한다고 하셨다.
그러면서 G마켓 디자인을 알려주셨다.
G마켓 디자인은 기준을 잡아두어 잘 만들어진 곳이라고. 참고하기 좋다고.
그리고 아이콘을 사용할 때 구글 아이콘을 사용하면 좋다고.
https://fonts.google.com/icons
아이콘은 단순한 게 좋다고 하셨다. 복잡해서는 안된다고. 여기서 초안 작업할 때 아이콘을 많이 사용하게 되었다.
이리저리 피드백을 받고 수정은 다음시간까지 해오라고.
그렇게 나의 일주일은 지나갔다.
