한빛 스토리

만들면서 배우는 모던 웹사이트 디자인

야무(지훈) 지음

포토샵 패널은 어느정도 알지만, 전문적으로 사용하지는 못하는 분들이거나,

혹은 html 코딩을 하고 있지만, 협업을 위한 가이드를 제작해본 경험이 없는 디자이너분들은,

이 책을 읽고 나면 똑똑한 사수를 만난 것 같은 기분이 드실 것 같습니다.

9장의 내용 중 단 한 장의 내용만 알아도 뭔가, 전문가 같다는 느낌이 드실 만한 내용들이 담겨 있습니다.

각 장의 내용 중에서 도움이 많이 되었던 내용들을 중심으로 소개하고자 합니다.

[1장. 웹 디자인을 위한 준비]

저는 포토샵과 html을 주로 사용하는 웹 디자이너입니다.

집에서는 주로 탭북 z-160을 사용하는데,

얼마 전부터 스크래치 공간이 부족해서 저장이 안된다는 메시지가 생겼습니다.

스크래치가 뭔지 제가 어찌 알았겠어요. ㅠ.ㅠ

영문을 몰라, 불필요한 프로그램들만 정리를 했는데, 한참 디스크를 지워야 겨우 저장이 되더라구요.

(아까운 제 미드를 다 지워야했...다는)

무슨 이유 때문인지 몰랐는데, 스크래치 공간을 환경설정에서 다시 설정할 수 있었던 걸 이제야 알게 되었어요.

스크래치 디스크를 새로 설정하고, 불필요한 프리셋, 블러시 등을 삭제해서

이제는 포토샵 처음 설치했던 때처럼 쌩쌩~~ 자~~알 돌아갑니다.

​

[2장. 웹 타이포 그래피]

웹디자인에서 타이포 그래피가 얼마나 중요한 것인지는 아마 다들 아시리라 생각이 들어요.

이미지가 아무리 예뻐도, 어울리지 않는, 흐릿한 글씨 투성이라면,

사용자는 1초도 사이트에 머무르지 않을지도~!

가이드 문서는 웹 사이트 전체에서 동일한 폼을 유지하도록 하는 데 중요한 기준이 될 수 있습니다.

2장에서는 스타일 가이드 만드는 법이,

3장에서는 2장에서 만든 그리드를 쉽게 만들 수 있도록 플러그 인을 사용하는 법을 소개하고 있습니다.

[3장. 웹 그리드 시스템]

플러그 인이 생소한 분도 계시겠지만, 플로그인 사용은 폰트 설치처럼 간단합니다. 파일은 다운 받고, 더블 클릭만 하면 설치 완료.

책에서 소개된 guideguide.me 에서 그리드 파일을 받아서 설치해봤는데요, 신세계를 경험했습니다. ㅋㅋ

구도 잡기가 한결 쉬워지겠어요.

설치가 완료되면

문자 설정 채널처럼 가이드 채널이 생깁니다. 원하는 수치를 넣고 GG 버튼을 누르면 끝.

설정한 간격만큼 다큐먼틍 가이드 라인이 자동으로 생깁니다.

다만 한가지 함정은,

책에서 제시한 수치를 그대로 사용하시는 편이 여백의 수치를 소수점 없이 조정하기에 가장 간편하다는 것이죠.

(고로... 이전에 작업했던 사이즈는 width 값이 달라서 .... ㅎㅎ ;;

지금 하던 대로 할 수밖에 없을 것 같아요. ㅠ.ㅠ

진작에 알았으면 좋았을 걸, 다음 작업에는 꼭 적용해 보겠습니다. :) )

[4장. 차이를 줄이는 웹 컬러 매니지먼트]

또 한 가지 중요한 정보를 바로 캘리브레이션 사용법이 제시되어 있다는 것이었습니다.

모니터마다 기본 색상에 조금씩 차이가 있습니다.

하얀색에 노랑이나 파랑이 더 느껴지는 경우나, 화이트가 그레이처럼 느껴지는 경우 등

모니터 색상 차이를 한번씩은 느껴보셨을 거에요.

컬러 샘플링 같은 경우는, 쿨러도 있고, 사실 순간순간 어울리는 색상을 찾아서 쓰는 경우도 많은데요,

하지만 모니터 자체의 색상이 다르다면 아무리 샘플링을 잘 하고,

쿨러에 많은 샘플을 보관하고 있더라도 소용이 없겠죠.

캘리브레이션은 모니터의 색상은 실제와 비슷하도록 조정해주는 기구입니다.

저는 비싼 모니터를 쓰고 있지는 못해서(언젠간 꼭 애플 모니터를 마련하고 싶지만요.)

캘리브레이션을 꼭 사용해 보고 싶었어요.

정확한 사용법을 구글이나 지식인도 잘 가르쳐주지 않더라고요. ㅠ.ㅠ

(너무 어려운 설명으로 어지러울 뿐 ;;;)

좌절하고 캘리브레이션을 포기했었는데

이렇게 책에서 다뤄주니, 깜짝 선물을 만난 것처럼 기뻤습니다.

