bbongddaya

얼마전 익스플로러 9를 업데이트 했다가 2주도 못쓰고 다운그레이드 해버렸다.
이유는 간단했다. 불편해서!!!
업무의 이유로라도 깔아두고 써먹어야 했지만 상당히 불편한 브라우저였다.
호환성보기라는 묘한 기능때문에 사이트가 이리보였다 저리 보였다 하니 이걸 어찌해하는지...

내 컴퓨터에 기본적으로 깔려있는 브라우저는 익스, 파이어 폭스, 크롬 그리고 깔아두긴하나 쓰지 않는 사파리
주로 쓰는 브라우저는 크롬이나 한국 사이트 특징상 쇼핑몰이나 은행업무는 자연스럽게 익스플로러 사용한다.
그럼에도 불구하고 익스9가 나에게 모욕감을 주었다. 
호환성보기를 잘못 건드렸는지 로그인이 안돼고 인풋창이 사라지고...
그 상태를 참지 못하고 다운그레이드 해버렸다.

아무튼 예전엔 내가 웹쪽일을 하면서 다양한 브라우저 테스트를 하고
최대한 방향을 따라간다는 것이 뿌듯할때도 있었다. 
초반에는 브라우저 테스트가 끝나지 않은 사이트를 보면
"캬~!! 난 벌써 하고 있는데 여긴 아직이네... " 라며 조금은 우쭐해지며 감정없이 사이트를 봤지만
지금은 그런 사이트를 보면 답답하기도 하고 가끔은 화도 난다. 아주 많이~~

어제 본 트위터 타임라인에 올라온 멘션
https://twitter.com/#!/kwang82/status/131979319949000704/photo/1
외국인이 우리나라 사이트에 가입한다는 사실이 더 놀라울 뿐이다
그러다 든 생각은 왜 외국인을 대상으로 저런 조사를 했냐는 거다...
국내 사용자들도 충분히 가입하기 힘들고 사용하기 힘든데!!!!

 
크롬을 기본으로 쓰다보니 쇼핑몰에서 상품을 보다가 찜이라도 해야지 싶어 로그인 하다 겪는 상황
로그인조차 active-x를 깔라고 하니 그야말로!!!!
익스플로러가 아닌 브라우저에서는 로그인조차  할 수 없다.

 
 
로그인이 그냥 안 된다... 로그인을 해도해도 그냥 이상태...


 
디자인을 설마 이리 했을까?! 상단 가운데 컨텐츠가 안보인다...

 

익스플로러에서도 내게 절망감을 줬던 코레일 역시 진정한 Winner랄까?
코레일은 인터넷 예매로 재미를 못보나 보다... 여러모로 엉망진창이다

대부분 결제가 이루어져야 하는 사이트들은 무겁다라는 느낌을 버릴수가 없다
상품도 많고 개인정보 보호를 위한다는 목적하에  수많은 active-x
관공서 같은 경우는 가입할때 깔고 정보 볼때 깔고 다르 곳으로 이동해서 깔고 해당문건 출력할때 깔고
컴퓨터에게 미안해질 지경... 

때마침 주로 사용한 yes24가 로그인이 안되고 인풋창이 사라지고 하길래
이용 인터넷서점 바꾸려고 여기저기 기웃거리던 중 후배의 추천으로 들리게된 알라딘
 
이럴수가 이렇게 신기할 수가?!!!!
사이트를 만들어가고 있는 그들의 노고가 참으로 감사하다.

타블렛PC, 스마트폰이 많은 사람들에게 친숙하게 사용되기 시작하면서 몇몇의 사이트들은 경량화를 시작했다.
경량화는 다양한 브라우저에서도 통일감있게 사이트를 노출 시켜줄수 있는 도구가 될 수 있을것이다.
정보를 많이 받고 그 정보를 보호할 생각으로 사이트를 무겁게 유지하느니
개인정보를 최소한으로 받고 가볍고 빠르게 사용할 수 있도록 하는게 더 좋은게 아닐까하는 아주 1차원적인 생각을 해본다.
개인적인 바람으로는 브라우저 상관없이 사이트를 신나게 이용하고 싶다
에휴...
 

다음이 모듈에 조금 변화를 주었군요

http://news.nate.com/autoCluster/

가로줄 리스트만이 잘 보이는게 아니다라는 걸 잘 보여주는 예인듯 합니다.
말이 어려웠나요?!

바둑판 리스트는 이래저래 보여주는데 있어 리스크가 많았지요?
이미지가 있을때와 없을 때, 보여줘야하는 정보는 많고 그 공간은 좁고,
좌우상하 간섭이 있으면 오히려 잃는게 많을 수 있는 바둑판 리스트

그런데도 저렇게 깔끔하게 보여주니 참 좋습니다.
네이트의 요새작업물들이 네이버를 따라잡기보단
네이트스러운걸 만들어내어서 그냥 흐믓합니다.

연말입니다
왠지 빠지면 서운할 총정리!!!!
webdesignerwall에서 매해 정리해주고 있는걸 데려왔습니다.

이 곳의 말을 빌리자면 작년 크고 화려한 백그라운드보다는
패턴이나 한가지 색상으로 빼두는 게 많아졌습니다.
그런지나 스케치 형태는 여전히 인기가 많습니다.
그리고 큰 폰트를 이용한 심플한 디자인이 많이 보입니다.

해당 포스트로 가서 나머지 50개의 사이트를 구경해보세요
http://www.webdesignerwall.com/trends/best-of-css-design-2009/

CNN 홈페이지가 멋지게 리뉴얼 했습니다.
박스 그리드를 적절하게 사용한 것 같습니다.
기사 리스트를 떨어트리다 보면 하단이 잘 맞아 떨어지지 않을 경우가 많은데
그걸 박스로 그룹핑해 보기 좋게 해두었습니다.

CNN도 동영상컨텐츠를 비중있게 다뤄두었습니다.
사진과 적절히 섞어두었는데 전혀 어색하지가 않습니다.

