겨울은 언제나 봄을 품고

매운 바람끝에는 이미 봄이 숨어있으니

Archive for the '삽질의 인생' Category

[번역] Web 2.0 how-to design guide(4)

3. 단순화한 다단 레이아웃(Fewer columns)

몇년 전까지만 해도 3단으로 구성된 사이트가 보편이었습니다. 4단 구성도 비정상적인 것은 아니죠. 하지만 오늘날은, 2단이 보편적이고 3단만 해도 많은 것으로 생각되고 있습니다.

왜 레이아웃을 단순화하는 편이 더 좋을까?

과유불급이죠. 칼럼이 적으면 단순하고, 강조되고, 진실되어 보이잖아요. 우리는 적은 정보라도 더욱 분명하게 전달하고 있습니다.

제품 소개 페이지도 역시 중앙 정렬 레이아웃을 사용하면 되겠습니다. 왜냐하면 우리는 화면 전체를 꽉꽉 채우려는 것도 아니고, 동시에 그렇게 많은 것을 보여주려는 것도 아니니까, 한번에 많은 열을 보여줄 필요가 없거든요.


37 Signals’ home page

37Signals은 언제나 첫화면에 사람들이 찾아와 궁금해하는 것들에 대한 간단한 답변들을 제시해 놓았습니다. 여기서 그들은 2단 컬럼을 사용하고 있습니다. 이것은 단순화에 대한 좋은 사례가 되겠지요. 다른 쓸모없는 것들을 추가하지 않고서도 메시지를 전달할 수 있습니다.


Apple Expo

애플은 우아하고 단순한 디자인의 또 다른 선두 주자입니다.

이런 방식의 레이아웃은 정말로 좋습니다. 매번 나는 애플의 단순한 디자인을 경험할 때 마다 저런 동양철학적인 접근이야말로 디자인에 있어 성배와 같은 것임을 확신하고 있습니다. 이런 전형적인 애플 레이아웃을 보면, 우리에게 얼마나 많은 박스/칼럼/행이 필요한지에 대해 다시 생각해보게 됩니다. 불필요한 요소들을 과감하게 편집한 결과는 명백하게도 가장 깨끗하고 효과적인 의사소통을 가져옵니다.

어떻게 단을 구성할까?

단순하게 하세요. 3개 이상의 단을 사용할 필요는 없습니다. 당신에게 필요한 이상으로 복잡하게 만들 이유는 없으니까요.

물론 예외는 있습니다. 여기 3단 이상을 효과적으로 사용한 예를 보겠습니다.

데릭 포와젝의 블로그는 메인 섹션을 3개의 열로 구성하였고, 아래쪽을 4단으로 구성하였습니다.

하단 섹션은 정보를 분별&혼합하는 기능을 하고 있는 것 같죠. 이 부분이 강조하는 것은 당신이 원하는 것을 가져가라는 듯한 느낌입니다.

Amazon (UK) 에는 양쪽으로 단이 하나씩 붙어 있습니다. 제품들은 중앙부에 3단으로 진열되어 있고요. 각각의 단은 디자인적으로 명확히 의미가 구분됩니다. 가장 왼쪽에 있는 것은 누가 봐도 틀림없이 내비게이션 역할이고, 오른쪽은 기타등등 잡다한 것들을 보여주기 위한 것이죠. 가운데에 진열된 제품들은 여백에 의해 깔끔하게 정리되어 전체 디자인을 압도하지 않습니다.

Popurls.com 은 digg나 del.icio.us 등에서 가져온 최신 소식 등, 분별, 혼합된 정보를 취합하고 있다. 그러나 텍스트로 이루어진 메인 블록은 여전히 3단을 유지하고 있다.

하단에는, 플리커(Youtube 등에서 가져온 동영상도 포함될 것이다)와 같은 사진 공유 서비스에서 가져온 인기있는 이미지들이 보인다. 이들은 여러 단에 걸쳐 늘어서 있지만, 편안히 앉아 자신이 경험한 순간들을 찾아보는 화면으로는 괜찮다.

그리고 이렇게는 만들지 말자고요;;;

