본문 바로가기

전체 글131

XSmall UI에 대한 의견 6~7개 정도의 팟캐스트를 정기적으로 듣는데, 그 중 단 하나의 에피소드도 놓치지 않고 듣는 팟캐스트는 XSFM의 '그것은 알기 싫다(이하 그알싫)'가 유일하다. 2년 가까이 딴지라디오에서 방송을 진행하다가, 얼마 전 갑자기 독립했다. 내부에서는 오랜 기간 논의했을 수도 있지만, 그 사정을 모르는 청취자 입장에선 '갑자기'가 맞다. 어느날 방송에서 '그동안 그것은 알기 싫다를 사랑해주신 여러분 감사합니다' 같은 말이 훅 나왔으니. 방송 접는 줄 알고 얼마나 놀랬던지. 바로 이 그알싫에서 광고에 나오는 상품을 판매하는 쇼핑몰을 준비중이라는 얘기를 하더니 드디어 며칠 전에 오픈했다. 오픈 직후 방문만 했다가 일단 후퇴. (낮에 잠시 들어간거라) 그러다 오늘 퇴근길 지하철에서 방송을 듣다가, 오프닝 도중, 그.. 2014. 12. 11.
아이콘, 그 한 끗 차이의 중요성 페이스북에선가 연결된 링크를 따라 갔다가 아이콘 하나를 봤다. 화면의 글자 크기를 조절할 수 있는 아이콘인데, 보는 순간 잠시 'F? 이게 뭐지?' 했다가 아이콘 세 개를 순서대로 모두 본 뒤에야 의미를 깨달았다. 위 스크린샷에서 제목 아래 F 세 개가 바로 그 아이콘이다. 아마도 Font에서 F를 따왔겠지, 하고 짐작은 하지만 왜 하필 그랬을까? 그냥 '가' 혹은 굳이 영어로 써야겠다면 'A'가 쉽게 알아보지 않았을까? 2014. 3. 29.
시각장애인의 인터넷 사용에 관한 8가지 미신 프론트엔드 개발자가 일주일간 눈을 가린채 시각장애인이 인터넷을 쓰는 방법대로 써본 결과 알아낸, 시각장애인의 인터넷 사용에 관한 8가지 미신. 원문은 "8 Myths About How Blind People Use the Internet" 미신 1. 스크린리더는 링크 타이틀 텍스트를 읽는다 실제론 전혀 읽지 않더라고. HTML전문가인 제프리 젤드맨(Jeffrey Zeldman)에게 link title text를 써야하는 이유가 있냐고 물었더니 "아뇨! 쓰지마세요(No! Do not use)"라고 답변했다. 미신 2. 시각장애인은 텍스트 전용 브라우저를 사용한다.스크린리더는 웹브라우저를 위한 제품이 아니라 컴퓨터에 설치된 모든 어플리케이션에 대응하며, 따라서 시각장애인도 비장애인이 사용하는 것과 동일한 브.. 2013. 2. 7.
웹사이트 사용성 테스트를 개선할 수 있는 몇 가지 포인트 Smashing Magazine에 좋은 컬럼이 있어서 번역. 작년에 이 회사 직원들 사진과 소개글을 본 적이 있는데, 멤버들의 이력이 정말 다국적. 가령 프랑스에서 태어나 예멘에서 자라서 미국에서 학교를 다니고, 뭐 이런 식. 원문은 "Improving your website usability tests" 사용성 테스트 개선하기 내가 사용성 테스트를 시작하던 때에 했던 한 테스트에서 마우스를 쓸 줄 모르는 사랑스러운 할머님을 만난 적이 있다. 할머니는 커서를 다독이는 말을 하면서, 마우스를 계속 공중에 들어올려 화면을 가리켰다. 테스트를 끝내고도 아무것도 건진 것이 없긴 했지만, 그 할머니는 나를 손녀에게 소개시켜줄 "사랑스러운 소년"이라 생각했다. 참가자를 모집하는 명확한 기준을 세우는 것이 중요하다는.. 2013. 1. 13.
멋진 스케치를 하는 방법 스케치의 중요성에 대한 글을 번역하고보니 예전에 팀 내에 공유했던 글이 떠올랐다. 아이디어를 구체화할 때 스케치를 하는 이유와 하는 방법에 대해 적은 글이네요. 몇 가지 메시지만 요약하자면, 1. 스케치와 드로잉은 다르다. 스케치는 아이디어를 효과적으로 다른 사람에게 전달하기 위한 수단이다.2. 연한 색 마커로 기본 바탕을 그리고, 그 위에 짙은 색 마커나 펜으로 세부사항을 덧붙여나가라.3. 긴 선을 그릴 때는 팔꿈치를 사용하지 말고 어깨 전체를 움직여서 선을 그어라. 출발 부분과 끝 부분에 점을 찍고 두 개를 이으면 직선을 긋는데 도움이 된다.4. 팝업이나 레이어 창은 포스트잇을 이용해서 표현하라. (메시지보다 포스트잇이 크면 잘라내라)5. 한 부분을 여러 방법으로 스케치하거나, 특정 부분만 추가하려고.. 2013. 1. 8.
화면설계(Wireframe)이전에 스케치를 먼저 하는 것이 중요한 이유 이 글은 UX Movement가 선정한 2012년 UX 컬럼 Best 5 중 "Why it's important to sketch before you wireframe"을 한글로 번역한 것입니다. 왜 화면설계 이전에 스케치를 먼저 하는 것이 중요한가. 웹사이트 혹은 어플리케이션에 대한 아이디어를 떠올려본 적이 있는가? 아이디어를 생각해내는 것은 쉽지만, 정작 어려운 부분은 그 아이디어가 어떻게 사용자 인터페이스로 자리잡을지를 이해하는 것이다. 바로 이 지점에 스케치가 유용하다. 스케치는 창의성과 건설과 연관있는 많은 직업에서 이뤄진다. 심지어 레오나르도 다빈치도 그의 발명품을 만들기 전에 스케치를 했다. 당신이 얼마나 똑똑하든지 간에 머리 속에 있는 단순한 아이디어를 정리하지 않고 바로 구현하는 것은 불.. 2013. 1. 8.
왜 스크롤이 새로운 클릭인가 이 글은 UX Movement가 선정한 2012년 UX관련 컬럼 베스트 중 하나인 "Why scrolling is the new click"를 한글로 번역한 것입니다. 어느쪽이 사용자에게 더 좋을까? 스크롤하기? 혹은 클릭하기? 이것은 페이지 흐름을 디자인할 때 반드시 생각해봐야할 질문이다. 클릭은 사용자에게 새로운 페이지로 이동하는 링크를 제공한다. 스크롤은 모든 컨텐츠를 다른 영역으로 나누어 한 페이지에 담아 제공한다. 여러 해 전에는 클릭이 이 질문에 대한 간단한 해답이었다. 만약 한 페이지를 너무 길게 만든다면 사용자는 위쪽 절반만 보고, 읽은 뒤 아래쪽 절반은 스쳐가듯 보거나 무시한다는 게 일반적인 생각이었다. 오늘날은 많은 것이 변했다. 많은 사용자들이 화면 맨 아래까지 스크롤해서 내려가고, .. 2013. 1. 7.
왜 '여기를 클릭하세요'라고 링크를 지정하면 안되는가 이 글은 UX Movement가 선정한 2012년 UX관련 컬럼 베스트 중 하나인 "Why your links should never say "Click Here""를 한글로 요약한 것입니다. "클릭"은 마우스에 너무 초점을 맞춘다. "클릭"이라는 단어를 사용하는 순간 사용자의 관심은 인터페이스에서 마우스로 옮겨간다. 링크를 클릭할 때 전혀 불필요한 주의를 불러일으키는 셈. 인터페이스와 컨텐츠에 초점을 맞춰야할 순간에 사용자 스스로, 그리고 사용자의 마우스로 주의를 옮길 뿐 아니라, 사용자가 링크가 뭔지 모르거나 마우스를 사용할 줄 모른다는 느낌을 준다. "클릭" 대신 사용자의 과업(task)과 연결된 동사를 사용하라. "클릭"을 사용하면 사용자는 마우스를 생각하지만, 과업과 연결된 동사를 사용하면 사용.. 2013. 1. 4.
대선 3일전, 주의할 점이 뭐냐는 질문에 대한 유시민의 답변 아래 녹취록은 3차 대선후보 TV 토론 평가와 선거 전망이라는 주제로, 문재인 후보 캠프에서 유시민 전 장관과 함께 대담을 한 방송의 후반부에 나오는 문답입니다. 유시민 전 장관(현 진보정의당 당원이죠)이 분명 장점과 단점을 동시에 가진 분입니다만, 저는 이런 면이 그의 최대 장점이라고 봐요. 사회자 질문: 오늘이 D-3이 남은 시기에 특별히 경계하고 주의할 점이 뭐가 있을런지요? 유시민의 답변:유세장 가면 태도를 결정하지 못한 유권자들도 가끔 있고, 심지어는 박근혜 후보를 지지하는 분들도 지나가다 보시기도 해요. 주로 문재인 후보를 좋아하는 분들이 많이 모이시죠. 누가 될지 모르는 선거인데, 혹시 박근혜 후보가 대통령에 당선될 경우 진심으로 축하하면서 새누리당을 위한 대통령이 아니라 온국민을 위한 대통.. 2012. 12. 17.