웹디자인을 할 때 참고하면 좋아 보이는 글을 발견해서 잠깐 번역해 봅니다. 원문은 7 Photoshop tips for designing clean and modern websites 입니다.

Clean and Modern Web Design은 최근의 디자인 경향을 말하는 단어입니다. (모던웹 참고1, 모던웹 참고2) 번역할 때는 “깔끔하고 모던한 웹디자인”이라고 했습니다.

포토샵 기능을 설명하는지라, 잘 이해 안 가는 부분은 제가 직접 해 보고 썼는데, 안다고 생각하고 실습해 보지 않은 부분에서는 따라하기 힘든 부분이 발생할 지도 모릅니다.

——

깔끔하고, 우아하고 아름다운 웹디자인은 많은 경우 개인적인 관점의 문제다. 나는 매주 수백 개의 웹디자인을 본다. 그리고 그 중 몇몇은 나에게 인상을 남김다. 하지만 그 모두가 반드시 실용적인 것은 아니다.

디자이너들은 너무 자주 개념을 아주 단순화한다. 그래서 결국은 텍스트와 그리드 외에는 아무 것도 남지 않는다.

이 미니멀한 디자인이 꽤 아름다우면, 그런 디자인의 위험성은 큰 문제가 안 된다. 특히 멋진 타이포그라피와 함께 있을 때는 더더욱.

개인적인 의견을 말하자면, 깔끔하고 모던하게 글자를 강조해 사용하고, 사용성을 향상시키고, 보편적인 수준에서 매력을 주는 그런 디자인에는 어떤 특징이 있다. [Personal opinions aside, there are certain features of a design that allow it to be proudly labeled as clean or modern and enhance its usability and likability on a universal level. Simplicity is not a design trend, but rather an attribute of good design.]

포토샵은 우리에게 깊이와 즐거움을 만들어낼 수 있는 다양한 도구를 제공한다. 그리고 포토샵은 빈 공간을 떠나 세세한 디테일들을 통합할 수 있는 세계로 우리를 초대한다. 우리가 모던한 레이아웃에 모던한 디자인을 불어넣기 위해 사용할 것은 이 도구들 중 일부에 불과하다. 그것들을 마스터함으로써, 우리는 기능을 효과적으로 표현하는 깔끔한 디자인을 만들 수 있다.

1.공간

여백은 박스나 선, 혹은 추가적 그래픽 없이도 디자인 요소들의 분리를 표현할 수 있게 해 준다. 또한 여백은 아마도 모던 디자인의 가장 중요한 관점일 것이다. 여백은 내용을 표시하고 가독성을 제공하는 데 필수적이다. 여백을 바르게 사용하면, 깔끔하고 우아한 느낌을 준다.

포토샵에 있는 가이드(Guide)와 그리드(Grid) 기능은 요소들을 정밀하게 배치할 수 있게 도와준다. 가이드와 달리 그리드는 문서 전체에 오버레이되어 있으며, 수동으로 배치할 수 있다. 여백을 확보하기 위해 사용하는 패딩, 마진, 보이는 외곽선(border)을 설정하기 전에 가이드라인을 사용하라.

격자(ruler)를 활성화하기 위해 Ctrl+R(윈도우)이나 Cmd+R(맥)을 누르고, 위나 왼쪽에 있는 격자를 클릭한 후 원하는 위치에 드래그해서 가이드를 만들어라. 일하는 동안 가이드를 편하게 만들 수 있는 단축키도 있다.

  • 가이드라인 옮기기: Ctrl(윈도우) 혹은 Cmd(맥) 버튼을 누른 채 가이드를 클릭.
  • 가이드 보이기/감추기: Ctrl+; (윈도우) 혹은 Cmd+; (맥)
  • 그리드 보이기/감추기: Ctrl+’ (윈도우) 혹은 Cmd+’ (맥)

포토샵 가이드라인 예시

View > Show > Smart Guides에 가서 스마트 가이드를 활성화하라. 스마트 가이드는 shape를 그리거나, 텍스트를 정렬하거나 영역을 선택하거나 개체를 움직일 때 자동으로 나타난다. 스마트 가이드는 이런 엘리먼트들을 옮길 때 나타나서 우리 일을 줄여 줄 것이다.

2.깊이