책에서 소개한 캘리브레이션 도구는 국내 사이트는 33~42만원 선에서 판매되더군요.

데탑, 왠만한 모니터의 가격을 생각하면 결코 싼 가격이 아니죠.

하지만 내 작업의 퀄리티가 올라간다는데, 충분히 투자의 가치는 있을 것 같습니다.

(아마존에서 주문하시면 180$ 선에서 구매하실 수 있습니다. ^^)

하반기에는 캘리브레이션을 하나 구매해야겠어요. ^^

[5장. 업무 생선성을 높이는 이미지 슬라이싱]

그동안 슬라이싱 선을 하나하나 그렸던 것이 얼마나 ㅠ.ㅠ 불필요한 일이었던 것인지!!

가이드 라인을 슬라이싱 선으로 쓸 수 있는 걸, 혹시 아셨나요? (저만 몰랐을 수도... ㅠ.ㅠ)

또 슬라이싱 선을 병합할 수도 있고요,

그리고, 그룹별로 웹용 파일 저장을 자동으로 해주는 plug-in도 있더군요.

이건 정말 작업시간을 1/3은 줄여줄 수 있는 소중한 기능인 것 같습니다.

또 그룹명에 파일로 사용할 레이블을 적어두면, 슬라이싱 할 때마다 파일명을 고칠 필요도 없어집니다.

아쉽게도 cs4 이상 사용자에게만 가능한 플러그인이지만, cs4 이상 사용자가 아니라면 액션을 등록해서 사용해도 간단히 슬라이싱 하실 수 있으니,

슬라이싱에 드는 작업시간을 줄이고 싶으셨던 분들은 꼭~~ 꼬~~~~~옥 읽어 보시기를 추천합니다

[6~7장. 웹 프로토타이핑, 프로토타이핑을 기반으로 한 웹 그래픽 디자인]

프로토타이핑이란 용어가 낯설었는데요,

html 시안을 간단히 만들어 보는 것 정도로 생각할 수 있을 듯 하네요.

이미지 디자인을 완성하고, html 로 컨펌을 받자면 시간이 많이 걸리죠.

그럴 때 moqups를 사용하면메인 페이지와 서브 페이지의 프레임을 짧은 시간에 만들어 보여줄 수 있는 장점이 있습니다.

그런데, 이 경우는 전체적인 웹 사이트 구도가 머리에 잡혀 있고 최소 2~3명의 서브 디자이너가 있는 경력있는 웹 디자이너에게 유용할 것 같네요.

저같은 신입의 경우에는 디자인을 하면서 홈페이지 목적에 맞게 변경하는 경우가 많아서 프로토 타이핑을 만드는 것이 오히려 더 작업시간을 더 길게 만들 수도 있다는 생각입니다.

그러나 프리랜서로의 전향을 꿈꾸고 있는 디자이너라면 moqups로 간단히 고객 컨펌을 얻을 프로토타이핑을 마칠 수 있으니 많은 도움이 되실 수 있으리라 생각이 듭니다.

[8장. 반응형 웹 디자인]

반응형 웹 RWD, 요즘 많이 듣게 되는 용어이시죠?

PC, 태블릿, 모바일 각각의 플랫폼 width값에 맞춰 일정 수준 이하의 크기로 떨어질 때 그에 맞춘 웹을 보여주는 것이 바로 RWD입니다.

요즘은 삼성그룹의 홈페이지가 RWD로는 가장 샘플링 해볼 만 하지 않나 싶습니다~

(rwd를 처음 들어보시는 분은 삼성그룹 홈을 여시고, 브라우저 창의 사이즈를 늘렸다 줄였다 반복해 보세요~~)

저는 아직 한번도 RWD를 제작해 보지는 않았지만 올해 안에 꼭 배워보고 싶은 기술 중에 하나였죠.

디자인 하는 법은 이제 배웠으니, 코딩을 배우면 되겠어요. ^^

짧게 8장을 요약하자면 '실 사이즈', 1000px, 760px, 480px, 320px 총 5개의 이미지를 제작하는 것이

반응형 웹사이트를 디자인하는 방법이라는 것입니다.

디자인 페이지가 총 100페이지 짜리 볼륨이라면 총 500장의 페이지가 ;;;

이 어머어마한 작업을 어떻게 하면 빠르게 할 수 있을지가 바로 8장의 내용이랍니다.

야근없이 반응형 웹을 제작하시려면 꼭 보셔야겠죠? ^^:

[9장. 차세대 웹 벡터 그래픽 시대 개막]

포토샵 작업물을 그대로 벡터 파일로 만들고 싶다는 생각을 해보신 분들이 있으실 거 같아요.

9장에서는 포토샵의 패스 작업을 그대로 AI에서도 할 수 있도록 해주는 방법이 소개 되어 있습니다.

벡터이미지, 웹타이포 그래피까지 조절이 되면

어떤 모니터에서도 선명하게 잘 보이는 작업 결과물을 확인하실 수 있겠네요.

프로페셔널 웹디자이너를 향해서~~ 즐거운 독서 되시길~!