웹 2.0 요소가 너무 과도한 사이트입니다. 두 단은 가운데에, 그리고 양쪽에 한 단씩 4단으로 이루어져 있지요. 배경은 흐릿한데다 모든 것이 우선순위가 낮게 되어 있습니다. 이런 레이아웃을 보면 어디부터 시작해야 할 지 알 수 없습니다.

우리가 보다시피, 아마존은 디자인을 잘 차별화하면서도 확장을 하는 데성공했습니다만, 디자인은 당신의 이와 같이 페이지를 확장하고 구성도 잘 차별화했습니다. 그러나 하지만 디자인은 당신 자신과 간단하게 동화되는 것이고, 화면의 각 부분은 이를 위해 존재하는 것입니다. 그러니까 그냥 단순하게 디자인하세요.

마가린 바르기 bookmarkr.net WZD.com 네이버에 북마크 다음에 북마크 HanRSS에 북마크하기 이올린에 북마크하기 News2.0에 투고하기 del.icio.us에 북마크하기 댓글 RSS 붐바
No comments

블로그 옷 갈아입혔습니다

뭐 귀찮다 귀찮다 해도 스킨 한 번 못 갈아입히겠습니까. (머엉)

문제는 홈페이지들인데
아, 진짜 언제 제대로 칼을 들이대고 수리하고 싶은데 영 시간이 안납니다.
DTD는 역시 그대로 가야 하나…… sgml에서 제가 쓰는 태그들 위주로 추려서 만든 것이라 괜찮기는 한데
확장성 감안해서 좀 변경할까 했는데 영 짬이……

DTD하고 xsl은 하는 것 봐서 괜찮으면
참고용으로 올려놓던가 하죠. 홈페이지 엎을 때 마다의 삽질 노가다의 주 원인인데.

근데 제 번뇌의 근원같은 저 xsl은
사실 홈페이지 디자인을 간단히 갈아엎고자 하는 저의 욕망의 소산…..(후우)
누굴 탓할 게 없어요, 세상에는.

마가린 바르기 bookmarkr.net WZD.com 네이버에 북마크 다음에 북마크 HanRSS에 북마크하기 이올린에 북마크하기 News2.0에 투고하기 del.icio.us에 북마크하기 댓글 RSS 붐바
No comments

아아, 진짜, 더블마진;;;;;

css 쓸 때 파폭하고 익스…..
css 써서 레이아웃 만드는 것은 귀찮지만 즐겁고 만들어놓으면 꽤 편리하고 좋다. 그런데.
그런데;;;;;

이놈의 더블마진은 ie7에서는 괜찮아 보이려나? 쩝;;;;
 
 
……(ie7을 안 쓰는 1인)
 
 
 
어제 제대로 만들어진 줄 알고 있었다가 밤에 익스플로러로 내 블로그를 봤더니 메뉴가 밑으로 밀려있었다. -_-+ 쩝.

마가린 바르기 bookmarkr.net WZD.com 네이버에 북마크 다음에 북마크 HanRSS에 북마크하기 이올린에 북마크하기 News2.0에 투고하기 del.icio.us에 북마크하기 댓글 RSS 붐바
No comments

#….될뻔했다…… -_-+

#에는 한글자짜리 인간의 신체부위가 들어갈 겁니다. -_-+ 아마도.
 
동사무소가 갑자기 3권이 나와버리는 바람에 급히 워드프레스 대문 갈아엎다가
홈페이지 전체 인덱스 페이지를 날려버린 해명.
 
이럴 때에는 정말로
두 사이트를 쌍둥이로 만들어놓은 것이 자랑스럽습니다…..(머엉)
 
 
 
하여간 인덱스를 날린 김에 사이트를 개편할까 라는 생각도 잠시 했습니다만 뭐 그건 나중에.

마가린 바르기 bookmarkr.net WZD.com 네이버에 북마크 다음에 북마크 HanRSS에 북마크하기 이올린에 북마크하기 News2.0에 투고하기 del.icio.us에 북마크하기 댓글 RSS 붐바
No comments

자, 이제 진짜로 중요한 문제인데.

…..홈페이지 업뎃을 해야 한다.
왜냐하면
6월 중순에 나올 내 책에다가 대고
“책 나올 때 쯤에는 홈페이지 개수 완료했으니까 좀 놀러오삼” 이라고 적어놓았거든.
(물론 아직 인쇄 안 들어갔으니 바꿀 수 있다.)
 
 
……근데 지금 이몸의 상황으로 말하자면.
 
