도티의 디자인 가이드 ep.1 - 반사광(Glassy) 버튼 만들기

안녕하세요, 김동신(dotty)입니다.

후덥지근한 여름날씨에 선풍기가 달달거리며 돌아가는 소리를 배경으로하고, 자그마한 기획 시리즈를 하나 연재해볼까 합니다. 저의 발로 그린 디자인에 대하여, 간혹 가다 사람들이 격려와 칭찬의 말씀을 해주셔서, 그 밑바닥의 보잘것없음을 증명하고자, 개발자의 입장에서 처절철저하게 맨땅에 헤딩으로 익혀온 땅파는 기술노하우를 토대로, "개발자를 위한 디자인 가이드"를 마련해볼까 합니다.

본 연재는 개인 사정에의하여 아무때나 중단될 수도 있고, 주제는 종횡무진하게 될 예정입니다. 하지만, 인생에서의 심심함과 생산에의 욕구가 마르지 않는 동안에는, 잊을 만하면, 혹은 자주 여러분을 찾아뵙도록 노력하겠습니다.

자, 그럼 대충 출발해볼까요.


Initialize()

본 디자인 가이드는 정규과정을 전혀 거치지 않고, 간혹 날림으로 이런 저런 수업을 청강하거나, 시중의 책, 그리고 do & undo의 반복을 통하여 얻은 지식의 결합입니다. 따라서, 디자인에 대한 이론적 배경에 대한 소개는 대부분 모르고생략하고, "이렇게 하니 결과가 이렇더라" 혹은 "대충 요런게 좋은 것 같다"라는 식의 실전 예시와 직감(?) 위주로 진행을 하고자 합니다.

누가 볼만한 가이드인가?

이 가이드는 아래 디자인을 보고 "저 정도 할 수 있으면 괜찮겠네"라는 분들을 타겟으로 기획 되었습니다. "이런건 발가락 두 개만 써도 만들 수 있어"라거나 "마우스를 잡고 졸다 일어나보니 Mac OS X 인터페이스가 되있더라"라는 경지의 분들은 다른 글로 점프해주시길 바랍니다.

자자, 어떤 일이던 간에 결국 '도구'에 익숙해져야 편히 작업할 수 있습니다. 여기서는 한국에서는 대중화(?)된 Adobe Photoshop(포토샵, 혹은 뽀샵 이라고들 하죠?)을 기준으로 설명하겠습니다. 저는 Mac OS X의 CS3버전을 사용하고 있습니다만, 기존 버전들에서도 사용할 수 있는 최소한의 기능들만으로 뚝딱뚝딱해보겠습니다.

작업물은 주로 웹이나 데스크탑 환경에서 보기에 적합한 형태이므로, 인쇄물용이라던가 그런 건 기회가 되면 따로 진행을 하도록 하고.. 순서도 특정한 흐름에 얽매이지 않고, 그 때 그 때 생각나는 예시나, 혹시나 있을지 모르는 댓글을 통한 요청을 통하여 진행하도록 하겠습니다.

서론이 너무 길었군요. ㄱㄱㅅ.

ep.1 요즘 유행하는 반사광(Glassy) 버튼 만들기.

Glassy 스타일 역시(?) 애플에서 유행을 시킨 경우인 것 같습니다. 몇 년전에 Mac OS X이 등장하면서 아쿠아(aqua) 스타일 이미지/버튼이 유행을 탔던 적이 있었지요. 그때는 게시판 스킨들도 아쿠아 인터페이스를 많이들 모방했었고, 한동안 대부분의 포토샵 강좌들도 아쿠아 스타일 버튼 만들기는 필수항목이었던 적이 있습니다.

오늘은 요 글래시한 버튼을 최대한 '효율적'으로 만드는 방법을 알아봅시다. 제게 있어서 효율적이라 함은, 최대한의 완벽한 효과보다는, 최소한의 작업 과정으로 '그럴싸한' 결과까지 이르는 방법을 의미합니다.

2시간 써서 100%를 하기 보다는 15분 써서 80%, 30분써서 90%를 만들면 된다는거죠.

오늘의 목표 산출물:

매 episode마다, 기교(?)의 핵심을 한 문장으로 정리해서 말씀드리겠습니다. 물론 실제로는 진리가 아닌 경우도 있겠습니다만, 마치 현대물리를 배우기전에 이해를 돕기 위하여 뉴턴의 고전역학을 진리인냥 배우는 마음으로 받아들이시면 되겠습니다. 그럼 오늘의 핵심은...

Key: 반사광 이미지는 시각의 인식 능력을 이용한 그라데이션이 핵심이다.

자 포토샵을 띄웁시다.

상대적으로 자그마한 이미지를 가지고 놀 것이므로, 640x480 정도의 캔버스를 띄워봅시다.

좌측 메뉴에서 도형을 그리기 쉬운 벡터 도형 툴을 선택해봅니다. (단축키: U)

그리고 대충 아래처럼 둥그런 네모 상자를 그리는 것을 선택해봅시다. (아래 인터페이스는 포토샵 버전에 따라 약간씩 다릅니다만, 결론적으로 둥그런 네모 상자가 예쁘니까 이걸로 합시다.)

자, 이제 대충 25%가 끝났습니다. 후후.

A. 초급: 순수 그라데이션만으로 쇼부 (5분)

5분에 버튼 하나씩 찍어내기에 좋습니다.

