UI/UX디자인 독학을 위한 웹디자인 해부하기
포토샵을 활용해 웹디자인 모작하기
*본 글은 웹디자인 관련 네이버 카페 '디자인 긱스'와 개인 블로그에 올렸던 글이며 포토샵 CC를 사용한 예제입니다.
오늘은 초심자 기준 개인작, 그러니까 개인 포폴을 준비하며 따로 공부하는 방법을 적어보려 합니다. 늘 말씀드리지만 저는 어느 기업 구석에서 일하고 있는 그저 오래된 잡디일 뿐입니다. 제가 일러드리는 방법이 최선 그리고 정도(正道)가 아니오니 한 번쯤 시도해보시고 자신과 맞으면 사용하시기를 간곡히 바랍니다.
오늘은 글 무섭게(싸가지없게) 썼습니다. 누군가 상처 많이 받을 수 도 있습니다. 허나 의도를 이해해주셨으면 합니다. 특히나 독학/학원 수료생 여러분들. 어찌 보면 여러분들이 인터넷 커뮤니티에 올리는 갖가지 질문 등이 2~4년 동안 열심히 전공한 자들에게 상대적인 위화감이나 박탈감을 줄 수 있습니다. 취업엔 가끔 운이라는 것도 존재하니까요. 요지는 전공하시는 분들만큼의 노력을 하고 그들과 견줄 준비를 해야 한다는 겁니다. 전공자분들 또한 이미 알고 있더라도 잊고 지내셨다면 여러분들이 몇 년간 해오던 습관들. 다시 한번 상기시켜 드리니 이참에 다시 한번 개인 스터디를 시작하셨으면 합니다.
가끔, 아주 가끔은 제가 보기에도 '학원 몇 달 다니고 이 정도로 디자이너를 하겠다는 건 너무 욕심이 아닌가'하는 분들이 계시거든요. 꺾으려는 게 아니라 동기부여를 하고 싶은 겁니다. 낙오하지 않길 바라는 겁니다.
초심자/신입 여러분은 아직 디자이너가 아닙니다.
지난번에도 언급했다시피 학교와 학원은 최소한, 그러니까 디자인에 필요한 아주 기초만 커리큘럼에 포함해 여러분께 학습시켰을 뿐 수료 또는 졸업 후 입사를 했다 치더라도 여러분은 아직 디자이너가 아닙니다. 상처 받아도 어쩔 수 없습니다.
자세를 낮춰 지금의 잘못된 학습/수련 방법을 버리고 밑바닥부터 다시 시작해야 합니다. 그간의 신입 그리고 지망생분들의 포트폴리오를 살펴보면 기본에 부합하지 않은(퍼블리싱이나 디바이스에 이해도 없이 진행한) 작업물이 대다수였습니다.
이러한 포트폴리오를 준비하는 분들의 대부분이 '나는 이제 디자이너니 창작을 한다'라는 마인드를 갖고 있습니다. 대답은 '틀렸어'입니다. 과거 건 지금이건 특정 아이덴티티를 녹여 메인 시안을 올리는 경지에 이르는 건 적어도 3년 차 이후나 가능합니다.
물론 그전에도 가능하지요. 허나 이들 대부분이 자신이 뭘하는지 조차 모른 체 베끼기에 급급한 수준입니다. 큰 수정이나 구조를 중간에 바꿔버리면 대응하지 못합니다. 자신의 머릿속에서 나온 게 아니거든요. 이게 정말 무섭습니다. 게다가 결과물은 적당히 나오고 그것에 대한 디테일한 피드백 없이 일정에 쫓겨 다음 프로젝트로 넘어가니 나의 문제점을 인지할 기회 조차 잃습니다.
저 또한 그러했습니다. 제가 잘하는 줄 착각했습니다. 꽤 오랫동안 우물 안 개구리처럼 지냈습니다. 그리고 난 후 한동안 레퍼런스(모방 재료)가 없으면 좋은 시안을 잡지 못하는 기간도 경험했습니다. 저는 그저 카피캣이었던 거죠.
3년 차 미만이라면 마음을 고쳐먹으세요. 뭔가를 순수 창작하기 전에 나 자신은 준비가 잘 되어있는지 확인해 볼 필요가 있습니다. 혹 이미 메인을 술술 뽑아내는 경지에 이르렀어도 우리는 이런 공부를 지속적으로 해야 합니다.
그럼 어떤 준비가 되어있어야 할까요?
모작은 가장 쉽고 빠른 공부 방법입니다모작이라는 게 있습니다. 미술학도를 예를 들면 석고상을 앞에 놓고 미친 듯이 그립니다. 크로키도 하고 남의 작품을 똑같이 복사하는 과정을 수 없이 되풀이합니다. 눈으로 들어온 정보가 머리를 거쳐 손을 통해 원하는 만큼, 표현할 수 있는 수준에 이를 때까지 자신을 단련합니다. 이 과정의 끝나야 본인을 위한 붓을 들지요. 이러한 일련의 과정들은 음악, 무용, 사진, 요리 등 여러 분야에서 동일하게 적용됩니다. 특히나 예술 쪽 관련 분야에서 엄청난 위력을 발휘합니다.
대다수의 학원 수료생들이 이 과정을 무시합니다. 방법을 알지 못해 행하지 못합니다.
마치 이제 겨우 매스 잡는 법을 안 의학도가 실제 집도를 하려는 듯, 양파 까는 법을 알려줬더니 자신만의 음식을 만들려는 등의 시도를 합니다. 모작 등의 노력 없이, 그리고 기본기 없이 뭔가를 창작하려 한다면 안타깝게도 당신은 그저 '이상한 것을 만드는 사람'에 머물게 됩니다. 이러한 상황에서 자신의 상태를 인지하지 못하고 백날 포폴을 넣으니 안될 수밖에요. 심지어 구인자는 여러분에 포폴에 대한 정확한 피드백을 주지도 않습니다. 왜 떨어진 건지, 내 포폴을 확인이나 한 건지... 알 수 없지요.
아래부터 웹디자인을 모작하는 방법을 서술합니다. 다른 실무자분들 제가 언급한 것 이외 다른 방법이나 좋은 팁이 있으면 공유를 부탁드립니다.
작업 전 체크사항!!
윈도우 기준 포토샵에서 Ctrl+R을 누르면 화면에 줄자(Ruler)가 나타납니다. 줄 자위에 오른쪽 클릭으로 단위가 PX인지 확인하세요.
가끔 단축키를 누르다 Ctrl+Y를 누르는 실수를 자주 범합니다. CMYK모드가 켜져 있다면 꺼주세요.
서체 그러니까 Character부분의 단위가 PX인지 확인하세요. PT로 놓고 작업하는 사람 수 없이 봤습니다.
새로운 도큐먼트를 열 때 Resolution 72 / Color Mode RGB 인지 꼭 확인하세요.
위 4가지는 기본 중에 기본입니다. 절대 잊지 마세요. 나도 모르게 체크할 만큼 습관이 되어야 합니다.
초심자를 위한 디자인 해부하기
먼저 모작할 웹/앱 등 서비스를 찾아서 통째로 캡처합니다. 자신의 모니터 해상도가 1920px이라면 그와 똑같이 보이게 캡처하세요. 보이는 영역만 캡처하는 게 아닙니다. 스크롤하면서 시작부터 끝까지 몽땅 캡처해서 이어 붙이세요. 앱이라면 해상도나 배수의 개념을 어느 정도 이해하고 진행합니다.
아래 예제는 SK브로드밴드를 캡처한 이미지입니다. (URL : http://www.skbroadband.com/)
*이미지는 모두 원본 사이즈로 업로드했습니다. 잘 안보이시면 클릭하셔서 원본보기 해주세요.
자 이제 우리는 이 캡처된 이미지 위에 사진을 제외한 모든 요소를 똑같이 만들 겁니다.
각각의 레이아웃, 폰트 사이즈, 요소 간 간격, 컬러, 아이콘 등을 똑같이 제작합니다. 단 이미지를 편집하는 과정이 제외된 시안을 만들 겁니다. 미디엄 또는 하이 피델리티 와이어프레임 수준까지 끌어올릴 겁니다. 해당 용어에 대한 설명은 아래 링크를 참고하세요.
일단 그리드 시스템부터 찾아냅니다.
메뉴 상단에 View > New Guide Layout을 클릭하면 오른쪽과 같은 창이 뜹니다. 해당 수치들을 조정해가며 어떠한 그리드 시스템을 사용하는지 찾아야 합니다. 요소들을 일정하게 배분한 부분에서 힌트를 얻으세요. 숙련된 디자이너는 거터 값 하나만 가지고도 사용된 그리드 시스템을 찾아냅니다.
해당 사이트를 확인해보니 전체 가로넓이 1200px(컨테이너)의 12컬럼. 각 유닛은 70px, 거터는 30px을 사용했습니다. 양 사이드 마진을 15px씩 줍니다. 아마도 디자인하신 분께서 계산하기 용이하게끔 한자리 수는 생략한 걸로 보입니다. 저리 하면 컬럼 한 세트가 100px로 딱 떨어지니 말이죠. 실무에서 꽤 자주 보이는 그리드 시스템입니다. 8pt그리드를 적용한 디자인은 아닙니다.
* 혹 한글판을 사용하시는 초심자분들은 지금이라도 영문판으로 바꾸세요. 국내외 많은 튜토리얼을 이해하기 위해 또 실무에서 온전한 용어로 커뮤니케이션을 하기 위해, 디자이너는 영어에 익숙해져야 합니다.
레이어를 하나 추가하고 찾아낸 그리드 가이드라인에 맞게 빨간색 사각형들로 영역을 만들어주세요. 이 작업은 제 개인적인 습성입니다. 이렇게 그리드 시스템에 대한 부분을 따로 분리하지 않으면 계속되는 작업 과정에서 실질적으로 사용하는 가이드라인과 뒤섞여 나중에 엄청 헷갈리게 됩니다.
그리드 시스템과 가이드선을 분리해둬야 나중에 편해집니다.
이제 폴더 구조를 정리합니다. 물론 이 과정은 차차 만들어가면서 쌓아가도 되지만 적어도 큰 덩어리는 잡고 가는 게 좋습니다. 다들 <헤더, 섹션, 아티클, 사이드, 푸터> 정도는 알고 있으니까요. 이처럼 우리가 아는 HTML의 구조대로 폴더 및 파일의 네이밍을 정하는 게 좋습니다. 그렇게 습관을 들이세요. 너무 길어도 문제가 되지만 그렇다고 자신만의 약어를 만들어 남발하면 안 됩니다. 누가 보아도 해당 레이어가 무엇인지 알 수 있는 수준이어야 합니다.
네이밍을 정확하게 처리하면 퍼블리셔가 제플린 등을 통해 이미지를 내려받고 파일명을 수정하지 않아도 됩니다. 또한 네이밍 규칙과 폴더 정리를 통해 차후 수정 작업 시 'btn_abc 수정했어'라고 퍼블리셔에게 한마디 전달하면 끝납니다.
이때 퍼블리싱을 해본 자와 해보지 않은 자로 극명하게 갈립니다. 해본 자라면 폴더/파일명을 CSS 형태로 짜 나갑니다. 한번 시도해보세요. 퍼블리셔에게 호감을 줄 수 있습니다. (디자인하는 당신에게도 도움이 됩니다.)
위에 언급한 부분에 신경 쓰며 차근차근 요소들을 만들어갑니다. 만드는 과정 중에 옆에 노트하나 펼쳐놓고 적어보세요. 서체는 무엇이며 몇 종류가 사용되었는지, 폰트 사이즈는 몇 가지이며 제목의 사이즈는 몇인지, 자간, 행간 등은 어찌 처리했는지, 버튼 사이즈나 아이콘 사이즈는 몇인지 등등
이렇게 모작하는 과정을 통해 해당 사이트의 스타일 가이드를 어느 정도 파악할 수 있고, 한 번도 만들어보지 않은 요소들을 직접 만들어 볼 수 있으며 이후 추가 작업을 통해 포폴 또한 얻을 수 있습니다. 비슷한 반복 작업으로 작업 속도 또한 빨라집니다. 이 모든 걸 공짜로 혼자서 얻을 수 있습니다.
해당 PSD 파일 첨부했습니다. 글을 쓰기 위한 보조수단으로 작업된 PSD라 그다지 정교하지 않습니다. 대충 프로세스를 이해하는 정도로만 봐주세요. 게다가 끝까지 마무리하지 않았습니다. 한번 마무리해보시거나 아님 새로 시작해보세요. 아래는 위와 관련해 참고할만한 링크입니다. 긴 글 읽어주셔서 오늘도 정말 감사드리며 조금이나마 도움이 되었으면 좋겠습니다.
도움이 될만한 링크
그리드 시스템 계산기 : http://gridcalculator.dk/#/1200/12/30/0
그리드 시스템 라이브러리 : https://grid.kkuistore.com/
