Mac OS X 아이콘 제작하기
맥마당 6월호
글 남궁유 e_agamee@gmail.com
Mac이 다른 시스템과 차별화되는 점이 있다면, 그것은 바로 일관성을 유지하면서도 항상 새로운 것을 찾아내고 그것을 잘 포장해 낸다는 데 있다. 이것은 애플이 만들어 내는 하드웨어와 소프트웨어 모두에게 해당하는 이야기다. 애플은 마치 ‘기왕이면 다홍치마’라는 말보다 ‘보기 좋은 떡이 먹기도 좋다’라는 것을 더 잘 아는 것처럼 성능과 사용자 환경에 대해 남다른 디자인적인 접근을 시도하고 있다. 이미 고인이 되신 Mac 개발의 숨은 공로자 제프 래스킨(Jef Raskin)은 말년에 애플이 컴퓨터 개발에 있어서 근본적인 성능 향상보다는 포장에만 신경 쓰고 있다고 통렬한 비판을 서슴지 않았지만, 필자의 견해는 조금 다르다. 지금의 시대는 포장 기술 또한 성능이라는 범주에 일정 부분 포함시킬 수 있다고 믿기 때문이다. 좋은 디자인은 같은 성능이더라도 좀 더 효율적이면서 즐겁게 사용할 수 있도록 해준다. 인터페이스를, 단순히 그래픽적인 생김새만 보고 이야기하는 것은 아니지만, 실제로 일반적인 사용자가 직접 접하는 것은 바로 이런 부분이고 기능적인 것을 아름답게 단순화시키면서 동시에 직관적인 환경으로 만들어 내야만 진정한 성능 향상을 꾀할 수 있다고 본다.
애플의 인터페이스 연구
Mac OS 9과 Mac OS X의 차이점으로 일반 사용자들이 가장 첫손가락에 꼽는 것이 있다면 그것은 아마도 화려해진 사용자 인터페이스가 아닐까 싶다. 그중에서도 Dock에서 128×128픽셀 크기로 부드럽게 확대되고 움직이는 아이콘은 가장 대표적인 예로 들 수 있다. 한때는 많은 이들이 Dock의 톡톡 튀는 아이콘을 두고 자원 낭비라고 비판하기도 했지만, 이제는 하드웨어의 발전과 소프트웨어의 최적화 덕분에 더는 그런 걱정을 하지 않아도 될 만큼 좋아졌으며 오히려 이러한 작은 효과들로 인해 컴퓨터 사용환경은 더욱 즐거워졌다. 혁신적인 메모리 관리이니 팔레트 윈도우에 그림자가 생기는 원리에 대한 이해는 시스템 기술에 관심이 많은 사용자가 아니라면 딱히 알 필요가 없겠지만, 마우스와 키보드를 이용해 조작하는 그래픽 사용자 인터페이스(이하, GUI)에 관한 내용이라면 이야기가 달라진다. GUI는 내부적으 로 동작하는 기능을 최종적으로 사용자와 직접 연결해주는 다리와 같은 역할을 하고 있다. 가령, 겉으로 봤을 때는 화려한 색상이나 서체, 사진, 그림들만 보이는 잡지나 광고도 그 내면에는 수많은 규칙과 격자선이 존재 하듯이 운영체제 모양도 하루아침에 만들어진 것이 아니라 오랫동안 다 듬어졌고 나름대로 규칙을 따르고 있다 [그림1].애플에서는 HCI(Human Computer Interaction)를 통해 다양한 사용자 환경에 관한 정보를 제공하고 있는데, Mac OS X에 관련된 것이 아니더 라도 인터페이스 디자인에 관한 많은 정보를 얻을 수 있다 [그림2]. 이러한 연구는 동종 업계에 많은 영향을 주고 있으며, 특히 마이크로소프트의 운영체제 개발에 큰 힘(?)을 불어넣고 있다.
Mac OS X 기본 아이콘은 어떻게 만들어질까?
애플은 Mac OS X Developer Preview 3부터 아쿠아(Aqua) 인터페이스를 탑재하면서 실제 사진과 그래픽적인 요소가 섬세하게 결합된 풀 컬러의 화려한 아이콘을 쓸 수 있도록 지원하기 시작했고, 그 후로 사용자들이 위화감을 느끼지 않도록 세심하게 신경 쓰면서 조금씩 인터페이스에 변화를 줬다. 대체로 최신 스타일의 기능이나 모양은 칼자루를 쥔 애플이 먼저 사용하고 일정 시간이 흐르면 외부 개발사가 이를 뒤따라 가는 식이었는데, iTunes의 인터페이스만 보더라도 계속해서 새로운 스타일로 변해가고 있다는 것을 확인할 수 있다. 초기의 투명하고 입체감 있는 스타일에서 최근에는 메탈룩 스타일과 아쿠아 스타일을 교묘하게 결합하면서 주변 프레임을 얇게 하고 좀 더 안정감 있는 톤을 추구했다. Mac OS X 아이콘은 최대 128×128픽셀 크기 안에서 원하는 형태를 표현하는 방식으로 풀 컬러와 투명 효과를 이용해 다양한 스타일로 만들 수 있다. 아이콘 제작은 Mac OS X Developer Tools에 있는 ‘Icon Composer’나, ‘IconBuilder’ 같은 써드파티 유틸리티를 이용하면 된다.
01 작은 화면 안에도 수많은 규칙이 존재한다.
참고로 InterfaceLIFT의 웹 사이트(w_ http://interfacelift.com/)를 방문하면 더욱 다양한 아이콘을 감상하고 내려받을 수 있으며, Mac OS X 아이콘 스타일을 이해하는 데 큰 도움이 될 것이다.그렇다면, Mac OS X 아이콘은 반드시 반짝반짝하는 아쿠아 스타일로만 만들어야 할까? 그렇지는 않다. 애플의 휴먼 인터페이스 가이드라인에 있는 아이콘과 관련한 내용 중에서 가장 중요한 몇 가지를 추려봤다.
1 Mac OS X이 제공하는 아이콘 종류는 크게 응용 프로그램 아이콘과 폴더 아이콘, 응용 프로그램 내부에서 도구 막대나 대화상자 등에 쓰 이는 아이콘으로 구분된다. 얼핏 봤을 때는 이들 모두가 비슷하게 보이 지만 나름대로 미묘하게 다른 규칙에 따라 각각의 아이콘이 만들어졌 다. 예를 들어, 응용 프로그램을 실행했을 때의 아이콘, 즉 Dock에 보 이는아이콘은사용자가쉽게접근할수있도록좀더화려하고디테일 하게 묘사한 반면, 시스템 유틸리티 아이콘들은 직관적이면서도 기능 적인상징성이두드러져보이게하는데초점을뒀다.도구막대아이 콘의 크기는 32×32픽셀을 권장하고 있다.
2.Mac OS X에서는 사실적이고 섬세하게 아이콘을 표현할 수 있지만, 그 림자 방향과 투시 효과를 적용해 입체적으로 디자인한 경우 일관성 있 는 형태를 유지해야 한다. 또한 하드웨어나 외장 하드디스크 같은 장비 들은 실제 장비와 연관성을 느끼게 하기 위해서 3차원 오브젝트로 표 현한다. 외장 하드디스크나 iDisk 등을 연결해 보면 무슨 뜻인지 바로
알수있을것이다.설치패키지파일이나플러그인파일등은입방체 스타일로 제작한다. 단, DVD 디스크나 메모리 카드와 같은 이동식 미 디어는 투시를 사용하지 않고 평면적으로 표현한다.
3.Mac OS X에서는 최대 128×128픽셀 크기의 아이콘을 지원하며, 아이 콘내용외의영역을마스크로처리한후알파채널이나반투명효과를 주면그림자를자연스럽게표현할수있다.MacOS9과는다르게안 티앨리어싱을 지원하므로 곡선이나 직선 같은 다양한 형태의 선을 제 약없이사용할수있다.일반적으로응용프로그램아이콘은크기변 환 시 최적의 디스플레이를 위해 128×128픽셀, 32×32픽셀, 16×16픽 셀 크기를 모두 포함하고 있어야 한다.
4.실제로 존재하는 물체를 소재로 삼아 아이콘을 표현할 때는 재질감을 살리는 것이 중요하다. 금속이나 플라스틱, 유리, 종이와 같은 느낌을 연출해야 하고, 투명한 느낌을 줄 필요가 있다면 아쿠아 스타일을 연구 해서 표현한다. 돋보기 모양의 아이콘에서 유리 부분이 투명하게 느껴 지도록 하면서 밑에 내용이 확대되어 보이도록 디자인하는 경우가 그 대표적인 예다.
5.아이콘에는 모든 사용자들이 인지할 수 있도록 객관적인 사물을 사용 해야 한다. 예를 들어 이메일 응용 프로그램의 아이콘을 디자인할 경우 독특한 모양의 우편함보다는 우표 같이 모두가 인식할수있는것을선택한다.또,화려하고복 잡한 형태, 많은 색상을 사용하기보다는 단순하 고부드러운톤의그라디언트를쓰는것이좀더 효과적이다.
iconBuilder를 이용해 아이콘 만들기
IconBuilder 8.5는 IconFactory( http://iconfactory.com/)가 판매하는 아 이콘 제작 유틸리티로, Photoshop용 플러그인 소프트웨어다. Photoshop 과 Fireworks 플러그인으로 동작하며, Mac OS X용 아이콘은 물론 Windows Vista 아이콘까지 만들 수 있다. Photoshop 플러그인이기 때 문에 자체 드로잉 기능은 없지만, 어도비 전 제품의 유연한 편집 기능 을 활용해 다양한 효과의 아이콘을 제작할 수 있다는 것이 큰 장점이다. 최근 발표된 버전 8.5는 유니버셜 응용 프로그램으로 업데이트되었고 Photoshop CS3는 물론 다양한 아이콘 템플릿을 지원하고 있다.
IconBuilder의 설치는 간단하다. 단순히 설치 디스크에 있는 플러그인 파일(IconBuilder.plugin 혹은 IconBuilder)을 버전에 맞게 Photoshop 의 플러그인(Plug-Ins) 폴더에 넣으면 되고, ‘IconBuilder Essentials’ 폴 더를 자신이 원하는 위치에 복사해 두면 된다. 마지막으로 IconBuilder Essentials > Iconfactory IconBuilder Assistant 폴더에 있는 ‘IconBuilder Assistant.atn’ 액션 설정을 Photoshop에서 불러오면 설치는 끝난다 [그 림3].
이제 IconBuilder 8.5를 이용해 Mac용 아이콘을 본격적으로 만들어 보자. 예제로 만들고자 하는 것은 공처럼 둥근 구 형태를 가진 아이콘으 로, 아쿠아 스타일의 아이콘을 설명하기에 적합한 소재인 것 같아 선택했 다. 기준이 되는 스타일은 Mac OS X에 있는 네트워크 아이콘을 따랐다. 그래픽 도구를 다루는 법은 Photoshop 사용에 관한 내용이기 때문에 자 세한 설명은 Photoshop 매뉴얼을 참고하기 바란다.
우선 Photoshop에서 1000×1000픽셀 이상의 72dpi RGB 문서를 만 든다. Illustrator에서 만든 지도를 불러와 레이어로 만들고, 레이어 위치 를조정한후원형선택윤곽도구로선택한다음필터메뉴에서왜곡 (Distort) > 구형화(Spherize)를 클릭해 구의 형태를 만든다. 그리고 아래 레이어에 다시 원형 선택 윤곽 도구를 이용해 지구 모양을 만들고 그라디 언트로 동일한 광원의 위치를 설정하고 입체감을 형성해준다 [그림4].
지도와 구의 모양에 그라디언트 및 음영 효과를 적용해 최대한 입체감 있게 만든다. 지도 레이어와 지구배경 레이어가 서로 잘 어울리면서도 입 체감이 느껴지도록 번(Burn) 도구를 이용해 리터칭을 해준다. 그 위에 Illustrator에서 드로잉한 라인을 새로운 레이어로 만들고 마스킹 상태에 서 그림자 효과와 라이팅 효과를 준다 [그림5].
좀 더 투명한 느낌을 위해 밝은 영역을 설정한다. 원형 선택 윤곽 도구 를 이용해 크기를 조절하고 그라디언트를 적용한 후에 레이어 마스크를 추가로 만들어서 투명도를 조정한다. 그리고 흐림(Blur) 효과를 적용해 배 경과 부드럽게 섞이도록 한다 [그림6]. 마지막으로 밝은 영역을 하나 더 설 정하고 2중으로 반사광 효과를 적용한다. 바닥에는 그림자 형태의 레이어 를 하나 추가한 후 그림자 효과를 준다 [그림7]. 이때 레이어 상태를 보면 [그림8]과 같은 구조로 되어 있다.
투명으로 설정된 배경 레이어를 제외한 모든 레이어를 병합시키고 크 기를 128×128픽셀로 변경한 후 PNG 포맷으로 저장한다 [그림9]. 미리보기로 열어서 보면 배경은 마스크 처리가 되어 투명하고 구의 그림자도 자 연스럽게 블랜딩되는 것을 확인할 수 있다.
IconBuilder 설치 디스크에 들어 있는 IconBuilder Essentials > IconBuilder Grid Files 폴더를 열어 보면 다양한 템플릿을 만날 수 있는데, 여기서는 ‘Macintosh.psd’ 파일을 Photoshop에서 연다. 그런 다음, 아이 콘 그래픽을 전체 선택하고 복사해 둔다. Macintosh.psd 파일의 Sample Icon 레이어를 지우고 자동 선택(Magic Wand) 도구를 이용해 128×128 픽셀 크기의 영역을 선택한 후 아이콘 그래픽 레이어를 붙여 넣는다 [그 림10]. 이제 IconBuilder를 설치할 때 불러왔던 ‘Generate Macintosh Standard’ 액션을 액션 팔레트에서 실행하면 나머지 크기에 맞게 아이콘 이 자동으로 채워질 것이다 [그림11].
Photoshop의 필터 > Iconfactory 메뉴에서 ‘IconBuilder 8.5’를 클릭해 실행하고, 왼쪽 상단 팝업 메뉴에서 ‘Macintosh – Nomal’을 선택한다. 화면 중앙에 있는 모양의 ‘Build’ 버튼을 누르면 아이콘 트레이에 리소스 목록이 자동으로 생성된다. ‘Save’ 버튼을 누르면 다양한 형태로 저장 할 수 있도록 선택사항이 나타나는데, ‘Macintosh custom icon’ 및 ‘ICNS file (Macintosh icon resource)’에 체크한 후 파일 이름과 폴더 이름을 지 정하면 된다 [그림12~13].
설치 디스크에 있는 IconBuilder Essentials > Goodies 폴더에는 ‘IconExaminer’라는 아이콘 테스트 유틸리티가 있어 자신이 만든 아이콘을 다양한 환경에서 확인할 수 있다 [그림14]. IconBuilder는 Photoshop 플러그인으로 동작하지만 Mac OS X과 Windows까지 지원 하는 다양한 템플릿을 제공하는 등 아이콘 제작 유틸리티 중에서 성능이 나 편의성 면에서 가장 뛰어나다.
진보하고 있는 인터페이스
이상으로 Mac OS X의 아이콘에 대해서 간단히 알아보았다. 사실 아이 콘 하나 만들면서 휴먼 인터페이스이니 하는 광범위한 이야기로 장황하게 시작했지만, 이런 분야의 이야기는 미적인 부분과 기술적인 부분이 결 합된 모호한 영역이기 때문에 어느 것 하나 중요하지 않은 부분이 없다고 생각한다.
누구라도 알고 있듯이 GUI의 모든 것은 아이콘 클릭으로 시작하고 데 이터 파일을 그래픽적인 상징으로 표시하려던 발상은 단순한 도트의 집 합을 넘어선 새로운 표현 방법을 요구하고 있다. 애플이 낸 최신 특허 신 청 중 하나는 자주 사용하는 아이콘의 크기가 커지는 기능이라고 하니 차세대 운영체제가 기다려지는 시점이다. 사용하는 즐거움과 성능을 따 로 떼어놓고 생각할 수 없는 지금 이 시대에 IconBuilder로 자신만의 아 이콘에 도전해 보기를 바란다 [그림15]. |
|
