() translation by (you can also view the original English article)
어도비 일러스트레이터가 웹디자인의 세계로 귀환하고 있음을 실감합니다. 웹에서 흔히 SVG가 사용되기도 하고, 많은 디자이너들이 와이어프레임을 만드는데 벡터형식을 사용하기 때문입니다. 여기 여러분들의 일러스트레이터를 최고의 와이어프레임 툴로 만들어줄 여러가지 팁이 있습니다.
와이어프레임은 신속한 업무와 반복적인 내용을 빠르게 하는데에 목적이 있습니다. 매력적인 인터페이스를 만드는 것이 목적이 아니죠; 정보와 사용자경험을 디자인하는 것이 1순위 목표입니다.
1. 단색으로 만드세요.
와이어프레임은 웹페이지 상의 정보위계를 명확하게 만들어줍니다; 사용자들이 처리해야할 정보의 순서를 시각적으로 설명해주죠. 사용자가 "지금 구입" 버튼을 누르기 전에 헤드라인을 먼저 인지하도록 하려면, 버튼 보다 더 높은 주의를 끌 수 있는 "비장의 수단"이 필요합니다.
이런 시각적 위계는 여러가지 방법으로 구분될 수 있습니다. 사이즈를 조절해서 헤드라인을 더 눈에 띄게 만들 수도 있고, 놓는 위치에 따라 효과를 볼 수도 있습니다. (버튼보다 앞에 배치한다거나..) 색상이나 대비 같은 것들을 사용할 수도 있지만 그렇게 하는 것이 오히려 와이어프레임을 혼란스럽게 할 수 있습니다.
요소들로부터 색을 제거하고, 위치나 크기, 대비(더 세부적인 구분을 위해 추가한 경우)의 차이로 정의된 시각적인 관계가 훨씬 깔끔해 보입니다.
우리는 이 과정에서 예쁘고 픽셀에 딱 들어맞는 UI 세트를 만드려는게 아닙니다. 그레이 톤의 색상만 제한적으로 사용하고, 그밖에 색상은 라벨을 붙이거나 메모를 할 때만 사용하면 되는거죠.
2. 레이어를 특정한 목적에 맞게 사용하도록 합니다.
라벨을 붙이거나 메모, 주석 등을 달 때, 그런 용도의 레이어를 따로 사용하는 것이 좋습니다. 구체적인 목적이 있는 것이라면 무엇이든 마찬가지입니다. 사용자행동, 인터랙션, 제스쳐 같은 것들이요.
와이어프레임, 사용자행동, 레이블 모두 따로따로 각각의 레이어를 사용하면, 필요할 때마다 쉽게 껐다 켰다하며 구분하여 볼 수 있습니다.
3. 심볼 기능이 주는 큰 효과
D.R.Y.는 주로 프로그래밍 언어 내에서 사용돼 왔지만 디자인 작업에도 동일하게 적용될 수 있습니다. 어떤 와이어프레임을 만들던지, 특정한 오브젝트를 한 번 이상 반복적으로 사용하게 됩니다. 그런 오브젝트들을 심볼에 등록하면 언제든 불러다 사용할 수 있게 됩니다.
여기 간단한 입력필드가 그런 예가 될 수 있겠네요.
이걸 드래그하여 심볼 패널로 집어넣습니다. (Shift + Command + F11)
앞으론 이 오브젝트 심볼 패널에 불러다 사용할 수 있게 되었습니다. 쓰고 싶은 만큼 얼마든지요. 이렇게 불러온 심볼을 더블클릭하면, 각 요소를 분리해서 편집할 수도 있습니다.(그룹 지어진 오브젝트를 다루듯이요). 이 사각형의 모서리를 둥글게 만들거나, 그밖에 어떤 변경사항을 적용하든 간에 그 변경사항들은 우리가 사용해 온 모든 입력필드에 각각 적용될 것입니다.
심볼로 이루어진 컬렉션 하나만 있으면, 이것들을 하나의 세트로 저장할 수도 있습니다.
세트로 저장함으로써 나중에 다른 파일에서도 이 세트들을 불러와 사용할 수 있습니다.
심볼 팔래트에 대해서 좀 더 알고 싶다면, Quick Tip : 일러스트레이터의 심볼을 활용한 작업을 참고하세요.
4. 가리키는 용도로는 화살촉만한게 없죠.
한 가지 훌륭한 팁은 화살표를 활용하는 것입니다. CS5 버전 이후부터는 일러스트레이터에서 쉽게 사용할 수 있습니다. 와이어프레임은 화면의 상호작용, 순서, 네비게이션, 움직임을 묘사하기에 가장 이상적인 수단입니다.
최근에는 Stroke 패널을 통해 직접 화살촉을 붙이기 쉽게 되었습니다.
"Arrowheads.ai" 파일을 편집해서 사용할 수도 있고, 우리가 직접 만들어 추가해 볼 수도 있다고합니다. 여기 Ryan Cornwell의 설명에 따르자면요.
참고: 귀찮게도 스포이드툴(dropper tool)이 다른 스타일의 선에서 화살촉 스타일까지는 가져오지 못합니다. 그래서 여러분이 선택했던 그 화살표 스타일까지 복제하긴 쉽지 않죠. 그렇다곤해도, 와이어프레임을 만들기엔 완벽하답니다.
5. 그리드 스냅을 이용하여 동일한 간격과 사이즈로 맞추기
여러가지 방법에 있어서, 색을 사용하지 않는다는 사실을 계속 따라갑니다. 크기와 간격의 단일화를 통해 와이어프레임의 산만한 요소를 제거하고 시각적으로 정말 중요한 것에 집중할 수 있도록 도와줍니다.
정확한 치수가 더 심도있는 UI를 나타내지 않는지는 중요하지 않습니다. 계층구조와 그 관계가 참인 이상 계속 진행해도 좋습니다.
View > Show Grid 를 함으로써 아트보드에 그리드를 적용할 수 있습니다. View > Snap to Grid 를 선택하면 오브젝트를 정밀하게 배치하는데 도움이 될겁니다.
여러분의 그리드가 어떻게 보일지 상세하게 지정하려면 Illustrator > Preferences > Guides & Grid 로 가보세요. 가이드라인 간격을 정의할 수도 있고, 그 간격사이를 채울 보조간격의 개수를 설정할 수도 있습니다.
참고: 그리드에는 색을 자유롭게 사용할 수 있습니다. 최종 결과물에 반영되는 것은 아니니까요.
6. 그래픽 스타일을 사용해 가변 버튼 만들기
재현성의 정도(와이어프레임이 최종적으로 만들 웹사이트와 얼마나 유사한가)에 따라, 실제로 사용할 텍스트를 넣을 것입니다. 가령, 버튼 같은 것들에 말이죠. 오브젝트를 사용하지 말고 그래픽 스타일을 사용하여 버튼 안에 들어가는 텍스트의 양에 따라 버튼의 크기가 유동적으로 변하도록 만드세요.
임의의 텍스트로 시작해봅시다.
Window > Appearance로 가서 Appearance 패널을 열어봅시다.
Appearance 패널을 사용하면, 한 오브젝트에 여러가지 색을 더할 수 있습니다. 우리가 표현하고 싶은대로 Fill의 순서를 변경할 수 있습니다. 여기 이미지를 보시면 Fill 위에 또다른 Fill들이 쌓아올려진 것을 확인할 수 있습니다.
지금으로선 2개의 Fill이 필요합니다. 어두운 색으로 텍스트를 채우고, 배경으로는 옅은 색을 채웁니다.
현재는 엷은 회색의 배경을 볼 수 없는데, 정확하게 같은 형태의 Fill이 덮고 있기 때문입니다. 그러나, 이것을 각각 분리하고 개별적으로 다룰 수 있습니다. Appearance 패널 가장 아래에 있는 Fill을 선택하고 Effect > Convert to Shape > Rounded Rectangle 메뉴로 이동합니다.
우리가 적용하려는 오브젝트에 맞도록 몇 가지 설정값을 입력합니다. Size 항목이 Relative로 됐는지 다시 한 번 확인합니다.
최하단에 엷은 회색 Fill이 텍스트 사이즈에 따라 가변되는 둥근사각형이 되었습니다. 버튼입니다! 이 속성을 다른 오브젝트에 적용하려면, 그래픽 스타일 패널에 이 버튼을 통째로 끌어다 놓습니다. 이 속성은 하나의 스타일로 저장되었고 여러분은 언제나 재사용이 가능합니다.
예를 들면 여기 더 긴 텍스트가 있습니다. 즉각 적용하기 위해 텍스트가 선택된 상태에서 새롭게 만든 그래픽 스타일을 클릭합니다. (전 이 그래픽 스타일을 더블클릭하여 이름을 새롭게 지었습니다.)
7. 자주 사용하는 아트보드를 설정합니다.
와이어프레임에서는 속도가 생명이죠! 레이아웃을 휘리릭 만들고, 다음으로 넘어가고, 또 휘리릭 만들고, 다음으로 넘어가고. 그러니까 시작부터 쉽게 접근할 수 있도록 미리 만들어 놓아야합니다. 거대한 아트보드에 먼저 작업하고 최종 오브젝트들을 분리된 파일로 옮겨담거나, 적절한 사이즈의 아트보드에 바로 작업하는 것 중 무엇이 여러분에게 가장 적절한지 알게될 것입니다.
여기 아이패드 스크린(1536x2048px) 사이즈의 레이아웃과 아이폰4S 스크린(640x960px) 사이즈 4개가 있습니다. 이 외에 어떤 다양한 사이즈로 구성된 파일도 따로 준비할 수 있겠죠. 여러분이 선호하는 크기를 직접 조절하거나 아트보드 옵션에서 미리 설정된 크기를 선택할 수 있습니다.
여러분이 사용할 공통의 가이드나, 레이어 이름, 심볼 세트를 포함한 전체를 하나의 템플릿으로 저장해(File > Save as Template..) 나중에 사용할 수 있습니다. File > New from Template..으로가서 여러분이 저장해뒀던 모든 것들을 시작부터 갖춰 놓을 수 있습니다.
더미 텍스트엔 TextExpander를 사용해 보세요.
일러스트레이터에는 더미 텍스트 툴이 없습니다. 더미 텍스트로 사용할만한 몇 가지 사본들이 있지만 우리가 만들 와이어프레임에는 TextExpander가 좋습니다.
참고: 윈도우 사용자라면 TextExpander와 유사한 기능을 가진 PhraseExpress를 사용할 수 있습니다.
와이어프레임에 흔히 사용되는(큰 머릿말, 짧은 머릿말, 다양한 길이의 본문, 전형적인 버튼 텍스트, 메뉴 아이템 같은 것들) 텍스트 단편들을 추가해 보세요. 일러스트레이터에서 즉시 사용 가능하게 됩니다.
핵심 문구를 각각의 텍스트 단편에 정의함으로써, 그 문구를 입력할때마다 여러분의 콘텐츠로 대체될 것입니다. 많은 시간들이 절약되겠죠. 폴더 옵션을 사용해서 TextExpander가 일러스트레이터에만 적용될 수 있도록 할 수도 있습니다.
보다 최적화된 TextExpander의 사용법을 배우려면 유용한 팁과 트릭으로 보는 TextExpander 마스터하기를 참고하세요.
9. 파일명을 논리적으로 짓기위해 연습하세요.
아이디어와 수정사항을 빠르게 시각화하하는 것이야말로 와이어프레임의 생명이죠. 그러나 신중하지 않으면 무질서한 파일더미에 묻혀버릴 수 있습니다. 의미있는 단계마다 저장하고 논리적인 네이밍 규칙에 따라 저장하는 것이 해결의 열쇠입니다.
예를 들어, 각각의 파일명이 현재 작업중인 페이지의 이름으로 시작되도록 짓는게 좋겠습니다. 버전 숫자 앞으로에는 몇가지 변형하기 쉬운 방향으로 이름을 짓는게 알맞을거란 얘기죠. page-variant-version.ai
예를 들어, 우리가 email 캠페인이나 ebook 포로모션 landing페이지를 작업하고 있다고 합시다. 그럼 다음과 같이 파일명을 갖게되겠죠.
이렇게 함으로써 프로젝트 폴더를 정리해줄 뿐만 아니라, 직접 버전을 관리하기에도 유용합니다. Matt Smith가 쓴 일러스트레이터와 인디자인으로 와이어프레임 만들기 아티클에서 그런 아이디어에 대해 더 많은 이야기를 하고 있습니다.
10. 드롭박스에 저장하세요. 버전관리가 쉬워집니다.
이런 버전관리 형식을 취하면서, 여러분의 작업 파일을 드롭박스에 곧바로 저장함으로써 여러분이 해야할 일을 확실하게 줄여줍니다. 심지어 드롭박스의 무료플랜을 사용하더라도 30일간은 여러분의 작업물이 저장될 때마다 생기는 사본을 자동으로 드롭박스에 보관해줍니다.
마찬가지로 Layervault 역시 비슷한 기능을 무료플랜으로 제공합니다.
어떻게하든, 여러분이 팀과 함께 협업을 한다면 특히나 유용할 것입니다. 누군가 엉뚱한 짓을 했을 때 복구할 수 있는 옵션과 함께, 모든 멤버들이 중앙의 한 폴더에서 작업하는 것이야말로 팀웍을 위한 이상적인 방법입니다.
결론.
여기 소개된 여러가지 팁들은 전적으로 제 개인적인 워크플로우이며 여러분이 하는 작업 방식으로 완전히 전달되지 않았을 수도 있습니다. 그래도 여러가지로 호기심을 자극하기에 충분했기를 바라며 웹 레이아웃을 와이어프레이밍하는 여러분의 방식에 대해 한 번 돌아보는 시간이었길 바랍니다. 그밖에 여러분이 가진 다른 팁이 있다면 아래 댓글을 통해 알려주세요!
더 읽을거리.