후우. -_-+
 
 
 
자, 자, 자. 그러니까 문제는 말이다. 해명이 계단에서 떨어져 구르고 깁스를 했다가 예정보다 2주나 더 지나 겨우 푼 지 1주일도 안 된 시점이었던 바로 어제의 일.
아니, 수요일로 돌아가야 한다.
 
……그러니까 전국에는 현재 제주대와 합쳐진 제주교대 말고도 10개의 교대가 있다.
이 학교들이 매년 모여서 운동회를 한다는게 포인트다. (학교 다닐 때 부터 운동회, 소풍 등을 신통치 않게 여기며 차라리 그러느니 하루 학교 쉬고 다같이 놀면 안되나 했던 내게는 꽤 무쓸모해보이는 행사이기는 하지만 어쨌건 매년 한다. 그리고 그게 어제였다.)
그리고 한 부서에서 적어도 한 명 이상은 가야 하는데
여긴 전산실이고, 오늘 작업이 예정되어 있다.
그러면 서버담당 선생님과 네트워크 담당 선생님 자동 열외.
팀장님은 다른 출장이 잡혀 있고.
……그리고 그밖에 여러가지 복잡한 사정이 얽혀;;
 
“…..웬만하면 보낼 생각이 없었지만 국장님이 적어도 한명은 꼭 와야 한다고 하시니 할 수 없지. 네가 가라.”
 
……이런 불행한 사태를 맞은 것이었다. 물론 여기서의 2인칭이 지칭하는 것은 바로 나다. -_-+
 
 
깁스 풀고 1주일도 안 지나 아직도 다리를 절고 다니는 해명은 잠시 무의미한 저항을 해 보았다.
 
“티, 팀장님. 저는 다리에 깁스를 감고 출근하고 일하고 책을 서른권씩 들고 다니고 PC도 들고 다녔습니다만, 그리고 깁스중이라고 해도 어디 출장을 가라고 하시면 그게 부산이건 제주도건 목숨 걸고 갈 것이요 교육을 보내주신다면 정말 기뻐하면서 다녀왔겠습니다만.
……아무리 그래도 다친 사람을 운동회에 보내는 게 어느나라 법입니까아아아!!!!!”
 
……그러나 그 저항은 정말 무의미했다.
물론 우리 팀장님은 나름 건전한 상식을 갖고 계신 분인고로, 총무팀에 잘 이야기하여 안 가고도 간 것 처럼 보이게 만들 생각을 하신 것 같았지만.
 
“예? 아, 예…… 알겠습니다. 예, 전선생이 갈 겁니다.”
 
한명 무조건 보내라고 말씀하셨던 국장님, 정말로 보냈는지 체크하신다는 OTL한 상황이 떨어진 모양이었다. -_-+
 
 
하여간 나는 출발하려는 버스 앞에서, 총무팀의 명단에도 만들어 온 명찰에도 내 이름이 없는 것을 확인하고는
명단에도 없으니 가지 않겠다고 말하였으나.
 
(뒤 돌아보니 버스 앞자리에서) 국장님께서 보고 계셔;;;;;; OTL소위 국장미떼의 상황이 벌어진 것이었다. -_-+ 아이고, 내팔자야;;;;;;;
 
 
그래서 끌려간 해명은 가서, 당연히 운동은 할 수 없으니 어디 짱박혀서 가져간 책이나 읽으려 하였지만 불행히도 책 두 권은 모두 오전 중에 끝내고, 이후에는 다니는 데마다 연세 있으신 남자 선생님들이 술을 권하시는 바람에 술만 한잔 두잔 세잔 네 잔을 마시고는 저녁때 또 마시고 집에 오는 길에는 경기도 전산실 선생님이 “전산직인 우리 둘이 화기애애한 분위기를 보여주어야 하지 않겠느냐!!!” 하고 일갈하시는 바람에 그 곁에 앉았다가 온갖 수난을 당하고 겨우 인천캠퍼스로 돌아와, 불 켜진 사무실을 보고 달려들어가 그날 하루종일 내 앞으로 걸려와 있던 전화메모들을 처리하였다는 비극적인 이야기. -_-+
 
 
 
