Simple is the best, Go to basic

웹서비스에서 대게 팝업창은 우리나라에서 아주 많이 쓰이는 요소입니다.

회원 가입시에도 ID중복확인, 닉네임중복확인, 우편번호 찾기 등에서 팝업창이 쓰이는곳이 있고

비밀번호 찾기 등에도 팝업창이 쓰이는 곳이 있습니다.

그리고

~가 설정되었습니다.
~가 완료되었습니다.
~가 취소되었습니다.
~가 아닙니다.
~를 해야합니다.

등등 가벼운 경고 메세지를 나타낼때 기존 alert 창이 미적요소가 없기때문에

팝업창을 쓰는 곳도 많습니다.


그런데 제가 궁금한건 이런 팝업창에 창닫기 버튼은 왜 만들어주는건가요?

분명 브라우저의 우측 상단에는 최소화, 최대화, 창닫기 이렇게 3개의 버튼이

항상 존재하는데 굳이 팝업창에 창닫기 또는 닫기 라는 버튼은 왜 만들어주는 건가요?

저는 Alt+F4와 Ctrl+W가 습관화되어서 마우스 클릭도 안하고 키보드로 창을 닫습니다만...



팝업창중에 닫기 버튼을 클릭시에 부모창에 특정 값을 넘겨줘야 하는경우에는

프로세스 로직상 뭐 그렇다고 이해할수 있지만


그렇지 않은 경우에 닫기 버튼은 왜 있는건가요?


닫기 버튼을 만드는 많은 디자이너 분들과 닫기 버튼을 스토리보드에 그려넣는 기획자에게 묻습니다.

정말 궁금해서 묻습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

웹2.0이 광풍이 휘몰아닥치면서 함께 급부상한 AJAX 라는 기술.

하지만 지금은 그 AJAX가 지금은 너무 많이 쓰여서 골치다.

AJAX 안쓰면 마치 큰일날듯이 그냥 툭하면 AJAX다.

게다가 여러 자바스크립트 프레임워크(prototype, jquery 등)의 인기와 손쉬운 사용법에 힘입어 AJAX의 열기를 부채질해주고 있다.



이러한 와중에 나타났던

"DOM 스크립트" 라는 책은

제목 위에 나타난 조금 작은 글씨에서 볼 수 있듯이

"다이내믹한 웹표준 사이트를 위한"

DOM 스크립트의 사용에 대해서 이야기 하고 있다.


무분별한 자바스크립트를 사용하는 개발자들에게 일침을 가했다라고 나는 생각한다.

일단 자바스크립트 없이 기능을 구현하고

그 뒤에 단계적으로 자바스크립트를 적용하여

자바스크립트가 없는 환경은 물론 자바스크립트가 사용가능한 환경에서는

정말로 다이나믹한 웹표준 사이트를 만들어주는

DOM 스크립트.



바로구입하러가기



바로 그 책의 저자였던 제레미키스의 또다른 책 "방탄 AJAX" 라는 책이 출간되었다.


윤석찬님이 말씀하신것과 같이

Ajax는 비동기 데이터 통신과 자바 스크립트를 기반한 기술이다. 따라서 필연적으로 문서 위주의 웹이 아닌 기능 위주의 웹 애플리케이션이 나오게 된다. 따라서 Ajax로 구현된 웹 사이트 대부분이 자바 스크립트를 끄면 동작이 안되고 검색 엔진으로 인덱싱 가능한 상태로 데이터를 보여 주지도 않는다.웹이 읽기 가능한 정보 전달 체계라는 기본 속성을 무시하는 것이다.

이를 해결할 또 다른 방법론이 있으니 그게 바로 Hijax이다. 이 방법론은 DOM 스크립트를 집필한 제레미 키스가 책 말미에 잠깐 언급한 내용인데, 기본 개념은 단계적 기능 개선(Progressive Enhancement) 및 축소(Graceful Degradation)시에도 동작 가능한 Ajax 개발 기법이다.

"방탄 AJAX"는 역시 이 부분에 대해서 정확히 언급하고 있다고 한다.

자바스크립트 없으면 그냥 무용지물이 되어버리는 어처구니 없는 사이트들에게 날리는 직격탄



