design | 웹사이트 레이아웃을 위한 20가지

1. 스케치부터 시작 

가장 기초적이고 뻔한 말이지만 실제로 디자인을 시작할때 포토샵부터 열고보는 디자이너가 많습니다. 디자인이란게 문제풀이 같은건데요... 실제로 디자인을 하면서 부딪힐 수 있는 문제들에 대한 해답이 그림자나 그라데이션이 아닌 좋은 레이아웃이나 명확한 단계에 대한 생각으로 풀어낼 수 있습니다. 포토샵을 열기 전에 컨텐츠를 먼저 생각하고, 레이아웃이나 기능적인 부분부터 고려해야합니다.

2. 최상위 단계부터 그려봅니다(Wire Framing)

프로젝트 의뢰가 들어오면 가장 먼저 여러가지 디자인적인 문제를 풀어볼 수 있는 최상위레벨의 프레임웍 스케치 작업부터 시작합니다. 이 프레임웍은 컨텐츠를 아우르는 UI요소로 여러가지 액선이나 네비게이션 디자인을 하는데 큰 도움이 됩니다. 이러한 관점을 가지고 디자인을 시작하면 프로젝트 사이트에 대한 이해를 명확히 할 수 있고 무엇이 필요할지 알기 쉽지요.

3. PSD파일에 그리드 시스템을

말 그대로 포토샵으로 실제 디자인을 시작할 때, 적합한 그리드작업부터 시작하는 것을 말합니다. 그리드작업 없이는 보기좋은 디자인이 나올 수 없습니다. 그리드는 웹페이지 레이아웃을 구조적으로 잘 디자인할 수 있도록 도와주는데, 여백이나 간격들을 포함한 여러가지 디자인적 이슈나, 반응형 웹디자인을 하는데 큰 도움이 됩니다.

4. 폰트를 정합니다

어떠한 폰트를 쓸지 어떤 색상으로 할지는 당연한 수순입니다. 한가지 폰트만 사용할지 여러가지를 사용할지는 물론 디자이너에게 달린 일이지만, 일반적으로 하나의 웹사이트에서 세가지 이상의 폰트 사용은 자제하는 것이 좋습니다. 먼저 전체적으로 많은양의 텍스트에 적용하거나 타이틀에 적용한 폰트부터 고려하면서 폰트를 찾아야겠습니다.

5. 테마 컬러를 정합니다

폰트를 고르는 작업과 동시에 전체적인 UI나 백그라운드, 텍스트등에 사용할 색상에 대한 고려를 해야합니다. 폰트를 정할때는 제한적인 범위 내에서의 색상이나 톤을 정하는 것이 좋은데요... 웹페이지의 기능적 요소들을 고려해서 전체적인 UI에 컬러를 사용하는 것이 좋습니다. 예를들어 Facebook이나 Twitter, Vimeo같이 말이지요. 그리고 기능요소에 영향을 미치지 않는다는 전제 안에서, 일러스트레이션이나 기타 그래픽이미지 요소에서는 컬러에 대한 지나친 제약은 하지 않는 것이 좋습니다.

6. 레이아웃 쪼개보기 (화면분할)   

웹페이지의 각 섹션(영역)은 저마다의 스토리를 가져야합니다. 그리고 사용자를 위해서 컨텐츠에 대한 목적을 명확히 전달해야하지요. 이런부분에서 레이아웃의 역할은 큽니다. 웹페이지가 말하고자하는 것들 중 어떤 것이 가장 중요하고 하이라이트 되어야하는지에 대한 것을 레이아웃을 통해 사용자에게 전달할 수 있기 때문입니다. 실제로 웹사이트의 의도처럼 사용자가 컨텐츠를 올바르게 소비할 수 있도록 하려면, 한 페이지 안에서 너무많은 것들이 산재해있으면 안됩니다.

가장 먼저 단순명료하고 분명한 목적/의도를 가지고 심플한 구성부터 시작해보세요. 그리고 꼭 필요한 것들을 추가해봅니다. 아마도 심플함을 유지하는게 얼마나 힘든지 느끼게 될겁니다.

7. 익숙한 것도 다시보기

디자이너는 사용자가 웹페이지를 브라우징하는 방식을 생각하면서 디자인을 합니다. 기능상의 단계(예를들어, 네비게이션 사용)같은 것들이라던지 말이지요. 이런 것들은 사이트가 얼마나 효율적으로 디자인 되었는가와 연관됩니다. 일반적인 디자인 패턴이라던지 기존의 사용자에게 익숙한 요소들은 때로는 '일반적'이고 '통상적'이기 때문에 사용자의 관심을 끌지 못하고 묻히는 경우도 있습니다. 그렇기 때문에 기존의 것들에 대해서 다시 한 번 생각해보며 발전시키는 것도 중요한 부분입니다.