…..그래서 본인은 이번 주 주말에라도 반드시 홈페이지를 갈아엎으셔야 하는데 심히 피곤하시더라; 는 것이었다. (결론이 뭐고.)
 
어떻게 하쥐이이이이이;;;;;;;

마가린 바르기 bookmarkr.net WZD.com 네이버에 북마크 다음에 북마크 HanRSS에 북마크하기 이올린에 북마크하기 News2.0에 투고하기 del.icio.us에 북마크하기 댓글 RSS 붐바
No comments

비오는 날 어느 컴덕후 연인들의 대화

……그러니까 찜질방에 웹표준 책 들고 가서 스터디하면 됩니다.
근데 비는 오고 발목은 쑤신데다 세이군은 강화에서 나오려면 적어도 2시간은 걸리니까.
그냥 각자 웹표준책을 들고 자기 이불 속에서 뒹굴뒹굴

마가린 바르기 bookmarkr.net WZD.com 네이버에 북마크 다음에 북마크 HanRSS에 북마크하기 이올린에 북마크하기 News2.0에 투고하기 del.icio.us에 북마크하기 댓글 RSS 붐바
No comments

구글신께 사랑받는 자

전에 아는 분께서 그분 블로그…에 덧글을 다는 어떤 사람에 대해 궁금하다고 말씀을 하셨다.
내 취미는 구글링인데, 사실 다들 알겠지만 요즘 세상에야 구글과 미니홈피 쪽 훑으면 사람 정보야 쭉쭉 나오잖는가.
하지만 생각만큼 원하는 정보가 안 나와서 넘어가고 있었는데.
 
 
얼마전에 동사무소 감상문 좀 올라온데 있나 하고 검색 돌리다가 어디 커뮤니티가 떴다.
그리고 동사무소에 대해 언급한 글을 보고, 목록을 눌러보니
……앞서 찾아보려고 했던 그분이 나왔다.
 
 
 
……나는 구글신께 사랑받는 자가 맞는 모양이다. -_-+
 
 

마가린 바르기 bookmarkr.net WZD.com 네이버에 북마크 다음에 북마크 HanRSS에 북마크하기 이올린에 북마크하기 News2.0에 투고하기 del.icio.us에 북마크하기 댓글 RSS 붐바
No comments

현재 만드는 명함 샘플

일부러 외계인스럽게 만들었다. 미남작가 해명;;의 아이덴티티를 살리기 위한 디……(탕)

엄마가 세이군 구청장 선거 나가냐고;;; 하셨다;;; 여기에는 흑백으로 해놓았지만 실제로는 위와 같이 색이 들어감. 인쇄하면 색감 죽일걸. 키칼라메탈 지에 뽑고 싶은데 글씨체 때문에 상의좀 해봐야 할 것 같다.

마가린 바르기 bookmarkr.net WZD.com 네이버에 북마크 다음에 북마크 HanRSS에 북마크하기 이올린에 북마크하기 News2.0에 투고하기 del.icio.us에 북마크하기 댓글 RSS 붐바
3 comments

부상 인증샷;;;

*

……발목인대 1개 파열.
현재 반깁스중이고
병가를 쓰고 싶은데 바빠요;;; 병가 쓸 시간이 없음. 저건 출근해서 올라가는데
저희 사무실이 4층…..

“사무실까지는 몇 마일?” 하면서 올라가다가 중간에 전신거울에 찍은 샷.

그런데 마침 시기 나쁘게 교육이 하나 당첨되어서
병가 보내주시는 셈 치고 교육 보내달라고 했다가 혼났음;;;;;

ps) 집에다가는 그냥 길가다 넘어졌다고 하지만 그 진실은
패디먼의 “서재 결혼시키기”를 읽으며 계단을 내려가다가 그만 데굴;;;;;

……애서가의 최후다운 최후가 될 뻔 했습니다. 훗.

ps2) 사진을 보면 아시겠지만 다행히도 손목은 안 다쳤습니다. :-)

마가린 바르기 bookmarkr.net WZD.com 네이버에 북마크 다음에 북마크 HanRSS에 북마크하기 이올린에 북마크하기 News2.0에 투고하기 del.icio.us에 북마크하기 댓글 RSS 붐바
1 comment