위의 도형을 캔버스위에 주욱 드래그해서 대충 150 x 70 픽셀 정도의 이미지를 만들어 봅시다. (버튼 속의 색상은 신경안쓰셔도 됩니다.)

그리고 Layers 패널에서 아래 이미지에서 가리키는 곳을 더블클릭하시면...

Layer Style이라는 메뉴가 뜹니다. 이거 기능 막강하고 자주 쓰니까 기억해두세요. 이제 그 중 좌측에서 Gradient Overlay라는 것을 선택합니다.

그러면 아래와 같은 화면이 뜨는데, 좌측에 원래 이미지에 벌써 그라데이션이 미리보기(preview)로 적용이 되어있는 모습을 볼 수 있습니다.

빨간 동그라미 영역(그라데이션 색상이 있는 곳)을 클릭하면 아래와 같은 그라디엔트 에디터가 뜨는데, 이제 50%가 끝났습니다.

사실 캔버스 띄우고 도형 하나 그리고 그라디엔트 에디터 띄운게 고작이군요. 자, 이제 나머지 절반입니다.

그라디엔트 에디터의 막대 상의 원하는 위치를 클릭하면 색상이 추가되면서, 색을 고를 수 있습니다. 아래 화면에 나온 색상을 대충 흉내/선택해서 만들면, 약간 반사광스러운(?) 버튼이 나옵니다.
 

자세히 보면, 4가지 톤의 푸른색을 사용한 것인데, 여기서 핵심은 가운데 두 색상이 만나는 부분에 있습니다. 대충 중간 쯤에, 매우 가까운 거리에 두개의 색상을 배치하고, 하나는 어둡게, 하나는 조금 갑작스럽게 밝게 해주면, 신기하게도(?) 사람의 눈은 그것을 반사광처럼 느끼게 됩니다.

약간 좀더 신경써서 위 아래에 연한 색상을 넣어주면, 위 아래로 조금더 볼륨감이 생기고, 빛이 나는 듯한 느낌을 줄 수 있습니다. 테두리도 아주 연한 회색을 넣어주면 점점 버튼스러워 집니다.

대충 글씨 넣고 살짝 손질해주면..

버튼하나가 나왔죵.

그라데이션에 쓰일 색상을 선택하는 것에 시간이 나름 많이 쓰이게 됩니다. 결국 자기가 좋아하는 색상 몇 가지 중심으로 반복적으로 사용하게 되죠. 색상을 잘못 고르면 왕촌스러워 지기도 하고, 은근 뽀록(?)으로 그럴싸한 색이 나오기도 합니다. 실험해보세요.

간단히 리뷰해보면, 1) 캔버스 열고, 2) 도형 그리고, 3) 자신이 원하는 색상의 그라데이션 입히고, 4) 테두리 넣거나 글씨 넣고 저장하면 끝입니다.

가운데 두 색상 사이의 거리가 핵심입니다.

잘못된 예 1) 둘 사이의 거리가 너무 멀면 반사광 느낌이 사라지게 됩니다. 촌스러운 그라데이션으로 변질되죠.

잘못된 예 2) 둘 사이의 거리가 너무 가까우면, 지나치게 날카로운 느낌이 납니다. 의도적으로 이렇게 할 수도 있겠지만, 아주 약간의 거리를 두어서 부드럽게 하는 것이 느낌이 더 좋은건 저만일까요?

테두리 넣거나 글씨 예쁜거 고르기 등등은 나중에 (언젠가) 다루기로 하고요, 파랑, 빨강, 녹색, 노랑, 오렌지 등등 여러 색으로 연습해보시면서 이 과정이 익숙해지시면, 이런 버튼 하나는 5분도 걸리지 않게됩니다.

B. 중급: 그라데이션 + 반투명 이미지로 꾸미기 (5분)

"아니, 초급도 5분인데, 중급은 왜 5분인가" 라는 질문을 하시는 분들께, 레이어를 만들고 반투명 넣는 정도는 사실 그라데이션 고르는 시간에 비하면 0으로 수렴하게 됩니다. 고로 5분.

애플의 버튼들을 자세히 보시면 반사광 효과가 둥그렇죠? 그라데이션만으로는 하기 쉽지 않은 둥그런 볼륨감을 만드시려면 반투명 이미지를 사용하면 손쉽게 구현할 수 있습니다.

이번에는 아까의 도형에 아래와 같이 조금 더 단순한 그라데이션을 적용해 봅니다.

그리고는 레이어를 하나 추가해서, 아래처럼 하얀색 동그라미를 넙적하게 그려줍니다.

그리고 하얀 동그라미 레이어의 투명도를 30% 정도로 맞춰주면...

그리고 글씨도 살짝 넣어주면...

이런 느낌의 버튼이 완성됩니다.

참 쉽죠?

아니, 실제로도 쉽습니다.

사실 여기서, 하얀 반투명 레이어에 마스크를 씌워서 좀더 부드럽게 해주거나, 위 아래 부분에 약간씩 반사광 레이어를 더 추가해서 각진 볼륨감을 넣는 등의 변종이 가능한데요, 한번에 먹으면 소화도 안되고 배에 가스만 차니, 이거랑 버튼들이 투명 유리위에 올려진 것처럼 아래로 반사가 되는 효과는 다음 기회에...

이상으로 "요즘 유행하는 (그럴싸한) 반사광 버튼 (열라 쉽게) 만들기" 가이드를 마치겠습니다.

오늘 가이드에 사용된 PSD 파일입니다.

invalid-file

그러면, 다음 시간에 봐요~