빛과 그림자로 깊이를 표현하면, 상큼하고 리얼한 느낌을 준다. 그림자 효과는 어떤 개체나 선택영역, 문자 레이터에도 적용할 수 있다. 하지만 이 트릭은 배경색에 맞는 색을 고르고 기본으로 설정돼 있는 검정색을 무시하는 것이다. [but the trick is to choose a color that matches the background and forgo the default black.]

포토샵에서 그림자 설정하기

모든 그림자가 어두워야 하는 것은 아니다. 움푹 파인 효과를 글자나 폼 필드에 주기 위해서 Inner Shadow와 함께 white 혹은 light-colored Drop Shadow를 결합하라.

그라디언트 폼

3.디테일

그라디언트 툴과 그라디언트 레이어 효과는 깔끔하고 모던한 디자인에서 큰 역할을 한다. 그라디언트는 쉐도우와 하이라이트부터 배경과 버튼에 이르기까지 모던한 스타일의 곳곳에 존재한다. [여기서 말하는 레이어 효과는 포토샵의 기능인 Layer Style을 의미한다.]

그라디언트 툴을 불러오려면, Shift+G를 누르고 [페인트 툴이 선택되는 경우에는 한 번 더 눌러 준다. 그러면 그라디언트 툴이 선택된다 - 녹풍], 캔버스를 클릭하고, 드래그한 후 놓는다. 섹션, 버튼, 아이콘 같은 개별 요소들을 다룰 때, Gradient Overlay 레이어 효과는 표면 스타일이나 질감[Texture]을 입히는 데 더 효과적인 수단이다. 이 도구는 요소의 레이어를 더블클릭해서 불러 온다. 더블클릭했을 때 나오는 박스[이 박스가 레이어 효과를 주는 Layer Style 박스다.]에서 “Gradient Overlay”를 골라라.

버튼이나 내비게이션 바에 섬세하게 효과를 줄 때, 혹은 종이나 금속의 질감을 흉내낼 때 이 효과를 사용하라.

종이나 금속 질감

4.명확함/선명도[Definition]

모서리와 외곽선을 확실히 강조하면, 요소들을 더 분명하게 부각할 수 있다.

Stroke 레이어 효과는 강조해야 하는 문자열이나 버튼 같은 요소가 있을 때 부각해 준다. 이 효과를 사용하면 Inner Shadow와 Drop Shadow를 더 자유롭게 확장해서 사용할 수 있다.

Stroke Layer Effect

사람들은 펜 툴을 이용해 직선이나 수평선을 그으려고 하는 경향이 있다. 하지만 만약 선에 그라디언트나 그림자를 적용하고 싶다면, Single Row Marquee Tool을 이용하는 게 더 쉽다. 이 툴은 Rectangular Marquee Tool 뒤에 살짝 숨어있다. [이놈을 오래 누르고 있으면 위 이미지에 보이는 것처럼 네 개 중 하나를 선택할 수 있는 메뉴가 나타난다.] 새 레이어에 Single Row Marquee Tool을 사용하라. 그리고 섹션 테두리를 따라 하이라이트 라인을 만들기 위해, 혹은 요소 그 자체에 효과를 줄 수 없는 경우에 구분선을 표시하기 위해 white나 light-colored drop shadow를 사용하라.

5.흥미[Interest]

깔끔하고 모던한 디자인이라는 게 심심하고, 하얗고, 미니멀하다는 것과 동의어일 필요는 없다. 텍스쳐와 패턴을 영리하게 사용하면 스타일과 브랜드를 강조하면서 시선을 끄는 디자인을 만들 수 있다. 노이즈 추가(Filter > Add Noise), 백그라운드 영역이나 인터페이스 요소에 사용하는 Texture Overlay 레이어 효과 같은 섬세한 테크닉을 사용하라. 인터페이스 요소를 사용하면 [효과를 주는 영역과 원본 영역을] 분리해서 효과를 줄 수 있다. 더 리얼하고 깔끔한 요소는 보는 이에게 매력을 준다.

노이즈 추가

텍스쳐

6.원근감[Perspective]