제 눈에는 상단히 보기좋군요... 제가 좋아하는 직관적인 빨간색 ㅋㅋㅋ

http://www.webdesignerdepot.com/2009/11/cnns-new-website-design-deconstructed/
미국 쪽 웹디자이너가 상당히 디테일하게 리뷰해 두었습니다.
이 포스트 만으로도 공부가 상당히 될 듯합니다.
디자인공부와 영어공부까지...

작은 공간이지만 복잡한UI가 존재하는 달력
년, 달, 일을 어떻게 표시할 것이며, 날자이동은 어찌 할 것이며, 오늘은 어떻게 해주는게 가장 효과적일까요?
많은 경우의 수를 보아도 어느 하나 정답이라 할 만한 것이 없습니다.
모두 맞는거 같기도 하고 틀린거 같기도 합니다.

http://www.smashingmagazine.com/2009/07/22/50-new-beautiful-blog-designs/

예쁜 블로그 50선!!
스킨 공사한다고 이리저리 쥐고 흔들다가 포기했습니다
포기 안하려 했느데....
전 언제 저런 예쁜 블로그 스킨을 갖게 될까요??? 어서 코드랑 친해져야 할텐데요

오늘 네이버 메일서비스가 새롭게 오픈했습니다.
다음 한메일과 비슷하게 서비스 될꺼라 생각하고 있었지만... 촘 실망입니다.
다음과 너무 비슷해서요....
뭔가 새롭고 신선한 서비스를 기대하고 있었는데... 큰 흐름은 다음과 비슷하더라도 네이버만의 독특하고 멋진 기능이 있을꺼라 생각했는데... 아직 제가 못찾은 걸까요?
뭐 아직 베타서비스니까... 정식 오픈때는 지금 보다 더 좋아지겠지요

이런 서비스 오픈할때마다 느끼는 거지만
선행 디자인을 하더라도 빛을 못보는 현실이 안타깝습니다. 오픈했을 당시에는 큰 이슈가 되긴 하지만...
곧 그것을 보완하고 수정해 다른곳에서 당당하게 서비스를 시작해 버리니까요

이때쯤이면 나와야 할 것 같은....

http://msnbcmedia.msn.com/i//msnbc/Components/spectra/index.html

뉴스 분야를 색상으로 크게 나눠두고 그 중 보고 싶은 내용을 클릭하면 해당 뉴스 카테고리의 뉴스들이
포스팃처럼 허공에 둥둥 떠다닌다...
비쥬얼을 이용한 RSS리더기이다. 역시 보기 좋은놈은 눈에 띄기 마련이다

모든 사람들이 반복하고 또 반복해서 이야기하는 아주 지겨운 레퍼토리 중 하나겠지만, 서비스를 기획하고 만드는 사람들과 일반 사용자 간의 갭 (혹은 Geek와의 갭?) 은 우리나라 뿐만 아니라 그 어떤 IT 시장에서도 마찬가지일 것이다 (소위 말하는 캐즘).

그러한 문제를 (물론 일본 국내를 기준으로) 적당한 예를 들어가며 설명하는 멋진 글을 한 일본인의 블로그에서 발견했다. 원작자인 takerunba님의 동의를 얻어 (그렇게 훌륭한 일어 실력은 아니지만) 번역하여 올린다. 우리나라와 일본의 인터넷 환경이 동일한 것은 아니지만 상당수 유사한 면들이 많고, 역으로 우리가 상대적으로 많이 빈약한 모바일 인프라에 대해서도 언급이 되어 있기에 많은 참고가 되지 않을까 생각한다.

들어가기에 앞서 번역 중 일부 의역 등이 포함되어 있고, 부족한 실력으로 매끄럽지 못한 표현 등이 섞여있을 수도 있음에 먼저 양해말씀 드린다. 또한 원작자의 요구 사항대로 이 포스트는 무단 발췌를 금하며, 관련 문의는 takerunba님에게 직접 해주시기 바란다.

“평범한 사람들은 그렇게 까지 인터넷을 쓰지 않는다”

(저는) 이렇게 블로그에 글을 쓰고, Twitter나 mixi로 소통하며, RSS 리더나 하테나 안테나 등을 통해 정보를 수집, 맘에 드는 기사가 있으면 하테나 북마크에 등록하는 등 자유자재로 인터넷 서비스들을 사용하고 있습니다만, 사실 이러한 활용 방법은 평범한 사람들의 인식 수준과는 동떨어져 있는 이야기입니다. 쓸 줄 아는 사람에게야 당연한 이야기이겠지만, 모르거나 쓰지 않는 사람에게는 “그게 뭔데?” 라는 답 밖에는 나오지 않는 이야기지요. “내게 있어서의 상식”이 반드시 “남들에게 있어서도 상식”은 아닌 것입니다.

특히 이 점을 통감하게 되는 때가 학생들과의 대화에서 입니다. 5월엔 팀 프로젝트나 토의 활동이 많았던 관계로 후배들에게 많은 조언을 하였습니다. 덕분에 학생들과 이야기할 기회가 꽤 많이 있었는데, 자신의 인식 수준이 얼마나 동떨어져 있었는가 깨달을 수 있었던 기회가 되었습니다. 저는 – 제 자신은 평범한 사람이라고 생각하고 있었습니다만 – 어느샌가 유별한 사람들 중 하나가 되어 있었던 것이죠.

블로그는 쓰는 것이 아니라 읽는 것

학생들에게 있어서 블로그는 자신이 쓰는 공간이라기 보다는 – 물론 직접 쓰는 학생들도 소수 있습니다만 – 다른 사람이 쓴 재밌는 글을 읽는 공간이라는 인식이 일반적입니다.

블로깅을 하는 쪽이 특이한 쪽이다 보니, 학생들에게 있어 자신의 블로그를 소개하는 명함을 만들고, 포스팅 소재를 모으기 위해 이곳 저곳 뛰어다니는 “나”같은 사람들은 상당한 희귀종 취급을 당하곤 합니다. 희귀 생물이니까 잘 좀 대하란 말이야! (후배에게 한 마디)