바로구입하러가기


보지는 않았으나 무작정 강추하는 책이라

안봐도 괜찮은 책일거라 짐작되어 홍보 포스팅 날립니다.

저는 퇴근 후에 읽으러 가야겠군요.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

툭까놓고 얘기해보자 우리.

그래 롤링배너, 롤링콘텐츠, 롤링공지사항 왜 넣는거니?

넣으면 좀 예뻐보이니?

뭐가 좀 다이나믹 해보여?


롤링배너 및 롤링되는 콘텐츠는 장점이라고 굳이 꼽자면

같은 공간안에 좀 더 많은 콘텐츠를 사용자에게 보여줄수 있다는 것. 그것하나는 있는데 그거 말고는 다 손해야.


롤링되는 콘텐츠가 사용자를 답답하게 할수 있어

예를들어 A사이트가 자신의 공지사항 목록을 전광판 형식으로 롤링(그게 가로가되었든 세로가되었든)이 되게 해놓았다고 가정해보자.

사용자는 이 A사이트의 공지사항을 읽고 싶은데 가장 최근공지사항은 이미 전광판에서 롤링되어 넘어가버린거야.

그래서 그 롤링이 다시 원점으로 올때까지 기다려야되.

기다리기 귀찮아서 그냥 나가버리는거야.


또 다른 예를 들어볼까?

롤링되는 게시물목록이 있었는데 사용자가 우연히 그 롤링되는 게시물 목록중에

흥미있는 게시물제목을 봐서 클릭하려고 하는데 이런 클릭이 좀 늦어버렸네

그래서 전혀 엉뚱한 다음목록이 클릭되버린거야.

사용자는 짜증나는거지.



그래 거기서 생각이 좀 발전한 기획자는

롤링배너 주변에 버튼을 위치 시켜서 해당버튼에 마우스 오버하면 그쪽방향으로 다시 되돌아가게끔하기도하고

아니면 롤링되는 순간에 마우스를 오버시키면 롤링이 중지되게끔하기도 해.

하지만 그게 답이 아니야.

방향을 이동을 전환하는 기획 역시 지나간 콘텐츠가 나올때까지 해당 버튼위에 마우스를 오버한채로 기다려야한다는 단점이 있어.



그럼 어떻게 해야하냐고?

제일 좋은 방법은 롤링을 하지 않는거야.

특히 공지사항이나 이런 중요한류의 콘텐츠는 제발 롤링시키지 않길바래.

사용자는 어떤면에서 더보기라는 버튼을 클릭하기는 귀찮아하기도 하거든.


그럼 정말 쓰고 싶다면 어떻게 했으면 하냐고?

그럼 UX에 대해 연구도 많이하는 우리 웹포탈을 살펴볼까?

가장 대표적으로 네이버를 살펴볼께

네이버 메인에서는 정확히 1군데에서 롤링을 사용해.

바로 실시간검색어!



사용자가 네이버에 접속했을때 방금 스쳐지나간 실시간검색어를 보고 싶은데 롤링은 이미 지나간상태지.

그런데 실시간검색어에 마우스를 오버하면


이렇게 해당목록이 나와 물론 움직이지 않고.

그런데 살짝 아쉬운점은 1위부터 10위까지가 아니라 5개순위만 나온다는 점이야.

그래서 고작 5개의 순위를 더 보기위해

1~5위까지 보기라는 링크를 클릭해야하던가 더보기로 아예 페이지 이동을 해야되.

그럼 다음은 어떤지 볼까?


실시간 이슈에 마우스 오버시에 10개 목록이 다 나오거든.

이렇게 볼때 UX측면에서 다음이 네이버보다는 좀더 진일보하다고 할수 있지.

하지만 다음이 좀 아쉬운점은 더보기 링크가 없다는거?


웹은 개발자가 자신의 스크립트 능력을 뽐내는 곳도 아니라

디자이너가 그냥 예쁜 디자인을 입히는 곳이 아니라

기획자가 이렇게 하면 왠지 괜찮을거 같애 라고 시험하는 장소도 아니야.

사용자가 정보를 얻어가는 그런곳이야.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