8. 도전정신(?)

흔히 많이들 외치는 '혁신'이라는 것은 프로젝트에 필요하거나 클라이언트가 요구하는 것에서 생겨나는 것이 아닙니다. 오히려 디자이너가 생각하는 인터랙션이나 디자인적 요소들에서 나오는거지요. 새로운 그리드 시스템을 시도해본다거나, 색다른 컴포넌트 디자인이라던지, 아니면 작은 부분이지만 단순한 컬러의 사용에서도 '혁신적'일 수 있습니다. 그렇기 때문에 '혁신'은 무엇이든 시도해보는 디자이너의 '도전'에서부터 시작되지 않을까요?

9. 디테일하게

디자인적인 디테일은 최근까지는 남용되었다라고해도 과언이 아니었습니다. 물론 최종단계에서 사라지는 경우도 많습니다. 프로젝트의 컨셉에 따라서 디자인적 '쿨'함이란건 다른쪽에서 튀어나올 수 있습니다. 작은 인터랙션일 수도 있고, 예상치 못한 색다른 애니매이션이라던지... 아니면 있는듯 없는듯한 버튼의 그라데이션 등등... 이러한 것들은 작지만 필요하고, 디자이너로서 당연시 해야할 부분이기도 합니다.

10. 구석구석 이쁘게!

웹디자인에서 모든 컴포넌트들은 '예쁘게' 디자인 되어야합니다. 빈 스크린안에 버튼 하나만 띄워져있어도 멋져 보일 수 있어야합니다. 이러한 생각을 하면서 디자인을 해야하는 이유는, 때때로 디자이너들이 해야하는 일임에도 불구하고 여러가지 사정으로 넘겨버리는 경우가 심심찮게 발생하기 때문이지요. 프로젝트가 끝날 때까지 최선을 다해서 쿨하게 디자인 해야하겠습니다.

11. 깔끔하게    

깔끔하고 컨셉에 맞는 디자인을 하기 위해서 피해야할 것들이 있습니다. 적합하지 않은 그라데이션이나, 선명하지 않은 엣지부분이라던지... 폰트 렌더링 옵션(폰트에 따라 특정 크기에서 렌더링 모드에 따라 더 좋게 보일 수 있지요) 등등등... 이외에도 끝도 없이 많은 것들이 있을겁니다. 항상 디자인 전체를 보고 이상하거나 어색한 부분을 본 후에 디자인 요소요소를 개별적으로 주의깊게 봐야겠습니다.

12. PSD파일 정리

포토샵으로 작업할때 정말 중요한 부분인데요. 항상 레이어나 기타 부분들을 정리해야한다는 것입니다. 프로젝트의 규모나 참여하는 디자이너의 수에 관계없이 항상 파일은 깔끔하게 정리되어야합니다. 그래야만 영역별로 재사용시 혹은 엑스포트시에 편리하고, 전체적인 디자인 프로세스를 빨리할 수 있으며, 다른 디자이너들과 파일 공유시 함께 작업하기 수월하기 때문이지요.

13. 최상/최악의 시나리오

디자이너로서 특히 웹디자인같은 경우에는 컨셉작업이나 기술적인 요소부터 컨텐츠에 관련된 이슈까지 생기는 여러가지 제약사항을 해결하는 것이 가장 중요한 부분입니다. 항상 최상/최악의 시나리오에 대해 대비해야하는데요. 예를들어, 아주 작은 스크린 사이즈에 맞춘 웹사이트는 일반적으로 가장 많이 사용하는 디바이스에서는 온전해보이지 않을것입니다.

최상의 시나리오를 생각해보세요. 가장 많은 사람들이 사용하는 가장 일반적인 스크린. 그것에 맞춘 디자인을 시작하고, 그에 따라 가장 적절히 보일 수 있는 양의 컨텐츠도 구성합니다. 그 이후에 최악의 시나리오에 대응할 수 있도록 디자인을 마무리해야 최대한 많은 사용자를 아우를 수 있는 디자인이 나올 수 있겠지요.

14. 스스로 실증이 날때까지!