Twitter 사용자는 당연히 희귀

이러한 상황이다 보니, Twitter는 더욱 절망적. 매니아의 세계. 실제로 “Twitter 해?” 라고 물어보면 반응 없음. “… 뭐죠 그게?”라는 반응이 대부분. 제 후배들뿐만 아니라, 타 대학에서도 마찬가지. 좋게 봐야 10명 중 1명 정도 알고 있을 듯 하네요.

뭐, 당연한 이야기지만 블로깅을 하지도 않으면서 마이크로 블로그를 하고 있을리 없다는 것. 블로깅을 하는 사람이면 이런 서비스에 관심이 많다보니 이용률이 높지만, 아예 손대지 않는 사람에겐 관심 밖의 이야기.

mixi질은 휴대폰에서

이 부분은 많은 분들이 이미 알고 계신 이야기지만, mixi는 컴퓨터에서 쓰기 보다는 휴대폰에서 쓰는 것이 주류입니다. 학교가는 길이라거나 지루한 회의 중에 mixi질을 하는거죠. 심심할 때나 시간이 남을 때 살짝 살짝.

그러다 보니 주 정보원은 mixi 뉴스 서비스. mixi에 올라와 있는 정보와 굉장히 잘 알고 있습니다. 정보원이 신문이나 TV보다는 mixi라는 것이 지금의 상황.

RSS 리더 같은 건 안 써요

이런 상황이다 보니 RSS 리더 같은 서비스는 절망적입니다. 쓰지 않는 수준을 떠나 그런 물건이 있다는 사실 자체를 모르는 데다가, 설명하더라도 그 의미를 이해하지 못합니다

보통 사람들에게 있어 인터넷은 재미로 들어가는 공간입니다. 뭔가 재밌는 것이 있는지 찾아본다거나 할 때 들어가는 것이지, 정기적으로 정보 수집 서비스 등을 활용하지는 않습니다. 정기적으로 들어가서 돌아보는 공간은 있지만 끽 해야 몇 곳 되지 않다 보니 브라우저의 즐겨찾기 만으로도 충분. 궂이 RSS 같은 걸 쓰지 않아도.. 뭐.

하테나 북마크도 쓰지 않는다

똑 같은 이유로 하테나 북마크도 쓰지 않습니다. 관심 있는 기사는 브라우저의 즐겨찾기에 등록해 두면 그만. 귀찮게 별도의 서비스까지 써가면서 등록할 이유가 없음. 자주 가는 곳은 이미 정해져 있으니 기사별로 저장해 두지 않더라도 최상위 페이지만 알고 있으면 그만. “퍼머링크가 뭐에요?” 라는 느낌입니다.

사용하는 서비스는 “그냥 필요해서 쓸 뿐”

보통 사람들에게 서비스는 “그냥 필요해서 쓸 뿐”이라는 생각이 대부분입니다. YouTube, 니코니코동화, 니챤네루 등 질리지 않고 가벼운 마음으로 읽고 그만인 컨텐츠들이 수도 없이 널려 있고, 그것을 소비하는 것 그 이상도 이하도 아닙니다. 꼭 자기가 뭔가 올려야 겠다는 필요성을 느끼지 않다보니, 읽고 보고 들으면 그만입니다. 소비하면 그만인 서비스인거죠. 능동적으로 서비스를 활용할 필요성이 없습니다.

대부분 이런 느낌입니다. 지금 이 글을 읽고 계신 분들, 특히 RSS나 하테나 안테나, 하테나 북마크 등을 통해 오신 분들이 이상한 겁니다. 비일반인인거죠. 이러한 서비스를 활용하는 쪽이 보통 사람들이 생각하기에 유별난 사람들입니다. 굉장히 신기 (rare, レア) 하신 분입니다, 여러분은.

그렇다면, 이러한 신기한 세상에 어떻게 보통 사람들을 끌어 들일 수 있을까요?

기능을 단순하게

인터넷 서비스의 자유도나 활용도를 높이기 위해 일정 수준의 커스터마이징을 지원하곤 하는데, 이러한 기능을 모르는 사람에게 있어서는 귀찮게 하는 물건일 뿐입니다. “… 그래서 뭘 어떻게 하면 되나요?” 에 지나지 않죠. 뭐가 뭔지 모릅니다. 어디서부터 손을 대야할지도 모릅니다. 그래서 손대려고 하기 보다는 아예 포기해 버리죠. 이게 신규 유저에게 있어서 진입장벽으로 작용하게 됩니다.

그래서, 이러한 사람들을 위한 간단한 기능만을 구현해 둔 별도의 페이지를 두는 것이 좋습니다. 초보자용 안내서 등이 있어도 좋겠죠. 레이아웃은 남성용 5개, 여성용 5개 정도면 충분합니다. 어려운 기능은 충분히 익숙해 지고 나서 쓰면 되는 것이니, 서비스에의 입구를 최대한 활짝 열어놔야 할 필요성이 있는 겁니다. 이것 저것 잔뜩 집어넣기 보다, 단순화된 별도의 페이지를 제공하는 것이 진입장벽을 낮추는 길일 것입니다.

장점을 명쾌하게

왜 이 서비스를 써야 하는가? 가장 큰 이유가 “장점이 뭔지 몰라서” 입니다. 무슨 좋은 기능이 있는지 잘 모르니까 그런 겁니다. 그래서 쓰지 않습니다. 굉장히 단순한 논리입니다.

그래서 “이러한 장점이 있습니다” 라는 것을 알기 쉽게 표현해 주는 것이 좋습니다. 예를 들어 RSS 리더라고 한다면 “여러분이 원하시는 정보를 빠르게 알 수 있습니다”라는 부분을 더욱 강조하는 것이 좋습니다. 좋아하는 연예인의 이름을 등록하면 어떻게 되는지, 특정 아이템을 등록하면 어떻게 되는가 같은 구체적인 예를 들어주면 훨씬 알기 쉽습니다.