오늘의 주인공 onfocus="this.blur();"씨와 a:visited를 소개합니다.

그럼 자기 소개를 들어보죠.


onfocus="this.blur();" : 안녕하세요 저는 온포커스는디스블러입니다. 제가 누구냐고요?

onfocus 이벤트가 실행되었을때 this.blur()함수를 실행하는 놈입니다.

잘이해가 안가니 좀 더 자세히 설명해달라고요?

사용자의 focus가 나에게 왔을때 생기는 점선테두리를 없애주는 역할을 하죠.

저는 아무것도 모르는 사장님이 링크가 걸려있는 글또는 이미지를 클릭할때 생기는 점선테두리가

보기 싫다며 없애라고 할때 저를 찾으십니다.

가끔 무신경한 웹디자이너도 밉상이라고 저를 불러주시곤 하죠.

웹개발자는 특히 저를 좋아하는건 아닌데(타이핑을 더해야하거나 ctrl+c, ctrl+v를 귀찮게 해야하니깐요)

사장님이나 웹디자이너분들이 요청하면 저를 찾으십니다.

웹기획자는요? 절 모르는 사람도 많고 다른쓸데 없는 부분에 신경쓰는라 저 잘 안찾아요.

근데 저를 왜그리 많이 찾는지 바빠죽겠어요.

저를 사용하면 사용자는 내가 뭘 클릭했는지 현재 포커스가 어디에 있는지 알수가 없어요.

특히 키보드를 이용해서 웹사이트를 이용할 경우에는 포커스를 전혀 찾을수가 없어서

웹서핑이 불가능하다시피 하죠.

마우스놔두고 왜 키보드를 이용해서 웹서핑을 하냐고요?

키보드만 사용할수 있는 환경이 얼마든지 있을수도 있고요.

왜 그런거 있자나요. 지금 막 나갈려고 하는데 갑자기 마우스가 안되는거예요.

그냥 자료 딱 한개만 검색하면 되는데

그래서 키보드를 이용해서 탭키를 막 누르고 있는데

지금 탭키가 가르키는 곳을 전혀 알수가 없게되서

어쩔수 없이 컴퓨터 다시 재부팅하거나 귀찮게 해야되요.

근데도 그냥 저를 쓰면 좀 더 예쁜것 처럼 보이니깐 자꾸 부르더라고요.


a:visited : 안녕하세요 저는 a태그의 가상클래스 비지티드입니다. 제 소개를 하죠.

저는 사용자가 방문했던 사이트일 경우 해당 사이트의 링크가 걸린 엘리먼트에 적당한 스타일을 적용할수 있게끔 해주죠.

저도 분명히 하는 일이 있고 개성있는 녀석에다가 좀 괜찮고 쓸만한 녀석인데

요즘 만나주는 사람도 별로 없어서 좀 섭섭해요.

그냥 제친구들 a:link, a:hover, a:focus, a:active과 함께 a 라고 구별않고 부르시더라고요.

원 섭섭해서.

솔직히 왠만한데서는 저랑 제 친구들이랑 싸그리 하나로 묶어도 그냥 봐주겠는데요.

게시판에서는 저랑 제친구들을 정확히 구별해서 불러주세요. 그리고 모두에게 다른 옷을 입혀주세요.

저를 사용하면요. 사용자가 읽었던 게시물에는 그 게시물링크부분을 읽었다는 표시를 할수가 있어요.

그럼 사용자입장에서는 이 글은 내가 읽었던 게시물이구나 하고 다른 게시물을 찾아갈수 있거든요.

a:link {color:black} a:visited {color:gray} 이렇게 저랑 제친구를 구별해서 옷도 다르게 입혀주시면

사용자는 링크가 걸린 텍스트의 글자색은 검정색으로 보게되고

그중에서 사용자가 방문했던 링크일경우에는 회색으로 보게될거예요.

그럼 사용자는 그 많은 게시물중에서 자신이 읽었던 게시물인지 아닌지 쉽게 알수 있자나요? 그렇죠?

디씨인사이드, phpschool 등등 뭐 유명한 커뮤니티들은 저를 고맙게도 불러주시는데

정작 저를 불러야함에도 불구하고 모른척하시는분들이 많더라고요.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.