홈페이지 수정을 위해 찾아보는 것들 : 사진공유 사이트

사진공유서비스를 이것저것 찾아보다가, 결국 fotobada.com 에 가입했다.
플리커는 아무래도 무료 부분에는 한계가 있었고
피카사는 쓰기는 좋은데, 1기가. 그거 많은 것 같지만 쓰다 보면 별로 많지 않아서.

하지만 늘 걱정스러운 것은
한국쪽의 사이트는 언제 망할지모른다는 편견…..?
…..망하지 마세효;;;;
어쨌건 사진인화사이트나 사진명함 같은 데랑 연계하면 쉽게 망할만한 컨셉은 아니지만
무제한;;;; 이라는 것이 걱정도 되고 반갑기도 하다.
그나저나아……

http://www.fotobada.com/heyjinseyes/fotoble

현재 아이디 뒤에 위 링크와 같이 fotoble을 붙여야 제대로 보이는데
그냥 아이디까지만 쓰면 좋을 텐데 말이다;;;;;; 조금 불편하거든;;;

============================================

마가린 대신 딜리셔스를 쓰는 게 낫지 않을까 심각하게 생각중이다

마가린 바르기 bookmarkr.net WZD.com 네이버에 북마크 다음에 북마크 HanRSS에 북마크하기 이올린에 북마크하기 News2.0에 투고하기 del.icio.us에 북마크하기 댓글 RSS 붐바
2 comments

세이군과 프로그래밍 공부 계획

……그러니까 나이가 서른쯤 되면 이제 슬슬 공부의 큰 그림을 그려야 할 때가 맞을 거다.
사실은 그래서 남선생님께도 여쭤보고 하기는 했는데(엄선생님께 그런 질문 했다가는 “공부는 무슨 공부” 하실 것 같아서 말이지;;; 무섭;;;;)

역시 사무실에서 쓰는 것은 자바와 JSP
그리고 10년 가도 써먹을 수 있을 성 싶은 것은 역시 DB겠지? 남선생님은 네트워크 쪽 공부 이야기도 하시기는 하셨지만, 어쨌건 당장은 박선생님도 계시고 안선생님도 계시고. 내가 배운들 뭐 넘볼 상황이 아니기도 하니까. (하지만 컴 수리는 여전히 잘 해두면 좋다.)

세이군과 스터디를 하기로 하였는데
일단 둘이 하고, 여건 되면 세이군의 교육청 동기 분이라도 한두명 꼬셔서
나로서는 인맥도 넓히고 공부도 하면 더 좋겠지만. (무엇보다도 둘이서만 공부하면 이건 스터디가 아니라 데이트라는 것을, 그동안 계속 같이 있었던 우리가 모를 리 없잖은가.)
 
 
 
1. 자바 공부
교재 : 헤드퍼스트 자바 개정판
기간 : 2008년 4월 말~2008년 6월 말 (2개월)
목표 : 헤드퍼스트 뒤에 나오는 주크박스 프로그램 또는 간단한 메신저 프로그램 작성
 
2. SCJP 취득
교재 : 헤드퍼스트 자바 개정판, 각종 덤프, 멀티캠퍼스 온라인 강좌
기간 : 2008년 7월(1개월)
목표 : 문자 그대로, 덤프로 정리하고 가서 시험 합격. 한번에 합격하면 7월 한달은 여름이니까 농땡이.
 
3. JSP 공부
교재 : 헤드퍼스트 JSP
기간 : 2008년 8월~2008년 10월(3개월)
목표 : 간단한 게시판 또는 RSS 리더 만들기 정도?
 
그리고 저기까지 되면 연말에는 파이썬 공부나 하면서, 해명은 renpy로 비주얼 노벨 하나 제작하고……
 
 
근데 왜, 공부를 하겠다. 고 말하면 직장을 옮기려는 것이 아닐까 하는 생각들을 먼저 하실까나;;;;
물론 여건이 된다면, 그리고 그때 내가 생각하기에 옮기는 것이 낫다는 판단이 들면 기회를 놓치지는 않겠지만
일단 여긴 집 가깝고 도장도 가깝고 부평 나가기도 서울 나가기도 편해서 좋은데 말이지;;;