디자인에대한 열정이 강하신 분들은 이미 하고 계실지도 모르겠습니다만... 스스로 생각하기에 멋드러진 레이아웃 디자인을 했다면, 스크린샷을 찍고, 여러가지 디바이스에서 확인해서 바탕화면으로도 사용하고, 너무좋으면 프린트해서 벽에 붙여두기도 합니다. 이런 행위(?)들을 하면서 자신의 디자인에서 어느점이 잘못되었는지를 느끼고 수정을 하게 되지요. 이전 버전이 아니다싶은 순간이 온다면, 그만큼 현재의 디자인에 완성도가 있다는 말일겁니다. 또한 이런 것들은 디자이너가 자신의 실수에서 무언가 배우게 되며 또 한단계 성장한다는 말이기도 하지요.

15. 초기 컨셉 디자인에 너무 많은 시간을 소요하지 마세요 

컨셉 디자인의 Look & Feel을 제안할 때는 클라이언트와 최대한 빨리 미팅을 가져야합니다. 만약에 초기 컨셉에 대해서 클라이언트가 만족한다면, 한숨 돌리고 여유롭게 디자인을 진행하면 되겠지만, 반대로 클라이언트의 마음에 들지 않는다면 그에대한 충분한 피드백을 받아 조금 더 적절한 디자인을 가지고 다음 미팅을 진행해야하기 때문에 처음 클라이언트에게 컨셉을 전달하는데 있어서 지나치게 많은 시간을 쏟을 필요는 없습니다

16. 개발자와 친하게 지냅시다     

개발자도 창의적인 그룹입니다. 그리고 디자이너가 자신의 일에 자부심을 갖듯 개발자들도 똑같지요. 하지만 어떠한 프로젝트가 시작할 시점에 항상 개발그룹이 함께하지는 않습니다. 컨셉이 다 정해지고 난 후, 개발자들의 창의성은 신경도 안쓰면서 투입되기가 일쑤입니다. 이런 프로젝트는 틀린 것입니다. 왜냐하면 때때로 정말 쿨한 아이디어는 개발팀에서 나오기도 하기 때문이지요. 프로젝트가 시작되서 팀을 이룰 때 개발자도 시작점부터 함께해야합니다. 컨셉에 대한 의견을 함께 나누고 동거동락하다면... 더 좋은 아이디어도 쉽게 나오고 프로젝트 수행도 훨씬 더 수월하겠지요.

17. 프리젠테이션의 중요성 (상대가 어린아이라고 생각하고 설명하기)

멋진 작업물을 만들어내는 것만큼이나 프리젠테이션도 중요합니다. 프리젠테이션을 제대로 못한다면 제아무리 좋은 디자인도 버려질 수 있지요. 항상 첫눈에 남들도 나와 같은 '확신'을 갖을거라고 생각하지마세요.

18. 한가지 아이디어에만 얽매이지 마세요

내 아이디어를 밀어붙일 때와 같은 팀이나 클라이언트가 왜 갸우뚱 거리는지 알게되는 때는 종이한장 차이입니다. 디자이너로서 자신의 작업물에 대한 확신을 갖는 것은 중요하지만, 동시에 같은 아이디어를 또다른 관점에서 바라보는 오픈된 생각을 가져야합니다. 정답이 꼭 한가지만 있는 것은 아니니까요.

19. 체크체크!

에이전시에 다니는 디자이너는 보통 하나의 프로젝트 디자인이 개발파트로 넘겨지고 나면 또다른 프로젝트 디자인을 시작하게됩니다. 일반적으로 그렇지만 사실 프로젝트는 PSD 원본이나 스타일 가이드를 넘겼다고 끝나는게 아닙니다. 정말 자신의 디자인에 대해서 애착이 있다면 디자인과 인터랙션에 대한 아이디어가 제대로 표현되고있는지 개발파트를 포함한 팀원들과 끊임없이 체크하고 그들이 디자인의 컨셉을 제대로 이해하도록 도와줘야하지요.

20. 디자인의 진행/발전을 볼 수 있는 자료 만들기 

디자이너들은 단순히 최종 결과물만 보고싶지 않아합니다. 디자인이 진행되면서 어떻게 발전되었는지도 알고싶어하지요. 가끔씩은 정말 멋지고 쿨한 디자인이 여러가지 이유로 사장되는 경우도 있습니다. 프로젝트가 장료되고나서 가능하다면 디자인이 진행되었던 것들을 볼 수 있는 것들을 가지고 케이스 스터디를 만들어 다른 사람들과 공유하면서 더 좋은 아이디어나 피드백을 받아 스스로를 발전시킬 수 있을겁니다.

(원본:http://www.creativebloq.com/web-design/steps-perfect-website-layout-812625)