표현을 평균에 맞춰라

“인터페이스라는 단어가 뭐야…” 학생들은 인터페이스란 단어마저도 어렵게 받아들일 정도이니, 미묘한 영문 약자 투성이인 인터넷 세상은 얼마나 어렵겠습니까?

RSS 리더를 예로 들자면, “피드 등록” 이라거나 “피드 관리” 같은 말이 무슨 뜻인지 잘 모릅니다. 이걸 “체크하고 싶은 페이지의 주소를 입력해 주세요”라고만 써놔도 확 달라집니다. 키워드의 등록이라 치면 “관심있는 사람의 이름을 입력해 주세요”, “갖고 싶은 물건의 이름을 써 주세요” 같이 말이죠. 어려운 표현을 배제하는 쪽으로 말입니다.

혹은 구체적인 활용 방법을 기반으로 하는 도움말을 준비해 두더라도 나쁘지 않겠죠. 이 부분에 대해서는 좀 더 다양한 고민이 필요하겠지만요.

애당초 RSS, SBM 같은 단어가 문제

영어 약어에 대해 한 마디 하자면, 애당초 학생들은 RSS 혹은 SBM 같은 단어를 모릅니다. 이걸 알기 쉬운 말로 바꿔서 설명하는 것만으로도 훨씬 나아지겠죠. “하테나 안테나” 정도의 표현이라면 (”자주 가는 페이지가 갱신했는지 아닌지를 확인해 주는 서비스”) 충분히 알기 쉽다고 생각합니다. 일반적으로도 연상하기 쉽고.

이런 발상으로 쉽게 풀어 말하는 것이 좋다고 생각합니다. “소셜 북마크 서비스”라고 쓰기 보다는 훨씬 단순하게 “모두의 북마크” 라고 쓰는 식으로 말이죠. 심플하게 기능을 전달할 수 있을 정도만 되더라도 이러한 서비스가 더더욱 일반적인 서비스로 자리잡을 수 있지 않을까요?

일단 쓰게 만든다

어떤 서비스라도 아무도 쓰지 않으면 의미가 없습니다. 써 나가면서 기능이나 의의를 알아줘도 충분합니다. 물론 정말로 편리한 서비스라면 모두가 자연스레 쓰게 되겠지만, 편리함을 직접 느낄 만큼이 되지 못한다면 사용자가 쓸 리 없기 때문이죠.

그러한 방법으로 “신규 사용자에게 상품 증정”같은 상품 전략이라거나, 모니터링 유저 모집 같은 방법, 사용 후기를 모집 (물론 블로그에 써서 올리는 조건으로) 하는 방법, 혹은 YouTube에 사용 방법을 올려두는 등 다양한 방법이 있을 것이라 생각합니다.

“아주” 평범한 사람의 시선이 되어라

가장 부족한 것이 바로 이 시점(視点)입니다. 영어 약어건 기능이건 “모르는 사람” 기준이 아니라 어느 정도 “아는 사람” 기준으로 시작합니다..

물론 “구글 뒤져보면 다 나온다고 병진아”라고 말할 수 있겠지만, 구글 뒤져보는 것도 귀찮은 사람이 있을 수도 있는 것이고, 구글 검색으로 의문점이 쉽사리 풀린다고 장담할 수도 없습니다. 검색 능력의 문제와도 연결되고 말이죠.

간단하게 이야기해서, 시장의 규모로 생각했을 때 어느 쪽에 초점을 맞출 것인가의 문제이기도 합니다. “아는 사람”과 “모르는 사람” 중 어느 쪽이 더 많은가를 생각해 보잔 얘깁니다. “모르는 사람”에 집중하는 쪽이 시장의 규모가 더 커지는 것이 당연하지 않은가요? mixi가 그 대표적인 예라고 볼 수 있을 겁니다.

물론 “아는 사람”에 맞춘 시선을 소홀히 하게 되면 그만큼 핵심 사용자 (core user, コアユーザー)를 잃게 되는 결과를 초래한다는 것을 명심하고 있어야겠지만, 현재 상황은 “모르는 사람”에 맞춘 시점이 너무나도 부족한 상황이므로 “모르는 사람”을 위한 쪽에 중점을 두더라도 나쁘지 않다고 생각합니다. 이미 구축해 둔 기능 등에 손대는 것 보다, 초보자용의 화면이나 도구를 별도로 만들면 어떨까 싶네요. 기존 서비스에 새로운 기능을 붙이는 것이 아니라, 역으로 단순화 시키는 작업이니 (혹은 기능 제한 버전을 만드는 일) 큰 고생 없이, 그리고 저렴한 비용으로 쉽게 만들 수 있을테고 말이죠. … 물론 직접 하는 입장에서야 큰 일이겠지만, 아마츄어 입장에서 가볍게 이야기하는 부분이니 이해해 주시길.

뭐, 어느 쪽이 되었건 학생들과 이야기하면서 “모르는 사람”과 “아는 사람”의 인식 차이의 수준을 깨달을 수 있게 됩니다. 현재의 서비스는 “아는 사람”의 시선에서 만들어지고 운영되고 있습니다. 이렇다보니 인터넷 세상은 학생들에겐 유별난 세상으로 인식되고 있구요. “나”같은 비(非) IT 관계자인 보통 인터넷 유저들 마저도 학생들에게는 특이하게 보인다는 것을 여실히 보여주는 것이겠죠. 현재 상황을 개선할 수 있는, 더욱 더 쉬워질 수 있는 좋은 방법이 있을 것으로 믿고, 이렇게 재밌고 편리한 서비스를 모두들 함께 사용할 수 있도록 쓰기 쉽게 변했으면 좋겠다고 생각합니다.

- takerunba

나도 공감가는 부분이 많다.
웹을 기획 할때는 절대 내가 기준이 되면 안 될것이다.
웹과 관련된 현업에 종사하는 사람들은 분명 일반인보다 수준이 높을 테니까...