일단 그렇다. 화이팅……

마가린 바르기 bookmarkr.net WZD.com 네이버에 북마크 다음에 북마크 HanRSS에 북마크하기 이올린에 북마크하기 News2.0에 투고하기 del.icio.us에 북마크하기 댓글 RSS 붐바
No comments

비주얼 노벨 만들기 툴……

http://www.renpy.org

renpy. 파이선 기반 툴로 쓸만한 듯 하다.

utf-8 지원.맥/리눅스용으로 변환 가능.

폰트가 게임 경로에 설치되어 있을 경우 폰트 지정 및 한글 사용 가능.

init:
$ style.default.font = “ahn_m.ttf”
$ style.default.language = “eastasian”

안상수 미들을 넣고 실행할 때에는 저렇게.

생각하는 시나리오는 있음. 슬슬 만들어 볼까.

마가린 바르기 bookmarkr.net WZD.com 네이버에 북마크 다음에 북마크 HanRSS에 북마크하기 이올린에 북마크하기 News2.0에 투고하기 del.icio.us에 북마크하기 댓글 RSS 붐바
No comments

공무원의 하루-1971년 제작…. 을 보다가 –;;

사실은
친구놈들이 하도 철밥통이라고 놀려서 투덜거리다가-_-+
그걸로 메신저에서 꿍얼꿍얼거렸더니 모 님이 주신 링크에서 이 동영상을 보게 되었는데


 
그때도 사람들이 공무원 #나 철밥통에 놀기만 한다고 구박했구나, 하는 생각도 했고
(실제로 그렇게 못 놀거든요…..? 거의 이건 시트콤 논스톱 보고 대학생은 다들 노는 줄 아는 것도 아니고;;;)
그래도 저때는 정부가 나서서 공무원을 때려잡지는 않았나보네, 하는 생각도 했는데.

 
 
이 동영상의 5분 5초 무렵 주목.
 
 
 
 

……나 펀치카드 처음 봤어.
 
 

아니, 사실은 예전에 실과교과서에 실린 그림으로는 봤지만 말이야. 그러고 보니 5.25인치 디스켓을 본 적 없다는 애들도 많다. 세상은 변하고 있구나.
본 내용보다 이상한 쪽에 더 집중해서 죄송. 하지만 펀치카드가 더 감동이었단 말야;;;;;

 

마가린 바르기 bookmarkr.net WZD.com 네이버에 북마크 다음에 북마크 HanRSS에 북마크하기 이올린에 북마크하기 News2.0에 투고하기 del.icio.us에 북마크하기 댓글 RSS 붐바
No comments

[번역] Web 2.0 how-to design guide(3) - 2) 중앙정렬 레이아웃

중앙정렬 레이아웃

(자세한 내용은 요즘의 스타일 페이지를 참고하세요). 기본적으로, 요즘 대부분의 사이트들은 브라우저 창의 중앙에 내용을 오게 하고 있습니다. 극소수의 사이트들만이 여전히 몇년 전 처럼 가변적인 풀 스크린이나 왼쪽으로 찰싹 달라붙은 고정폭 디자인을 활용하고 있죠.

왜 중앙정렬 레이아웃이 좋은가

2.0 스타일이라는 것은 단순하고 강렬하며 정직한 것입니다. 사이트의 첫 화면과 중앙부분은 단순하고 강력하고 정직하게 다가오지요. 또한, 우리는 우리의 픽셀과 콘텐츠를 별다른 무리 없이 정보를 잘 보이는 위쪽, 비유하자면 흘수선 위에다가 두는 쪽으로 움직일 수 있습니다.

우리가 말을 아낄수록, 우리는 실질적으로 사용할 공간을 더 확보할 수 있습니다. 우리의 콘텐츠는 심플하여 아름다운 여백에 잘 둘러싸이게 될 것이고요. 우리가

언제, 어떻게 중앙정렬 레이아웃을 사용할까

당장 그렇게 하지 않는다고 뭐 특별히 나빠질 게 없다 해도, 나 같으면 중앙정렬 레이아웃을 사용하시라고 권하겠어요. 당장은 아니더라도 당신은 앞으로 더 많은 내용을 담을 공간이 필요할 수 있고, 가능한 한 더 많은 정보를 화면에 보여줘야 할 것이거든요. 예를 들어 웹 응용프로그램을 떠올려 보세요.)

