|
이제는 맥 OS X나 윈도우 비스타와 같이 운영체제 자체가 화려한 모습의 UI를 제공한다. 그러나 과거 평범하거나 혹은 밋밋한 그래픽을 보여주었던 윈도우 95/98/2000 시절에는 프로그램들이 보다 개성 있는 모습을 가지기 위해 많은 노력을 하였다. 그 중에서도 단연 돋보이는 시도는 바로 '스킨'이라는 개념일 것이다.
![]() 스킨을 최초로 도입한(것으로 추정되는) 윈앰프 1997년 정도로 기억한다. 막 mp3가 인터넷을 통해 널리 사용되기 시작한 시기였다. 그리고 mp3 플레이어로 가장 많이 쓰인 프로그램은 모두들 알고 있는 윈앰프였다. 그런데 이 윈앰프2는 혁신적인 '스킨'이라는 개념을 도입하여 프로그램이 하나의 모습이 아닌 여러 모습으로 바뀔 수가 있도록 하였다. 정말 대단한 충격이었다. 지금 이글루스에서도 쓰이는 ‘스킨’이라는 것의 기원도 윈앰프로 볼 수 있을 것이다. 스킨은 그래픽 툴을 조금만 다를 줄 알아도 누구나 만들 수 있었다. 각자 만든 스킨을 공유하여 평가 받기도 하면서 선풍적인 인기를 누렸다. 윈앰프 스킨 중에서는 아마 스노우캣님의 그림을 가지고 만든 스노우캣 윈앰프 스킨이 가장 인기 있는 것 중 하나였을 것이다. ![]() 스노우캣 윈앰프 스킨 프로그래머들이 이런 스킨 윈도우를 보고 가만히 있을리 없다. 프로그래밍 게시판에는 이 스킨 윈도우를 어떻게 구현하면 되는지에 대한 질문과 답변으로 쏟아진다. 유난히 스킨 윈도우 구현이 관심이 많았던 나는 이걸 계기로 본격적인 프로그래밍 아르바이트를 하기도 하였다. ![]() 처음으로 만들었던 스킨 윈도우 (나무나라 계산기...) 그 뒤 수 많은 프로그램들이 스킨으로 무장하여 세상에 나오기 시작하였다. 당시 약간은 충격적일 정도로 화려한 모습을 보여주었던 mp3 재생기였던 Sonique. 구현 자체도DirectDraw를 쓸 정도로 애니메이션이 화려하였다. 가장자리는 anti-aliasing으로 처리가 되어 수준 높은 구현을 하기도 한다. 윈앰프도 최신 버전에는 아주 화려한 수준으로 스킨이 지원이 된다. 그래도 윈앰프2가 보여준 그 단아한 스킨은 진정 스킨 윈도우의 교과서라고 볼 수 있다. ![]() 화려한 스킨의 대명사였던 Sonique 그러나 이런 스킨 윈도우는 잘 만들지 못 하면 오히려 프로그램의 완성도를 떨어뜨리거나, 본래 운영체제와 사뭇 다른 이질감으로 오히려 사용성을 떨어뜨리기도 한다. 지금도 쓰이는 프로그램 중에서 하나 예를 들어보자. 먼저, 많은 분들이 사용하시는 알집. 나는 왜 알집과 같은 프로그램을 저렇게 예쁘지 않은 (적어도 내 기준으로는) 스킨 윈도우로 구현했는지 솔직히 이해하지 못한다. 하나하나 비판해보자. (1) 기본 윈도우 응용 프로그램이 가지는 기본적인 기능이 지원되지 않거나 다르다. 예를 들어 Alt + Space를 누르면 “최소화/최대화/닫기”와 같은 시스템 메뉴가 뜨는 것이 기본 행동이다. 그런데 알집에서는 뜨지 않는다. 나 같이 Alt + Space를 누른 뒤 ‘C’를 눌러 프로그램을 자주 종료하는 나로서는 기분 나쁜 일이기도 하다. 또, 메뉴를 마우스로 클릭해서 팝업 메뉴가 뜨더라도 마우스가 실제 메뉴 항목으로 가지 않으면 메뉴 항목은 선택되지 않는 것이 윈도우 표준 행동이다. 그러나 알집의 구현은 메뉴를 누르는 순간 무조건 최상위 항목이 선택되어버린다. ![]() 알집의 스킨 윈도우 (마우스 커서가 올라가지 않아도 팝업 메뉴의 최상위 항목이 선택되어있다.) (2) 옵션 창을 보면 아래와 같다. 스킨 윈도우 안에 각종 윈도우 기본 컨트롤도 구현이 되어있다. 그런데 ‘Parameters’ 항목에 있는 edit 컨트롤은 그래도 스킨 윈도우와 잘 어울린다. 반면, 빨간 테두리에 있는 컨트롤은 솔직히 잘 어울리지 않다고 본다. 윈도우 기본 회색 빛의 버튼과 한 픽셀 들어간 느낌의 3D 테두리는 쌩둥 맞지 않은가? 차라리 이런 경우에는 그냥 윈도우 컨트롤을 쓰는 것이 더 좋다. 예를 들어 Windows Live Messenger 및 iTunes는 주 창이 스킨으로 꾸며져 있지만, 옵션 창은 그냥 윈도우 표준 컨트롤을 쓰고 있다. 내 생각으로는 이 방법이 훨씬 좋다고 본다. 구현도 간단해질 뿐만 아니라 사용자에게도 오히려 더 친숙할 것이다. ![]() 알집의 사용자 설정 창: 잘 어울리지 않는 컨트롤을 발견할 수 있다. ![]() iTunes: 스킨 윈도우와 옵션 창에 쓰인 윈도우 기본 컨트롤의 조화가 적절하다. 이쯤 되면 “저 친구 참 별 것 가지고 트집 잡네…” 라는 소리를 들을 수 있다. 그러나 UI라는 것은 단 1픽셀의 섬세함이 전체적인 UI 완성도를 결정지을 수 있을 만큼 미묘한 성질을 가지고 있다. 실제로 버튼 클래스를 직접 그려서 (그러니까 GDI 함수를 써서 일일이 그릴 때) 구현 할 때, 한 픽셀만 어긋나도 사용자는 무언가 다르다는 느낌을 받는다. 사소 해 보이는 것도 꼼꼼히 신경 써야 보다 보기 좋은 프로그램을 만들 수 있다. 그러나 이런 스킨 윈도우도 비스타 앞에서는 초라해보이는 것이 사실이다. 이제 스킨 윈도우를 만들기 위해 프로그래머가 고생할 필요가 없다. 만들어 봐도 오히려 욕만 먹기 십상이다. 비스타에서 제공되는 Windows Presentation Foundation (WPF)는 기존의 윈도우 프로그래머들의 상상을 뛰어 넘는 수준의 멋진 그래픽을 제공한다. 야후 메신저가 WPF를 적용한 첫번째 상용 프로그램이라 한다. 보다시피 정말 화려하다. ![]() 야후 비스타 메신저: 공식 사이트 예전에는 그렇게 뛰어난 그래픽 실력이 없어도 꼼꼼한 센스(?) 정도만 있어도 예쁜 윈도우 프로그램을 만들 수 있었다. 그런데 WPF 이런 것이 활성화되면 프로그래머 영역에 있었던 UI 작업이 완전히 디자이너 몫으로 되게 될 것 같다. 아니면 프로그래머도 이제 필수로 움직이는 애니메이션 기법도 다를 수 있을 정도로 디자인 능력을 키워야 하는 것인가? 스킨 윈도우 정도는 디자인을 전공하지 않은 프로그래머도 접근할 수 있는 영역이었다. 그러나 점차 사용자들의 눈은 높아져만 가고 프로그래머가 혼자서 하기에는 너무 힘든 세상이 되어버렸다. 역시 개발자는 고달픈 직업이다. 참고: 대부분의 이미지는 구글 이미지 검색을 통해서 가져왔음. 이 글과 관련있는 글을 자동검색한 결과입니다 [?]
최근 등록된 덧글
개발자 입장에서의 수많은 ..
by Jiyoon at 02/04 저도 아들 돌잔치때 돌잡이 .. by 박상욱 at 01/18 미국 대학원 원서 작성중에 p.. by 태클사이야 at 01/13 TO: 박PD 로그인 하지 않아.. by 박응용 at 01/10 http://gigglehd.com/zbx.. by dhunter at 12/28 우와.. 좋네요. 태반이 .. by 윤광배 at 12/17 항상 좋은 글 잘 보고 있습니.. by y2k at 11/23 글이 좋아서 제 블로그에 담.. by 쏭섭 at 11/23 최근 등록된 트랙백
메뉴릿
이글루 파인더
|