내가 보는 이명박과 오바마의 웹사이트

2008/02/07 21:08 미대선에서의 오바마와 힐러리의 경쟁이 아주 흥미롭다.
여성 대통령이냐, 흑인 대통령이냐 하는 구도가 특별하다.

요즘 미국 드라마 "24시"를 보고 있는 나로서는 느낌이 새롭다.
마치 오바마도 왠지 어떤 세력의 위협을 받고 있을 것 같고, 내가 구해줘야만 할 것 같은 느낌이 든다. -_-

각설하고 "변화"를 타이틀로 들고 나온 오바마의 웹사이트에 들어 갔더니 새롭게 리뉴얼이 되어 있었다.

---

디자인 적인 면에서는 무척 훌륭했다. 간결하면서도 웅장하고 화려했다. 정말 필요한 정보만 정확하게
제공하고 있었다. 메인에 나오는 Yes, We Can 이라는 뮤직 비디오도 참신했다. 웹표준과 접근성도 훌륭했다.

인터넷익스플로러,모질라,오페라,사파리 대표적 브라우져에 이상없이 작동했다.
오히려 인터넷익스플로러에서 약간 깨지는 것을 발견했다.

어쩜 이렇게 우리 나라랑 수준이 비교가 되는지..
우리 나라 대선 때 각 후보들은 웹사이트는 조잡 그 자체였다. 도대체가 무엇을 읽어야 하고 어디를 봐야
할지를 몰랐다.

3류 광고 사이트에 온 것 처럼 여기서 번쩍, 저기서 번쩍 난리도 아니였다. 웹표준과 접근성은 말할 것도 없이 전혀
고려되지 않은 말 그대로 인터넷익스플로러 "전용" 사이트였다. 장애인의 접근을 위한 어떤한 장치도 마련되 있지
않았다.

현재 이명박 당선인의 사이트는 나름대로 깔끔하게 정돈되어 있었다.
나.름.대.로.

너무나 심플한 구조의 사이트임에도 불구하고, 자칭 타칭 IT강국이라는 대한민국의 대통령 당선자 웹 사이트 치곤
너무 어설프고 정리 안된 것 같은 느낌은 뭘까? 이것은 나 주관적인 생각인가?
이명박 당선자와 관련된(명박플라자,인수위원회등..) 사이트들의 가장 큰 몇가지만 문제점을 꼬집어 본다.

---

1.웹표준 및 접근성 위반

가)웹표준 웹표준이란 W3C 권고를 기반으로 한다. 물론 다른 여러가지 사항들이 많이 있다.
물론 이런 것들이 웹사이트를 제작하는데 있어 의무는 아니지만 W3C 권고문에 맞춘다면 전 세계 누구나 어떤
브라우져에서도 불편함 없이 원하는 정보를 볼 수 있는 사이트를 만들 수 있다.

지금은 웹2.0 시대다.
이것은 괜한 멋도 아니고 하나의 웹 트랜드라고 치부하기에는 무리가 있다고 생각한다.
이런 시점에서 가장 화두가 되고 있는 것이 표준화와 접근성 문제다. 이 문제는 오래 전 부터 중요한 부분이고
반드시 고려해야 할 부분임에도 불구, IT강국이라는 대한민국은 너무나 뒤쳐져 있다. 웹에 종사하는 사람들
조차도 웹표준화에 대해서 모르는 경우가 너무나 많다. 관심도 없다.

이명박 당선인의 웹사이트를 수주 받아 진행하는 업체라면 제법 규모가 있는 곳을 것인데 표준화에 대해 전혀
고민하지 않은 듯 하다.



파이어폭스, 오페라, 사파리에서 모두 메뉴가 깨져서 나온다.
메뉴와 비주얼이 같은 위치에 있음에도 불구하고 구지 분리해서 레이어로 처리한 이유가 궁금하다.
서브 페이지도 마찬가지다.

이러한 단편적인 부분들만 봐도 우리 나라 웹 업계의 비정상적인 현실이 여실없이 드러나고 있다.
이 부분은 앞으로 점차 나아지겠지만 이대로라면 심각한 문제다.

나)접근성

표준화도 고려하지 않았는데 접근성은 기대도 하지 않았다.
이미 "각 대선 후보 웹사이트들의 접근성"에 대한 뉴스가 여러번 나왔다.
이 접근성 또한 표준화 못지 않게 무척! 중요한 부분이다. 접근성을 고려했다라는 것은 노인도
장애인도 누구나 사용할 수 있도록 했다는 것이다.

기본적인 예로 이미지 테그에 대체 텍스틑 넣어 주는 것이다.

이렇게 해준다면 시각장애들을 위한 스크린리더에서 대체 텍스트를 읽어 주므로서 해당 이미지가
어떤 의미인지를 전달하게 된다. 그동안은 많은 디자이너들이 그림위에 노란 말풍성이 나오면 예쁘지
않다고 alt 테그를 생략하는 것을 당연히 했다.
그러나 이것은 웹의 가장 기본적인 "누구나 정보를 얻는" 것에 위반된다.

---

2. 영문 페이지의 사용자는 누구?

영문 웹사이트에 접속하려는 사용자는 말 할것도 없이 외국인이다.
외국의 경우는 우리 나라와는 다르게 인터넷익스플로러에 종속되어 있지 않다.
오히려 파이어폭스,오페라,사파리 등을 많이 사용하고 있다. 그렇다면 영문 사이트는 반드시 표준화
되어야 한다는 결론이 난다.

필자는 영문 웹사이트를 파이어폭스, 오페라, 사파리 에서 구동하였다.

http://english.mbplaza.net/default/main/ http://17insu.or.kr/cafebbs/list.html? gid=main&bid=brief_eng&page=1&cate=&sm=&kw=&tuid=

결과는 모두 정렬이 깨진다. 메뉴은 형체를 알아 볼 수 없고, 비주얼은 거의 나오지 않는다.
더 우스운 것은, 명박플라자 영문 페이지에 접속하면 대문작 만하게 나오는 플래시다.
이 플래시는 한글 나레이션에 한글 자막이다. 어쩌라는 걸까? 국제적 망신이다.