마가린 바르기 bookmarkr.net WZD.com 네이버에 북마크 다음에 북마크 HanRSS에 북마크하기 이올린에 북마크하기 News2.0에 투고하기 del.icio.us에 북마크하기 댓글 RSS 붐바
No comments

[번역] Web 2.0 how-to design guide(2) : 1) 단순화

(1) 단순화

“원하는 결과를 얻기 위한 최소한의 요소를 사용하라”

사실 웹 디자인은 단순할 수록 좋습니다. 2.0 디자인이라는 것도 깨끗하고 단순한 데 초점을 두고 있지요.

이것은 조금이라도 필요하지 않은 요소는 다 치워버리라는 뜻이 아닙니다. 이 점에 대해서는 뒤에 가서 더 설명하겠지요.

나는 단순함을 신봉합니다. 물론 모든 웹 사이트가 미니멀리즘을 추구할 필요는 없겠습니다만, 원하는 결과를 얻기 위해 최소한의 요소를 사용하는 것이 좋겠지요.

나는 또한 종종 내 원칙의 중요한 근거가 되는 오캄의 면도날에 대해서도 쓸 것입니다. 간단히 설명하면 어떤 문제를 해결하는 데 두 가지 이상의 방법이 존재한다면, 단순한 쪽이 더 낫다는 이야기지요.

예를 좀 볼까요. 각각의 페이지에서 불필요한 요소를 제거해내는 것에 주목하세요. 한 페이지에 그다지 필요하지 않은 요소들이 꽤 많이 있기는 한데, 그런 것이 웹 페이지를 더 유용하게 만들던가요?

이 질문에 대한 대답은 콘텐츠 화면을 보면 알 수 있죠. 화면의 기능이 정확하게 디자이너가 의도한 대로 된 것을 볼 수 있을 겁니다. 그리고 이런 화면에 거부감이 없다면, 이런 방식은 쉽고, 바로 당신을 위해 존재하는 것이기도 하죠.

20-mozilla-store.jpg 20-medicon-media.jpg
20-etre.jpg20-simplebits.jpg
20-artypapers.jpg20-real-meat.jpg