원근감은 모던 웹 디자인에서 가장 덜 사용되는 테크닉이다. [모던 웹 디자인은] 단순히 대칭과 격자에만 지속적으로 초점을 맞추는 경향이 있기 때문이다. 디자인할 때 요소와 이미지에 원근감을 적용함으로써, 깊이와 차원, 모더니즘과 재미를 줄 수 있다. 적용 방법은 굉장히 쉽다. 한 단계만 거치면 된다.

shape나 이미지에서 오른쪽 클릭을 하면 나오는 “Free Transform Path”를 선택한 후 툴 옵션 바에 있는 “Wrap” 버튼을 누르면 어떤 곳에도 원근감을 줄 수 있다. [아래 이미지 참고. 상단의 다양한 옵션들이 바로 ‘툴 옵션 바’다.]

Perspective

모양이나 프레임을 비대칭으로 만들고, 분리된 위치에 적절하게 그라디언트와 그림자를 줌으로써 착시 효과를 낼 수 있다.

The illusion of perspective

7.가독성

강력한 글자체는 디자인 커뮤니티의 사랑을 받으며, 깔끔한 디자인의 매우 강력한 구성요소다. 이것은 오히려 디자인을 어지럽게 만들 수도 있는 이미지와 그래픽을 대체할 수도 있다. 이것은 테크닉 이상이다. 간단하고 직선적인 방법으로 총체적 본질을 전달할 수 있다.

텍스트에 질감을 추가하기 위해, 레이어에서 우클릭을 한 다음 “Convert to Smart Object”를 선택해 텍스트 레이어를 Smart Object로 바꿔라. [사실] 텍스트를 rasterize하지 않으면 기본적인 레이어 효과밖에 사용할 수 없다. 그런데 rasterize는, 스크린을 위한 디자인을 할 때조차 웬만하면 다들 피하고 싶어한다. [일단 rasterize를 하고 나면 확대했을 때 도트가 흉하게 보이게 된다. 텍스트 같은 경우는 내용을 편집할 수 없게 된다. - 녹풍] Smart Object 변환은 필터와 다른 테크닉을 텍스트에 줄 수 있도록 하면서도, 나중에 텍스트를 바꿔야 할 때 편집 기능을 사용할 수 있도록 해 준다. 텍스트 요소를 세팅할 때 추적[tracking]과 커닝 옵션을 사용할 수 있다는 것을 기억하라. 설사 텍스트를 CSS로 다시 만들어야 하는 경우라도, 더 나은 비주얼을 만들려면 선과 글자의 배치 간격을 재 보는 실험을 먼저 해 봐야 한다. 또한, 해상도와 선명도를 유지하기 위해 [툴 옵션 바에 있는] “Crisp”나 “Sharp” 텍스트 옵션을 사용할 수 있다는 것을 기억하라. [아래 이미지을 보면 글자 모양을 설정하는 박스 맨 아래 우측에 Crisp가 선택돼 있는 것을 볼 수 있다. - 녹풍]

character_options

깔끔한 디자인에서 콘텐츠를 표현하는 방법은 다른 어떤 스타일보다 더 중요하다. 이유는 단순하다. 깔끔하고 모던한 디자인에는 시각적으로 방문자의 시선을 분산시키는 요소가 별로 없기 때문이다. 텍스트와 오브젝트의 간격을 적절히 유지하기 위해 위의 팁을 사용함으로써, 선명성과 재미를 더할 수 있다. 그리고 인터페이스에서 콘텐츠를 분리해서 디자인은 최적의 효과를 얻을 것이다. [이건 무슨 의미인지 모르겠다. 흔히 이런 말을 하면, 틀을 짜 놓고 그 안에 내용은 자유로 넣을 수 있다 이런 말일 텐데, 그렇게 하는 게 왜 디자인에서 최적의 효과를 주는 것인지… - 녹풍]

present content

필자 소개

Vail은 오랫동안 기업비즈니스 글쓰기, 음악 저널리즘과 인터넷 미디어 디자인의 활기찬 환경에서 작가와 디자이너, 카피라이트 에디터로 활동했다. 1996년부터 그녀의 기사와 사진은 각종 음악 잡지, 시 편집, 그리고 기업비즈니스 출판에 사용돼 왔다. 그녀가 뭔가 열심히 디자인하고 있지 않을 때는, 공짜 웹사이트 빌더인 Wix.com에 글쓰는 걸 좋아한다.