---

오바마 짱~미국~짱~>이런게 절대 아니다.
나는 이명박 당선자가 잘 꾸려 나갔으면 하고 응원하고 있다.

바꿀건 바꾸잔 말이다.. .제발 좀...

여기에 쓴 내용들은 너무나도 기초적인 지식들이다.
나 또한 그랬듯 수많은 웹 종사자들이 이런 기초적인 지식도 없다는 것이 문제다.

이 글을 보는 많은 웹 종사자 분들은 지금 당장 웹표준화 및 웹접근성에 대해 심도있게 고민해
보기를 간절히 바란다...

Posted by 서종훈 colorple _자료제공[http://colorple.tistory.com/category]>

장기적으로 보는 눈이 없는것이 우리나라 사이트 문제라면 문제가 아닐까?
모두 결과물을 빨리 보고 싶어 하니까...

나도 미국의 힐러리와 오마바 두 후보의 사이트를 보면서 부러워했던 기억이난다
철저한 마케팅과 분석 그리고 딱 부러지는 디자인!!

급조 프로젝트가 빨리 없어졌음 좋겠다...

어도비에서 포토샵 익스프레스 베타 버전을 공개했다.

https://www.photoshop.com/express/

웹에서 바로 사진을 편집할 수 있고, 자신의 앨범을 만들어 공유할 수 있는 기능을 가지고 있다.
포토샵을 자주 쓰는 나로써는 인터넷에 공개된 포토샵은 얼마나 많은 기능을가지고 있을지 궁금했다.

그래서 바로 가입하고 익스프레스를 사용해 보았다.



Join Now버튼을 누르면 간단한 이메일 인증으로 가입이 가능하다.




사진을 컴퓨터에서 웹상으로 업로드하는 단계 모습이다.
다른 웹서비스 처럼 이미지를 올리기 쉽다.
올리고 이미지 확인 작업은 빠른편에 속하는 느낌이었다.



사진 편집시 보여지는 메뉴들
자르기, 밝기, 명암, 샤픈, 특수효과들을 간단한 조작을 쉽게 줄 수 있다.

절대 어렵지 않고 클릭과 드래그 만으로
이미지를 편집할 수 있어서 포토샵에 대한 지식이 없어도
툴 숙지는 쉽게할 수 있을 것 같다.

툴에서 눈에 띄는 건 아무래도 Red-Eye Removal, Touchup, Distort 기능들
아무래도 포토샵의 장점을 살려주는 툴이자 기능이 아닐까 싶다.



두 기능의 사용 예.
포토샵에 쓰이는 모습 보다 훨씬 간단하지만 이해는 쉽다.




내 앨범에 등록된 리스트를 보여주는 화면.
섬네일 이미지로도 간단한 편집이 가능하다. 정말 편한 기능인듯...
근데 저장되는데 너무 오래걸려서 욱했다.



다른 가입자들의 앨범을 구경할 수 있는 곳
오픈한지 얼마되지 않아 퀄리티좋은 이미지는 찾을 순 없지만
개인앨범 DB용으로 괜찮을것 같다.

이래저래 쓰면서 알씨에서 제공하는 사진편집툴이 생각났다.
분명 두 개는 비슷한 점이 많다.
알씨는 조금 더 복잡하지만 일괄편집등이 가능하다는 장점이 있다.
단, PC에 설치해야하는 부담있다.

포토샵 익스프레스가 그냥 서비스에 끝날지
아니면 또 하나의 플리커가 될까?

more..

지난주 금요일 세미나를 다녀왔다
웹 2.0기획과 디자인에 관련된 세미나, 노주환님이 발표하셨다.
잘 만들어진 사이트라는건 알고있지만 그게 어디가 잘 만들어진 것인지 몰랐던 경우가 많았는데
총 4가지 디자인분류로 나누어서 웹 2.0에 대입해 주었다.
정말 유익한 시간이었다.

세미나에 나온 분류와 그에 해당하는 예제위주로 정리했으며, 예제(URL)이 없는 경우도 있다
세미나에서는 모든 예제를 보여주었지만 현재 서비스가 되지 않거나 내가 못찾아서 빼두었다.

인포메이션 디자인


에피센터 디자인 (http://www.flickr.com/)
체계적인 정보구조가 아닌 경우 사용하기 좋은 디자인



태그 클라우드 (http://wakoopa.com/)
서체 크기로 태그를 표현하는것이 가장 이상적이다.
색이 너무 많으면 가시성이 떨어질 수 있다.



계층구조의 시각화 (http://www.visuwords.com/ http://www.marumushi.com/apps/newsmap/newsmap.cfm)
가장 중요한 정보부터 순차적으로 처리



비주얼 서치 (http://www.like.com/)
단어를 생각하는 것이 아니라 이미지로 정보를 찾을 수 있게 도와준다



정보구성기 (http://www.endless.com/)
비교선택, 다중선택으로 원하는 정보 검색



대시보드 디자인 (http://musicovery.com/)
자동차의 대시보드, 경영정보시스템
커뮤니케이션 전략을 강조할 수 있다



썸샷(http://www.ushops.com/)
썸네일, 정보전달의 보조적 역할
특정사용자와 사물을 상징하는 아이콘

스크린샷
화면을 한 장의 파일로 저장해 사이트 간접체험 서비스

스크린캐스트
짧은 동영상으로 사이트 간접체험 서비스
기억 증진 효과



인터페이스 디자인
웨블리케이션
Web + Application
어플리케이션의 강력한 기능을 웹에 접목 시키는 일


웹의 위젯화
Widget : 작은 프로그램, 부품
작은 면적, 사이트가 많아 질 수록 연결 이슈가 커짐




포터블 인터페이스(http://hitask.com/)
Drag-and-Drop 기능을 이용해 오브젝트를 이동시킴
즉각적인 피드백 But 접근성으로 보았을때 조작의 어려움이 많다



포틀릿 기반의 인터페이스(http://host.sonspring.com/portlets/)
이질적인(전혀 다른) 정보를 한 페이지(화면)에 뿌려지는 것




포스트잇 타입 인터페이스(http://www.protopage.com/)
포틀릿보다 자유로운 표현 가능




위키 타입 인터페이스(http://www.wikipedia.org/)
참여 + 공유 +개방 모두가 이루어지는 형태
마크업이 잘 이루어진 형태
지식인과는 어떤 차이가 있을까?



PIP 인터페이스(http://www.google.com/)
설치가 아닌 추가하는 형태
메인과 서브가 한 화면에 공존




큰 입력 필드(http://collagr.com/)
입력 욕구를 충분히 자극, 입력 필드를 쉽게 찾을 수 있다.
현재 유행하는 입력 필드안에 광고성 텍스트, 이미지는 정말 유용한 것일까?


인터렉션 디자인
단일 컨텍스트 다중 작업
RIA, 페이지 전환 없이 데이터 로딩



YFT: Yellow Fade Technique (http://www.37signals.com/svn/archives/000558.php)
전체 페이지를 로딩하지 않고 일부영역만 로딩
로딩된 영역을 노란색으로 표시

로딩표시기
좁은 영역에서 정보가 변할 때 화려한 그래픽을 이용해 사용자에게 알려준다



미리보기팝업(http://www.netflix.com/Top100?nsfe=Y)
신속한 과업 지원
기존 내용위에 올라오는 형식이므로 입체감이 중요
중요정보는 미리보기를 지원하지 않아야 한다.



빠른저장(http://shopping.yahoo.com/)
메시지 박스와 컨트롤 버튼을 이용하지 않고 데이터 저장
사용자 오류 증가
네이버 쇼핑에서의 오류는 무엇일까?


빠른편집
잦은 편집이 요구 된다면 편집 인터랙션이 쉽고 간편해야 함
Visual Cue, Static Cue!!



제약기법(http://www.pageflakes.com/)
불필요한 정보나 디자인 요소는 색상을 흐리게 표현
Modal/Modeless



그래픽 디자인/마케팅 디자인


단순함 (http://wholinked.com/)
메시지의 커뮤니케이션 효과 상승
"단순하게 만들 수 없는 것도 있다"-MIT 미디어랩, 존 마에다 교수




높은가시성(http://www.rssfwd.com/)
개념적 추론이나 회상 과정 없이 시스템 목적, 기능, 상태를 이해시킬 수 있어야 함




사용계기(http://dailyme.com/)
사용자가 특정 제품을 사용하게 되는 기회를 갖는 것
잠재 니즈를 자극할 수 있는 요소



서비스모델 전달하기(http://www.neurona.it/)

:::End:::

세미나를 마치면서...
디자인이라는 단어에 대해 다시한번 생각하게 되었다.
디자인 하면 "이쁘다, 아름답다"를 떠올렸다.
하지만 디자인의 사전적 의미만 보아도 주어진 목적을 조형적으로 실체화 하는것 이다.
이쁘게 하는 것도 중요하지만 어떻게 설계하느냐가 훨씬 앞선 해결 과제다.

방문 목적을 분석해야 하고 요소들은 그 목적에 맞게 만들어졌는가를 따져야 한다.
예를 들면 버튼(Submit)은 정보전달을 해야하기 때문에 정확하게 표현되어야 하는데
심미성 때문에 작게 만들거나, 다른 그래픽 요소에 뭍혀버린다면 잘못된 디자인이다.

디자인!!
아무나 말할 수 있지만 아무나 할 수있는건 아닌 것 같다.

2007년 영화홈페이지의 트랜드를 뒤돌아보다. 카인드인포 디자인 팀장 서진수 (mrs@daum.net) ------------------------------------------------------------------------------------------ 제목만 들어도 새록새록 기억나는 멋있는 영화홈페이지. 웹디자이너라면 누구나 한두개 쯤은 있다. 하지만 이제는 좀 달라진 것 같다. 잘 만들긴 하지만, 예전만큼 기대가 되거나 화제가 되는 영화홈페이지가 잘 보이지 않는다. 2007년 영화홈페이지는 어떤 모습으로 변화하고 있는지 그 트랜드를 살펴본다. [목차] 1. 뜸해진 스페셜컨텐츠 2. 비슷한 레이아웃과 사이트맵 3. 아이디어 < 표현기법 4. 풀스크린 : 보다 넓게! 보다 시원하게! 5. 동영상, 그리고 모션그래픽 -마무리하며 1. 뜸해진 스페셜컨텐츠 예전에 비해 영화사이트에 볼거리가 없어졌다. 영화의 줄거리를 재가공한 스페셜스토리 라거나, 사이트 전반을 아우르는 인터랙티브한 컨텐츠, 게임 같은기본 영화정보 외의 크리에이티브한 컨텐츠를 요즘은 잘 찾아볼 수 없다. 이런 현상에 대한 원인은 여러가지가 있지만, 근본적인 이유는 그동안의 영화사이트, 그 속에 있다. 그동안 목적없는 스페셜컨텐츠가 많았다는 것. 즉, 제대로 기획되지 않은 의미없는 스페셜컨텐츠들이 낳은 결과라고 본다. 기발한 스토리텔링과 매력적인 인터랙션을 통한 상에서의 적극적 홍보컨텐츠였던 스페셜 컨텐츠가 언젠가부터, 당연히 메뉴 한켠을 차지하고 있는 <크레딧>메뉴 같은 존재가 되어 버린 것. 그러다보니 부실한 내용의 스페셜컨텐츠가 생기게 되었고, 이는 클라이언트와 엔드유저로 하여금 불필요하다는 인상을 준 건 아닐까 하고 생각해본다. 2. 비슷한 레이아웃과 사이트맵 똑같은 영화는 하나도 없다. 비슷한 장르라 해도 배우가 다르고 스토리가 다르다. 하지만 영화사이트는 이미지만 바꾸면 적용가능할것 같은 그런 사이트가 나타나고 있다. (조금 과장된 표현이긴 하다.) 좋은 의미로 해석을 하자면 체계화 되어간다라고 볼 수도 있지만 웹디자이너에게 영화사이트는 어떤 존재였던가. 그야말로 컨셉츄얼함과 크리에이티브함이 영화사이트의 매력 아니었던가!! 하지만, 요즈음의 영화사이트를 보면 너도나도 새로운 표현을 시도하던 2003~2005년의 작품들에 비해기법적인 표현 면에서는 퀄리티가 좋아졌을지 모르나, 컨셉적인 면에서 확실히 신선함이 떨어졌다는 것을 느낀다. 3. 아이디어 < 표현기법 최근에 오픈한 사이트들을 보면,인상깊은 컨셉을 표현한다거나 센스있는 아이디어가 돋보이던 예전에 비해 표현기법에 중점을 둔 영화사이트가 주를 이루고 있다. 컨텐츠보다 비주얼에 더 비중을 둘 수 있기 때문이기도 하고 웹디자인시장의 고퀄리티 평준화가 영화사이트에도 당연히 영향을 끼치는 게 아닌가 한다. 과거에 비해 영화사이트의 외형적인 퀄리티는 확실히 좋아졌다. 4. 풀스크린 : 보다 크게, 보다 시원하게!! 유저의 하드웨어 변화에 따른 트랜드변화라고 할 수 있겠다. 1024*768 해상도의 CRT 브라운관은 이제 옛시대의 유물이 된지 오래. 많은 사람들은 LCD모니터를 쓰고, 화면해상도도 엄청나게 넓어진 데다 WIDE가 대세란다. 그에 맞춰 작은 팝업창안에서 돌아가던 영화사이트가 화면을 가득 채우며 제작되고 있다. 큰 이미지가 사용되다 보니 용량에 대한 최적화가 더 어려워졌고,1024*768부터 1920*1200까지의 다양한 해상도를 모두 고려해야하는 새로운 과제도 생겨났다. 5. 동영상, 그리고 모션그래픽 영화사이트의 평면적이고 단순하던 모션이 화려하게 바뀌고 있다. 3d툴을 쓰지 않고도 공간의 느낌을 살려 표현하고, 어지간한 인트로영상 못지않은 화려한 웹페이지를 그려내며,심지어는 처음부터 끝까지 영상으로 전개되는 영화사이트도 나타나고 있다. 영상은 사운드와 비쥬얼이 결합된 가장 확실하고 친절한 전달방식이다. 영화는 기본적으로 고퀄리티의 영상소스를 제공하고, 그것을 잘 가공해서 웹에서 보여주는 컨텐츠는 아주 쉽고 효과적으로 유저에게 원하는 메세지를 전달할 수 있다. 다만, 예고편과의 차별성을 가져간다는 전제 하에서만 영상 컨텐츠는 의미가 있을것이며 그 트랜드가 지속될 수 있을 것이라고 본다. 마무리하며 2007년 영화사이트의 트랜드를 한마디로 요약하자면, "간결한 컨텐츠의 화려한 표현" 이라고 할 수 있겠다. 회의시간 중 간혹 농담삼아 이런 얘기도 한다. 이러다가 웹에이전시에서 웹용 예고편을 따로 만들어내지는 않을까.. 하고. 웹이라는 매체의 특징, 장점을 잊어서는 안된다고 본다. 인터랙, 실시간의 커뮤니티,일방적인 정보제공이 아닌, 유저로 하여금 긍정적이고 능동적인 피드백을 이끌어낼 수 있는 컨텐츠가 웹에는 존재해야 한다. 영화는 다양한 매체를 통해 홍보한다. 오프라인 홍보물과 예고편에서는 결코 불가능한 컨텐츠를 영화홈페이지에서 제공해야 그 존재가치가 성립될 수 있을텐데, 이 모든 과제는 제작하는 입장, 우리에게 있는 것 같다.

영화사이트가 인기를 얻기 시작할때는 "사이트가 성공하면 영화가 망한다"라는 이야기도 떠돌았는데 요새는 사이트와 영화성공여부는 전혀 상관이 없는것 같다.

영화 사이트들 거의 모두가 멋지고 잘 만들어졌지만 굳이 영화사이트에 들어가서 영화 정보를 얻을 이유가 없어졌다.

왠지 씁쓸하다. 열심히 만들어놓은 사이트가 아깝다는 생가도 들고...

파란이 리뉴얼을 했다
리뉴얼이 많은 포털중에 하나인 파란!!

파란을 자주 사용하지 않는다
나도 대중적인 사람이다 보니 네이버와 다음을 주로 사용한다.

그래도 가끔 포털을 중심으로 리포트 해야하는게 생기면 빼놓지 않고 찾는 사이트 인데
오늘 들어가보니 많이 바뀌어 있었다.

표면적으로 봐서는 파격적인 리뉴얼이다.
상단과 하단을 제대로 나누어 두었다.
그리고 로그인부분을 오른쪽으로 옮겨두었고...

이 두가지만 보아도 파격적이다.

왠지 첫 느낌은
파란의 어떤 서비스보다 뉴스를 중점적으로 보여주겠다라는 의도가 느껴졌다.

카테고리에 맞게 박스안에 잘 정리해서 넣어둔 컨텐츠들은 깔끔하기는 하지만 눈에 띄지 않는 것 같다.

많은 부분 고민하고 기획하고 디자인했을 것이다.
근데.. 이 알수없는 이질감은 무엇인지...

메인에서 해당사이트 로고보다 기사 좌측에 뜨는 이미지에 더 눈이 가버린다.
잘 생긴 베컴조차 부담 스럽다.

전체적인 느낌은 살빠진 야후~~

그래도 저걸 오픈했을때 모든 개발자, 기획자, 디자이너는 기뻤겠지....