어째서 단순한 것이 좋은가

  • 웹 사이트가 목표한 그대로를 웹 페이지가 보여줄 수 있습니다.
  • 사용자의 관심이란 한정되어 있고요.
  • 사용자들이 원하는 것을 찾을 수 있도록 돕기 위해, 또는 사이트가 목적하는 바를 이루기 위해 디자이너가 해야 하는 작업이 쉬워집니다.
  • 화려한 화면은 눈을 현혹하여 시선을 분산시킵니다. 사용자들이 원래 목적한 일을 찾기 어렵게 하는 것이죠.
  • 그래서 우리는 이런 문제에 대해 커뮤니케이션을 할 필요가 있고, 잡음을 최소화하도록 노력해야 할 것입니다. 이것은 우리가 가능하면 시선 분산의 문제를 최소화하기 위한 해결 방안을 찾겠다는 뜻입니다. 경제적이고 단순한 방법으로요.

    언제/어떻게 디자인을 간단하게 만들까요?

    당연히 언제나 할 수 있는 일이겠지요.

    그러면 어떻게 접근할 수 있을까요? 단순화를 성공시키기 위해서는 두 개의 중요한 측면에 주목해야 합니다.

    1. 장점을 희생하는 일 없이 불필요한 구성요소만 삭제해야 합니다.
    2. 더욱 단순하면서도 같은 결과를 낼 수 있는 대안 솔루션을 사용해보세요.

    ==================================

    “더이상 더할 것이 없을 때 그것은 완벽해보이지만, 그런 것에도 뺄 것은 남아있다.”

    Antoine de Saint-Exupéry,
    Terre des hommes, 1939

    ==================================

    디자인할 때, 모든 불필요한 시각적 요소를 제거하기위해 의식적으로 노력해보세요.

    특히 페이지의 레이아웃에서 목적과 연관이 적은 부분을 주목하세요. 왜나하면 이런 구역의 비주얼한 요소들은 종종 주요 콘텐츠와 내비게이션에 집중되어야하는 시선을 분산하기 마련이거든요.

    선과 단어, 모양, 색상 등, 제공하는 정보와 효과적으로 연관있는 비주얼 요소를 사용하세요. 장식 요소로만 사용하지는 말고요.

    그러면, 충분히 단순하지 못하다는 고질병을 앓고 있는 디자인 예제를 하나 볼까요.

    20-yaxay-detail.jpg20-yaxay.jpg

    Yaxay의 인터페이스는 많은 픽셀로 이루어져 있지만, 대부분은 장식이고, 일부는 배경으로 사용될 뿐입니다. 사용자가 검색을 하거나 정보에 쉽게 접근하기 위한 부분은 상대적으로 적지요. 한번, 그런 불필요한 부분이 얼마나 많은지 살펴보세요. 그리고 실제 내비게이션이나, 콘텐츠나 인터랙티브한 요소를 위해 얼마나 적은 픽셀이 사용되었는지 보세요.

    에드워드 터프티는 정보화 디자인의 도래를 주도하는 인물 중 한 명입니다. 그는 “데이터 잉크(즉, 정보 전달을 가능하게 하는 디테일)”와 “반 데이터 잉크(디자인은 디자인일 뿐)”라는 용어를 사용하여 이런 현상을 설명합니다.

    터프티는 정보화 디자인(그래프, 차트, 프리젠테이션 등)의 효과를 측정하는 한 방법으로 데이터 잉크와 반 데이터 잉크의 비율을 사용했습니다. 데이터 잉크의 비율이 높을 수록 디자인은 효과적일 가능성이 높겠지요. 위의 Yaxay의 세부 내용을 볼 때, 모서리와 색상 변경, 도형과 선과 같은, 불필요한 시각 요소가 너무 많아 분주해 보입니다. 여기서 쓸모있는 요소라고 해 봤자 사이트 로고와 내비게이션 버튼의 레이블(”아트 갤러리”라고 읽으면 됩니다) 뿐이군요. 나머지는 모두, 분주합니다. 배경의 모양이나, 대각선이 그어진 인터페이스 패널이나, 모눈, 그래디언트, 이런 쓸모없는 것들은 커뮤니케이션에는 도움이 되지 않고, “반 데이터 잉크”라 불릴 만 하죠.

    나는 웹 디자인에서 풍부함과 복잡성, 또는 아름다움을 반대하는 것이 아닙니다.

    쉽게 커뮤니케이션을 하기 위해 필요한 만큼, 그리고 필요한대로 픽셀을 사용해도 좋습니다.

    물론, 어려운 데이터 뿐 아니라 간단한 정보를 소통하는 것을 포함해서 말이죠.

    어려운 데이터 : 뉴스나 주가, 기차 시간, 혹은 당신의 은행 계좌에 얼마나 많은 돈이 들어있는지와 같은 사실 종류
    간단한 정보 : 회사의 첫 인상이나 제품에 대한 느낌, 서비스 공급자가 접근할 수 있는 여러 커뮤니케이션을 뜻하며, 중요합니다.

    당신의 커뮤니케이션 방식이 어려운 쪽이건 간단한 쪽이건, 픽셀을 배정하고 사용하는 것은 주의깊게 해야 합니다. 예제를 좀 더 보죠.

    20-alex-dukal-large.jpg

    Alex Dukal의 사이트‘는 풍부하고 재미있으며 호소력이 있습니다. 여기에는 당신의 주의를 끌고, 알렉스의 작품에 대해 따뜻한 시선과 흥미를 불러일으키기 위한 다양한 비주얼 테크닉이 사용되었습니다. 그러니 이 사이트는 단순합니다. 픽셀/잉크/복잡도를 주의깊고 섬세하게 사용하였기 때문이죠. 불필요한 일이 아닙니다. 경제적이면서도 풍요롭지요.

    현명하게 당신의 잉크/픽셀을 선택하고, 우선적으로 커뮤니케이션에 배정하세요. 그러면 당신은 효과적인 커뮤니케이션을 하는 동시에 절제된 결과물을 얻을 수 있을 것입니다. 아니, 정말로요.

    마가린 바르기 bookmarkr.net WZD.com 네이버에 북마크 다음에 북마크