dsgnmstr; Design Monster

Blog

  • 특별한 경험을 만드는 방법

    특별한 경험을 만드는 방법

    와이프 할머님을 두고 돌아서는 차 안에서의 느낌은 참 운전하는 제가 사이를 떨어뜨리는 것 같아 참 마음이 무거웠습니다. 이때 운전하는 경험과 강릉의 바다를 보기 위해 가는 운전은 같은 경험일까요? 경험을 어떻게 구분을 해야 할까요? 참 이것이 고민이지만, 마음이 가는 것에 우리는 경험을 한다는 것에 이해가 되었습니다. 우리는 기억에 남는 특별한 경험을 제공하기 위해서는 타자를 지속적으로 만들어야 합니다. 반대로 익숙한 경험을 제공하기 위해서는 타자를 만들어서는 안 됩니다. 이것을 기억에 두고 글을 진행하겠습니다.

    어느 날 사찰 깃발이 바람에 나부끼고 있었다. 이 광경을 보고 두 스님이 서로 논쟁을 했다. 한 스님은 “깃발이 움직인다”라고 말하고, 다른 스님은 “바람이 움직인다”라고 주장했다. 서로의 주장만이 오고 갈 뿐, 논쟁은 결코 해결되지 않는다. 이때 혜능이 말한다. “바람이 움직이는 것도, 깃발이 움직이는 것도 아닙니다. 그대들의 마음이 움직이고 있을 뿐입니다.” 두 스님은 소스라치게 놀랄 수밖에 없었다.

    무문관

    불교는 일화로 가르쳐주는 구절이 많습니다. 지금의 입장에서 봤을 때도 유의미한 인간에 대한 통찰을 보유하고 있는 것 같아 사례로 가지고 왔습니다. 저는 매일 아침에 일어나 씻고 준비해서 사무실로 대중교통을 이용해 이동합니다. 이것이 지금 6년이 넘어가고 있습니다. 이 과정에서 기억에 남는 날이 있을까요? 내 생활 습관에 자리 잡은 경험은 기억에 나지 않습니다. 하지만 내 생활 습관에 자리 잡은 경험이 아닌 다른 경험을 제공한다면, 기억에 남습니다. 이것은 마음이 움직이는 원리라고 생각합니다.

    만약 깃발이 움직이지 않았다면 스님들은 논쟁을 시작했을까요? 시작조차 못했다고 봅니다. 깃발이 평소와 다르게 흔들리고 있어, 눈에 띄었을 것입니다. 마음이 움직인 것을 말한 혜능은 이 지점을 짚었다고 생각합니다.

    일상 경험

    여러분들이 어떤 서비스를 기획하는지 몰라 일반론으로 말씀을 드리자면, 최고의 UX는 느껴지지 않게 목적을 성취하게 하는 것입니다. 금융 앱으로 송금을 한다고 했을 때, 우리 머릿속에는 보내는 사람의 정보(은행과 계좌번호)와 보내는 금액을 머릿속에 떠올리면서 진행을 하게 됩니다. 그렇다면 여기서 UX/UI가 눈에 띄면 목적을 실패한 것입니다.

    그래서 여러분들이 설계할 서비스의 앱의 목적을 정확하게 파악하셔야 합니다. 그리고 부수적인 것들이 사용자에게 거슬리게 한다면 사용자는 불편함을 느낄 것이고 이것이 지속되면서 짜증으로 바뀔 것입니다. 이를 방치해두면 대안이 생기는 순간 여러분의 서비스를 찾지 않게 됩니다.

    따라서 목적에 수단으로 존재할 수 있는 UX/UI를 설계하셔야 합니다. 앞서 말씀드렸던 것처럼 생활 습관에 스며들 수 있도록 해야합니다. 내용은 항상 형식에 지배를 당합니다. 따라서 형식 즉 UI 디자인도 시대에 너무 뒤떨어져도 눈에 띄고 너무 앞서 나가도 눈에 띄는 효과를 만들어 냅니다. 시장에서의 역할을 먼저 파악하시고 전략을 세워 큰 기조를 만드시길 바라겠습니다.

    특별한 경험

    놀이 공원에서 일반적인 경험을 제공한다면 놀이공원이 성공할 수 있을까요? 할로윈 데이를 제외하고 코스프레 혹은 이상한 복장으로 돌아다니면 어떻게 될까요? 특별한 상황을 용인하는 시간과 장소가 있습니다. 이는 일상 생활이 루틴하다는 이야기와 같은 말입니다. 여러분이 앞서 일상적인 경험을 제공하는데 성공한 것과 흥행은 다른 이야기입니다.

    UX/UI가 좋다고 해서 사용자들이 절대로 몰리지 않습니다. 사용자에게 2가지를 제공해야 서비스를 이용한다고 봅니다. 사용자에게 이익이 되거나, 재미있거나 이 두가지를 모두 충족한다면 더할 나위 없이 좋은 조건입니다. 하지만 이렇게 만들었다고 생각하는데도 사용자들이 오지 않는다면 이벤트 혹은 마케팅을 심각하게 고민해봐야 합니다.

    눈에 띄는 경험을 제공하면 사람들에게 관심을 환기시킬 수 있습니다. 예를 들어 50% 특가 할인이라는 마케팅으로 배너를 클릭해서 들어가보면 1,000가지의 상품 중에서 1가지 그 중에 제일 안팔릴 것 같은 것만 50%하거나, 아니면 추첨 이런식으로 사용자를 끌어들입니다. 일반적인 홍보 방법으로는 사용자에게 일반적으로 다가가는 결과를 초래합니다. 물론 아무것도 안하는 것 보다는 좋은 결과를 만들긴 합니다. 따라서 눈에 띄는 차별점이 신선하게 다가갈 수 있도록 경험을 설계해야 합니다.

    대비

    절대로 우리는 하나만을 볼 수 없습니다. 항상 비교를 해 우리에게 들어온다고 보입니다. 예를 들어 처음 마시는 커피는 핫초코보다 쓰다. 달지 않다라는 생각을 하게 됩니다. 항상 비교 지표로서 우리는 주변의 사물에 영향을 항상 받으면서 생활합니다. 그리고 우리의 경험의 범위가 넓어지면 넓어질 수록 나를 더 잘알 수 있는 발판이 마련됩니다. 대비를 이야기하는 이유는 항상 어떤 것과 비교하게 됩니다. 그렇다면 특별한 것은 일상적인 것에 대비입니다. 이를 잘 생각해서 여러분의 서비스에 반영해서 목적을 달성하시길 바랍니다.

  • 내가 시간 관리의 왕이다.

    내가 시간 관리의 왕이다.

    시간은 흘러가는 강물 같습니다. 한번이라도 같은 강물에 담글 수 없습니다. 우리가 발전을 위해 살아가지 않아도 됩니다. 그냥 존재로 아름답게 빛날 수 있습니다. 하지만 사람이라 노동을 통해 수입을 벌어야 살 수 있으니 우리는 일을 해야 합니다. 물론 자본 소득으로 돈을 벌고 계신다면 축하드립니다. 주어진 시간 안에 효율적으로 일을 끝날 수 있다면 얼마나 좋을까요? 그렇게 마음을 잡고 집중할 수 있게 만들어준 도구가 있습니다. 그것이 바로 타임 타이머입니다.

    남은 시간의 시각화

    타임 타이머는 아이가 시간을 볼 수 없다는 것에 착안해 남은 시간을 시각화한 시계입니다. 주방 시계랑 비슷하게 생겼습니다. 하지만 이것을 응용해 학습에 사용하겠다고 생각한 것이 좋다고 생각합니다. 여기서 한번 더 굴절이 들어갑니다. 목표를 정하고 남은 시간을 시각화하면 터널링 효과가 생깁니다. 그래서 이것을 활용해 구글에서 스플린트를 진행할 때 핵심 도구로 사용하면서 유명해졌습니다.

    스플린트는 시간을 정해놓고 목적한 일을 달성하는 것입니다. 이를 좀 더 상세하게 설명하면, 회의는 시간이 늘어지기 마련입니다. 타임타이머를 돌립니다. 그리고 남은 시간을 시각적으로 확인하고, 좀 더 집중해서 회의를 진행합니다. 언제까지 타임타이머에 남은 시간까지 회의를 진행합니다. 그리고 기획을 할 때도 타임타이머를 돌려서 기획하고, 이것을 통해서 디자인을 하고, 프로토타입을 개발할 때에도 이 타임타이머를 돌려서 진행합니다. 이렇게 시간을 타이트하게 측정하는데 사용되는 도구입니다.

    위와 같은 기능을 할 수 있는 이유는 명확합니다. 남은 시간을 명확하게 보여줄 수 있기 때문입니다. 그리고 시간이 다 되었을 때, 빕 사운드로 사용자에게 알려줍니다. 시간을 시각화한 도구는 많습니다. 해시계, 손목시계, 전자시계… 하지만 남은 시간을 알려주는 것은 특별한 기능이 아닙니다. 하지만 남은 시간 만을 알려주는 시계는 많지 않습니다. 그리고 이것을 남은 시계를 직관적인 시각화로 합니다.

    파이 차트 VS 숫자

    숫자는 직관적이지 않습니다. 1이 클까요? 2가 클까요? 그럼 1234583932가 클까요? 1234583952가 클까요? 숫자는 객관적인 지표로서는 최고의 도구입니다. 하지만 사고 과정을 거쳐야 하기 때문에 직관성에서는 거리가 있습니다. 반대로 차트, 그래프를 보면 숫자를 비교하기 편합니다. 그리고 추세를 확인하기 편합니다. 데이터 시각화가 의미있는 지점이 여기에 있다고 생각합니다.

    대시보드를 나중에 다루게 될 건데, 가장 중요한 것이 현상황을 이해하는 지표를 어떻게 시각화하는지가 가장 중요한 요소입니다. ‘무엇을 보여줄 것인가’라는 편집 영역의 문제가 대두되는 것입니다. 여기서 이런 지식이 있으면 편하게 고객과 커뮤니케이션할 수 있으리라 생각합니다. 수치의 차이를 시각적으로 보여줄 때 원 그래프를 사용할 것인지 혹은 막대 그래프를 사용할 것인지에 대한 숙고가 있어야 합니다.

    직관성

    여기서 숫자를 보여주는 전자 초시계보다 타임타이머가 가지는 시각적 직관성과 조작의 직관성은 타의 추종을 불허합니다. 중간에 있는 요 작은 것을 원하는 방향으로 돌리기만 하면됩니다. 그러면 시간이 저절로 줄어들게 됩니다. 그리고 빨간색으로 시각적 집중도를 높여서, 더 효율적인 업무를 처리하는 것만 같은 느낌을 받습니다.

    구매처

    저는 아마존 직구를 통해서 구매해서 2년 넘는 시간 동안 잘 사용하고 있습니다. 요즘에는 11번가에 파는 것 같더라고요. 좋은 물건입니다. 한번 경험해보세요.

  • 돌고도는 회전 모티브 인터페이스 Best 5

    돌고도는 회전 모티브 인터페이스 Best 5

    인류가 많은 빚을 지고 있는 기술이 있습니다. 바로 원으로 회전을 하는 기술입니다. 수레의 바퀴부터 시작해, 나사, 모터, 엔진 그리고 마우스 스크롤에 이르기까지 우리가 편리하게 사는 문명에 회전 운동을 활용하고 있습니다. 회전 운동의 재미있는 점은 계속 직선으로 가는 듯 보이나 어느 센가 원점으로 돌아간다는 것입니다. 우리의 인생도 절벽이라고 생각하는 좌절의 순간들이 있습니다. 하지만 그 지점이 제가 얼마나 깊은지 가늠할 수 없으나, 여러분들이 이겨내고자 한다면 반드시 이겨낼 수 있을 것입니다.

    인생은 회전목마 제가 좋아하는 음악 중에 하나입니다. 뭔가 정말 돌도 도는 느낌? 왈츠 느낌이라고 해야 하나요? 여하튼 이 노래를 들으면서 시작하고자 합니다. 회전운동 내지는 원운동을 인터페이스에서 사용하는 경우가 많습니다. 그중 가장 잘 사용했다고 생각되는 사례를 5가지 정도 설명하고자 합니다. 물론 여러분들도 다아는 것이지만 제가 선정한 이유를 한번 들어봐 주시겠어요?

    1. 자동차 핸들

    자동차 운전은 참 재미있습니다. 운전면허를 따고 운전을 하고 싶어 아버지 몰래 아버지 차를 끌고 나간 적도 있고, 연인에게 잘 보이기 위해서 차를 가져가 후진할 때 그 알죠 뭔지. 자동차는 20C 대표 산업답게 20C의 모든 것이 들어있습니다. 아니 정확하게 말해서 21C까지 개발된 모든 기술들의 집합체라고 할 수 있습니다. 기원전에 발명한 바퀴부터 지금은 컴퓨터 역할을 하는 부품까지 들어가 있으니까요. 그래서 제조업의 끝판왕이라는 별명이 괜히 붙은 산업이 아닙니다.

    지금은 자율주행 시대로 가는 초입에 있습니다. 자율주행이 되면 당연히 핸들도 숨겨졌다 나왔다 하지 않을까요? 아니면 큰 방향만 설정할 수 있게 조이스틱으로 변하지 않을까요? 수동으로 운전하는 지금은 자동차 핸들을 통해 가는 방향을 정합니다. 핸들을 좌로 돌리면 좌측으로 이동할 수 있고, 우로 돌리면 우측으로 이동할 수 있습니다.

    이렇게 직관적일 수 있을까요 왼쪽으로 가고 싶으면 왼쪽 오른쪽으로 가고 싶으면 오른쪽, 회전의 정도에 따라 회전 반경이 정해지는 이런 환상적인 직관성 때문에 자동차 핸들을 회전 모티브 인터페이스에 뽑았습니다.

    2. 나사선

    나사선이라고 하는 것은 회전 운동을 수직운동으로 바꿔주는 기술입니다. 공구함에서 가장 많이 쓰는 장비 중 하나인 것이 +자 드라이버인 것을 보면 범용성에서도 높은 점수를 줄 수 있습니다. 나사선은 나사에서만 쓰이는 것은 아닙니다.

    여기에서만 쓰이는 것이 아닙니다. 만년필에 잉크를 채워보신 적이 있으신가요? 만년필 컨버터에 잉크를 채울 때 피스톤 운동을 하게 하는 것이 나사선입니다. 돌리면 위아래로 움직이는, 다소 직관적이지는 않지만 일상생활에 많이 침투해 있고, 인터페이스로서의 가치도 높다고 판단해서 나사선을 회전 모티브 인터페이스에 뽑았습니다.

    3. 손목시계의 용두(Crown)

    아날로그시계를 차 보셨나요? 이제는 남성들의 재력을 나타내는 상징이 된 손목시계 말입니다. 하지만 손목시계는 애플 워치 혹은 갤럭시 기어처럼 웨어러블 디바이스의 한 축을 담당하는 스마트워치의 마더 모델입니다. 여기서 과거 손목시계에서는 용두가 중요한 역할을 했습니다. 전기를 사용해 모터로 무브먼트가 돌아가지 않을 때 더더욱 중요한 역할을 했습니다. 시간을 맞추는 역할을 용두가 했기 때문입니다.

    용두는 돌리는 방향에 따라 분침이 움직이거나 기능이 많은 모델에서는 시침 혹은 다른 나라의 시계들까지 만질 수 있게 되어 있습니다. 그야말로 미세 공업의 끝판왕입니다. 시계를 맞출 때 전문가를 제외하고 내가 돌리는 방향이 어디로 갈지 몰라 항상 위로 돌렸다 아래로 돌리고 아래로 돌렸다 위로 돌리곤 합니다. 이것이 조금 불편한 지점이긴 하지만 용두를 위아래로 돌리면 분침이 회전을 하게 됩니다. 돌아가는 회전운동의 맥락은 유지했지만, 직관적이지 않아 오류를 많이 일으킵니다.

    이 용두를 적용한 스마트 워치가 있으니 바로 애플 워치입니다. 실제로 이것은 시간을 맞추는 데 사용되지 않습니다. 마우스 휠과 같이 UI를 위아래로 움직이게 하거나, 줌인 줌 아웃하는 기능을 합니다. 아날로그시계의 용두보다 애플 워치의 용두가 더 직관적인 이유는 용두를 움직이는 방향대로 UI가 따라오기 때문입니다.

    여기서 힌트를 얻을 수 있습니다. 사람이 생각하는 멘털 모델대로 UI 혹은 기계적 장치가 움직여야 한다는 교훈을 주는 것 같아 회전 모티브 인터페이스에 뽑았습니다.

    4. 마우스 휠

    마우스 휠이 없는 마우스 생각만 해도 끔찍합니다. 지금 이 블로그를 보실 분들은 다 마우스 스크롤을 통해 혹은 모바일의 터치 스와이프를 통해 스크롤을 하고 계실 것입니다. 초기 컴퓨터에서는 스크롤이 없었습니다. 당연히 우측 클릭 버튼도 없었지요. 하지만 지금은 반드시 3가지의 기능은 탑재해야 합니다. 좌클릭, 우클릭 그리고 스크롤 휠.

    마우스 휠에 대한 논쟁이 있습니다. 맥이 초래한 논쟁이기도 합니다. 여러분들은 스크롤 휠을 내릴 때, 손바닥 쪽으로 휠을 돌릴 때 화면이 하단 쪽이 보이도록 이동해야 한다고 생각하세요? 아니면 반대로 이동해야 한다고 생각하세요? 이거 가지고 논쟁을 벌인적이 있습니다. 물론 쓸 때 없지만 이 블로그에 쓰고 있네요…

    휠은 아래로 움직일 때 하단 쪽 콘텐츠를 노출하는 게 맞다고 생각합니다. 하지만 애플에서 나온 예쁜 쓰레기인 매직 마우스는 터치 인터페이스를 적용해서 반대가 맞다고 생각합니다. 마우스는 하나이지만 두 개의 방식이 존재하는 것이 참 어설프긴 한데, 제가 보기엔 이 방안이 제일 직관적입니다. 두루마리 휴지를 바닥에 두고 위로 올라오게 해서 실험을 하면 하단의 것을 보고 싶으면 아래에서 위로 합니다. 이것은 물성을 가진 터치가 들어갈 때의 이야기라고 생각합니다. 그리고 휠은 내가 가고 싶으면 내리는 것이고 올라가고 싶으면 올리는 것이라고 생각합니다.

    5. iPod Classic, MS Surface Dial, 색상 휠

    아이팟 클래식의 충격, 제가 아이리버에서 아이팟으로 넘어갔을 때의 충격과 만족감은 이루 말할 수 없었습니다. 50G의 용량과 터치 클릭 휠 UI 그리고 플로우 커버 기능은 환상이었습니다. 그때 휠로 음량을 조절하고 좌우 버튼으로 음악을 이동했습니다. 리스트에서 하단으로 이동할 때 휠을 돌리면 움직였습니다. 다소 직관적이진 않지만 참신했습니다. 이 또한 아이폰이 잘 되면서 없어진 장비입니다.

    MS Surface Dial은 이와 같은 장비이나 옛날 라디오를 조작하는 방식으로 돌려가면서 사용하는 장비이다. 돌리고 선택하는 것을 하는 장비인데, 많이 성공한지는 모르겠다. 하지만 아이팟 클래식과 같은 UI 원리를 사용하고 있어서 가지고 왔다.

    마지막으로 색상 휠은 Adobe에서 선택하는 색 선택은 색상, 채도, 명도를 직관적으로 바꾸기 힘들다. 이 말은 색을 선택할 때 두세 가지 단계가 더 필요하다는 이야기이다. 반면 색상 휠 UI는 색상환을 돌면서 그 안에서 채도와 명도를 선택할 수 있는 권한을 줘 훨씬 더 직관적으로 선택할 수 있다.

    다음번에는 눈에 띄는 모티브가 있으면 이어가도록 하겠습니다.

  • 이제 전원을 끄셔도 됩니다… 의 추억

    이제 전원을 끄셔도 됩니다… 의 추억

    Feat. 므두셀라 증후군

    데스크톱과 뚱뚱한 모니터로 컴퓨터를 하던 시절, 저는 포켓몬스터 빵에 있는 스티커를 모으기 시작했습니다. 빵보다는 스티커가 더 가지고 싶었지요. 어머님께서는 제게 500원을 주시며 하루에 빵 하나를 약속하셨습니다. 물론 동생 것도 같이 사 오라고 했습니다. 동생과 손잡고 동네 사거리를 기준으로 빵을 파는 슈퍼란 슈퍼에는 다 둘러봤습니다. 빵은 사지도 않고 안에 스티커가 뭐가 들어있는지 유심히 보고 내려놓고를 반복하는 하루였습니다. 그때 포켓몬스터 게임을 하는 것이 소원이었는데, 우리 집은 디스켓이 이상한가 잘 되지 않았습니다. 그래서 저는 포켓몬스터 게임보다는 스타크래프트와 디아블로를 하곤 했습니다. 그때가 그립긴 하지만 돌아가고 싶지는 않습니다. 과거가 참 아름다워 보인다는 것은 뒤집어 생각해보면 지금도 아름다울 수 있기 때문입니다.

    이제 전원을 끄셔도 됩니다의 기원

    뚱뚱한 모니터를 사용한 적이 있나요? 회색 컴퓨터 화면에 타자 연습을 한 기억은 있나요? 컴퓨터 학원에서 타자 연습이 지겨워 바람의 나라 20 레벨 찍고 돈을 내야 하는데 돈이 없어 20까지만 키우시진 않으셨나요? 이때 컴퓨터에 전원은 안정적으로 공급하기 위해서 파워 스위치는 토글 버튼이었습니다. 토글 버튼을 모르시는 분들을 위해 간략하게 설명하자면 하나의 버튼으로 켜고 끄는 기능을 하는 것을 뜻합니다. 대표적으로 스마트폰의 전원 버튼이 그 역할을 하고 넓게 보면 천장에 있는 조명을 켜고 끄는 버튼도 토글 버튼입니다. 물론 켜고 끄는 위치가 다르긴 하지만 내부로 들어가 보면 스위치가 전기를 통하게 하고 통하지 않게 하는 역할을 하고 있습니다.

    지금은 데스크톱이나 배터리가 있는 노트북의 경우 그냥 컴퓨터를 끄면 자동으로 싱크가 맞아 들어가 컴퓨터를 꺼줍니다. 요즘은 모니터도 똑똑해져서 신호가 들어오지 않는 것을 확인하면 잠시 후 모니터의 전원을 대기 전원 모드로 돌려줍니다. 하지만 과거에는 스위치를 켜는 것이 전기를 들어오게 하는 신호였고, 반대로 한번 더 누르면 전기를 차단하는 역할을 했습니다. 따라서 컴퓨터의 저장장치나 기타 민감한 부품을 들 보호하기 위해서는 꺼도 된다는 신호를 모니터에 전달해줘야 했습니다.

    굴림체의 저주

    굴림체는 디자이너들에게 왜 사랑받지 못하는 서체가 되었을까요? 폰트에 개성이 없어서? 속공 간이 균일하지 못해서? 조형 대학에서 배우기로는 속공 간이 이상하고 행간 자간을 맞출 때 맞추기 어려우며 폰트의 균일한 밀도감이 없다고 배웠습니다. 하지만 과연 이런 문제만 고친다면 굴림체를 써도 괜찮은 것일까요? 아니 그보다 먼저 왜 굴림체를 많이 쓰게 되었을까요?

    거슬러 올라가보면 지금은 윈도즈 기본 글꼴이 맑은 고딕입니다. 하지만 과거에 윈도즈 95부터 기본 글꼴로 굴림체를 사용했는데, 이게 문제의 시작이라고 봅니다. 디폴트 폰트는 생각이 없이 서체를 선택했다는 것에 감점을 주기 시작한 게 아닐까?라는 가설 하나와 일본어의 히라가나, 가타카나와 달리 한글은 세종의 기획단계부터 각진 글꼴이 더 가독성도 좋고 조형적으로 훌륭하다. 하지만 문제의 굴림체가 일본의 나루체에서 기원했다는 설이 많습니다.

    그렇다면 시대의 풍조를 봤을 때 1세대 디자이너들은 일본에서 디자인이라는 학문을 수입해왔습니다. 다른 학문들과 마찬가지로, 그래서 나이가 지긋하신 교수님들의 일본의 평가를 보면 현재 20대와 30대와는 너무도 다른 것을 확인할 수 있습니다. 그리고 2세대 디자이너들은 한국의 형편이 나아져 해외로 유학을 갔다 온 사람들이 있습니다. 그런 분들이 일본의 그래픽 스타일과는 차별점을 두기 위한 노력을 기울였습니다. 하지만 한국의 디자인 스타일이 두드러지게 없다는 것이 문제이긴 한데, 그것은 다음 기회에 이야기하도록 하겠습니다. 그래서 이들에게 배운 30대 ~ 40대 디자이너들은 굴림체 ‘이런 거 쓰지 마’라고 배운 것이 아닐까 추측해봅니다.

    그럼에도 불구하고 굴림체는 요즘 뉴트로가 힙해지면서 다시 슬슬 눈에 들어오기 시작합니다. 뭐 좋은 현상인지 나쁜 현상인지 모르겠습니다. 하지만 확실한 것은 윈도 95 ~ XP가 지배하던 시절 대한민국의 경제적 우여곡절이 많은 시절, 월드컵이 있었던 시절의 우리를 회상하게 되는 것은 사실입니다.

    무드셀라 증후군

    과거는 왜 아름다운 것만 기억할까요? 그리고 왜 옛날에 만났던 사람이 그리워질까요? 왜 그때 헤어져야 했고 왜 그때 싸워야 했을까는 생각하지 않고 좋은 것만 생각나는 건 참 짓궂습니다. 억지로 미화하게 만드는 것인데요. 이것을 무드셀라 증후군이라고 합니다. 한 학자의 말로는 우리의 뇌가 과거의 기억 중 아름다운 추억만 남겨 두려 하기 때문이라고 합니다.

    제게 이제 전원을 끄셔도 됩니다 저 화면은 마치 잃어버린 시간을 찾아서의 마들렌 처럼 제 어린 시절로 점프시켜주는 매개체 역할을 합니다. 그때가 제게는 너무 아름답습니다. 이것은 저도 사람인지라 그렇게 보입니다. 하지만 그때로 돌아가고 싶지 않습니다. 제가 운이 좋아 추운 겨울에 따뜻한 곳에서 글을 쓰고 있습니다. 다시 운이 좋을 수 있을까? 아니 질문을 바꿔서 다시 과거의 고생을 다시 겪을 수 있을까? 저는 없습니다. 그래서 과거는 과거라고 생각합니다. 하지만 오늘이 춤추는 날이 아니면 없는 날과 같다는 니체의 말을 본보기 삼아 살고자 합니다.

    오늘이 최고의 날이 될 수 있도록 노력합시다~

  • 기획력을 빨리 올리는 최고의 방법

    기획력을 빨리 올리는 최고의 방법

    서양미술사를 배울 때 알아야 많은 것이 보인다고 했다. 박물관에서도 해당 유물의 시대적 배경 해당 형태로 생긴 이유를 알면 더 재미있어지는 이유와 마찬가지이다. 그럼 이렇게 모르고 볼 때와 알고 볼 때는 왜 느껴지는 게 다르고 몰입도가 다를까? 우리는 이유를 반드시 만들어야 하기 때문이다. 무엇을 하든 간에 우리는 이유를 붙인다. 예를 들어 날씨가 맑은 이유는 과거에는 조상님께 제사를 잘 지내서 그렇다. 지금은 고기압의 영향권으로 대기의 이동이 발생해서 그렇다. 이유가 과학적이건 미신적이건 우리는 이유를 붙여야 한다. 그냥 그러한 것은 못 참는다. 하지만 세상은 그냥 그렇게 생긴 것 아닐까? 내가 태어난 것도 우연이고 내가 나여야 하는 것도 우연에 산물이지만 우리는 이유를 찾아야만 한다. 이런 강박에서 벗어나야 하지 않을까?라는 생각을 해봅니다.

    원인과 결과

    세상은 인과율에 인해 흘러가는 것이 가장 자연스럽다고 생각합니다. 인과율은 원인이 있어서 결과가 생겨나는 것입니다. 과학에서도 하나의 원인과 결과로 떨어지는 상황은 많지 않습니다. 심지어 모든 변인들을 통제하는 실험실에서도 하나의 원인으로 하나의 결과로 떨어지는 상황은 연출되기 힘듭니다. 하지만 우리의 사고 구조의 한계라고 생각하는데, 결과가 발생했으면 우리는 원인을 찾게 됩니다. 제가 이 글을 쓰면서도 그 원인을 찾는 이유를 찾는 것 보면 저에겐 너무도 자명한 사실입니다.

    가령 아픈 사람의 원인을 찾는 것은 병원에서 찾습니다. 병원에서 원인을 찾지 못하는 경우에는 보이지 않는 존재를 소환해가면서 까지 원인을 찾으려고 하고 그 원인을 제거해 아픈 것을 제거하고자 합니다. 병원에서 의사와 마주할 때 아픈 것이 어느 정도 해소 되었을 때 왜 아픈 걸까요?라고 물으면 의사님들은 많은 변수들이 있는데 그중에 신경을 가장 많이 써서 그래요. 스트레스라고 이야기합니다.

    복합적 원인이 하나의 결과를 만들어 냅니다. 그 원인 모든 것을 합친다고 해도 같은 결과가 나올까요? 글쎄요….

    리버스 엔지니어링

    리버스 엔지니어링은 완성품을 역으로 추적하여 처음의 문서나 설계기법 등의 정보를 얻어내는 것을 뜻합니다. 가령 철학책을 읽을 때, 그 철학자의 호흡이 느껴지는 순간이 있습니다. 저는 제가 추측하는 철학자의 집필 의도와 하고자 하는 말과 근거가 딱 맞아 떨어질 때 그런 느낌을 받습니다. 이것이 왜 UX/UI 전문 블로그에서 이야기를 하느냐면, UX/UI 기획이나 디자인을 할 때 가장 필요한 능력이라서 그렇습니다.

    프로젝트를 할 때 많은 벤치마크 혹은 레퍼런스를 취합하게 됩니다. 이때 드러나는 현상만 보면 느낌만 가져가는 것입니다. 하지만 이 뒤에 숨어있는 것을 찾아내고자 한다면 많은 인사이트를 얻을 수 있습니다. 그리고 여기에 더해 뒤에서 어떻게 돌아가지, 콘텐츠는 어떻게 올릴까? 하드코딩인가 CMS인가? 를 고민하기 시작한 지점에서 기획자로서의 경험치를 많이 먹을 수 있었고, 결과적으로 레벨 업하는 계기가 되었습니다.

    기획이나 디자인을 잘 할려면 어떻게 해야 돼요?라고 질문을 했을 때, 항상 돌아오는 대답이 많이 보면 되라고 했습니다. 하지만 많이 본다고 해결되는 것은 아무것도 없습니다. 이유를 생각하면서 보십시오. 물론 저는 직관이 발달한 스타일이 아니라 이유를 붙이는 것일 수도 있습니다. 물론 제 선임들의 말이 맞을 수도 있겠지만, 제게는 발전의 사다리가 아니고 오히려 늪이었습니다.

    이유를 붙이는 능력과 추론을 하는 능력이 저는 같다고 생각합니다. 이 능력이 켜야 할 때가 있고 꺼야 할 때가 있습니다. 세상 모든 것에 이유를 찾아다니는 것이 얼마나 피곤한 정신상태를 만드는지 경험해봐서 알기 때문에 일상생활에서는 해당 기능을 끄셔도 됩니다라고 이야기합니다. 매사에 이유를 붙이는 것은 본인만 피곤하면 상관없는데 주변 사람까지 피곤하게 만듭니다. 본인이 이유를 알았을 때 주변 사람들에게 전파하고 싶은 욕구가 생기는 것 같더라고요. 여러분의 발전을 위해 몇 자 적어봤습니다.

  • 조이 스틱에 숨겨진 UI 법칙

    조이 스틱에 숨겨진 UI 법칙

    오락실에서 가장 재미있게한 게임은 무엇인가요? 저는 킹오프파이터즈, 철권 그리고 삼국지입니다. 이들 게임 모두다 조이스틱으로 방향을 조절해 하는 게임입니다. 조이스틱은 꽤나 직관적입니다. 직관적이면 배울 필요가 없고, 기억할 필요가 없습니다. 숙련의 기간만 거치면 누구나 능숙하게 할 수 있습니다. 너무 복잡한 서비스들이 많아져 우리의 삶을 편리하게 만들고 있지만, 직관적인 인터페이스가 늘어나지는 않습니다. 직관적인 것과 아름다움 사이의 어느 지점을 찾아야한다. 하지만 직관적인 인터페이스가 줄어들고 있다.

    조이스틱

    내가 어린시절에는 이런 오락실에 앉아서 위에 동전으로 예약을 걸어두고 게임을 하곤 했다. 내 친구 장모씨는 아침에 등교길에 게임을 하다가 지각하는 사태까지 만들 수 있는 실력을 가진 친구가 있었다. 물론 나는 그렇게 게임을 잘하지 못해 뒤에서 지켜만 보는 입장이었다. 조이스틱의 사용법을 아는 것과는 별개로 화면의 움직임에 따라 내 몸을 움직여 즉각적으로 반응하게 한다는 것이 참 어려운 일이 었다. 그때 그 친구를 보면 지금도 드는 생각이지만 물아일체의 경지다. 내가 가고싶다고 생각하면 조이스틱을 움직여 움직일 수 있다. 나는 피하고 싶어도 잘 안되는데…

    초기 조이스틱은 이렇게 생겼다.

    손 전체로 잡는 것이다. 그리고 좌측으로 주인공을 보내고 싶으면 왼쪽으로 힘을 줘 조이스틱을 기울이면 된다. 위로 가고 싶으면 상단 방향으로 조이스틱을 기울이면된다. 너무나 직관적이다. 그리고 여기서의 제약은 좌우상하만 움직일 수 있다. z축 인풋은 받아들일 수가 없다. 이 조작법을 모바일 터치 디바이스가 들어오면서 비슷하게 구현한 것이 이런 화면 본적이 있을 것입니다.

    가상 방향키(조이스틱) UI

    브롤스타즈와 lol wildlift에서 사용하는 방향 UI입니다. 보면 동전을 넣어하는 게임기와 구성이 조금 다를뿐 원리는 같습니다. 여기서 게임기의 버튼 보다는 더 직관적이 되었습니다. 왜냐하면 어떤 버튼이 무엇을 일으키는지 시각적으로 확인할 수 있게 되어있습니다.

    물리 버튼의 응용 사례

    아래 사례들은 조이스틱과 같은 원리로 인식합니다. 하지만 상하좌우에 더해 Z축 버튼 까지 같이 있습니다.

    iriver MP3

    2014년도 내가 가장 가지고 싶었던 물건입니다. 휴대폰 보다 노래를 너무 듣고 싶었습니다. 그때 sg워너비 Timeless가 어떻게 그렇게 좋던지…

    상하 버튼을 조작하면 음량 조절을 할 수 있었고, 좌우 버튼을 조작하면 이전곡, 다음곡으로 넘어갈 수 있었습니다. 그리고 내 기억이 맞다면 중앙 버튼은 메뉴를 호출하는 버튼이었습니다. 물리키 근처에 힌트를 다 배치해서 사용자들에게 혼란을 최소화 할 수 있는 방법을 선택했습니다. 이런 것을 사용자들은 배려라고 느낍니다.

    LG Monitor

    중앙 버튼으로 켜고/끄고 합니다. 그리고 메뉴는 화면에서 위와 같이 노출되며 좌측을 선택하면 입력을 고를 수 있는 구조로 되어있습니다. 모니터가 켜져있는 상태에서 중앙 버튼은 메뉴 호출/취소 기능을 한다. 여기서 재미있는 것은 화면에 노출된 모양으로 사용자에게 UI 조작의 힌트를 줬다는 것이다.

    이상 조이스틱과 관련된 UI를 확인해보는 시간이었습니다~

  • 모바일 뱅킹 착오송금 방지 UX/UI 법칙

    모바일 뱅킹 착오송금 방지 UX/UI 법칙

    항상 우리는 실수를 하면서 살고 있습니다. 실수를 안 하는 날을 찾는 것이 빠를 정도로 많은 실수를 저지릅니다. 그중 하나는 인터넷 뱅킹을 할 때 생깁니다. 돈을 잘못 보냈을 때, 돌려받기 힘들다는 점입니다. 물론 지인들이나 내 계좌로 옮길 때는 문제가 발생해도 수습할 수 있습니다. 하지만 내가 모르는 사람에게 보낼 때 일은 점점 커집니다. 그리고 착오 송금 지원제도가 실행되었지만 이는 사후적 대응입니다. UI에서 잘못 보내는 것을 방지한다면 우리 사회에 얼마나 많은 자원을 절약할 수 있을까요? 업스트림이 중요합니다. 이래서 문제가 발생한 이후 처리하는 것보다 문제가 발생하지 않도록 UX 구성하는 것이 가장 값싸고 편리한 해결책입니다.

    돈은 많은 가능성이 있는 물건입니다. 그래서 현대 자본주의 사회에서 많은 사람들이 바라는 것 중 하나입니다. 돈은 섬유로 만든 종이에 인쇄된 형태로 만들어져 있습니다. 이는 금본위를 채택한 과거부터 금본위를 파기한 지금까지 사용된 형태입니다. 종이는 가볍고, 많은 양을 가지고 있을 수 있습니다. 하지만 현재는 모바일 뱅킹이 대세가 되면서 현금 없이 카드와 모바일만으로 자본주의 사회에서 생활할 수 있습니다. 이때 문제가 발생합니다. 그저 숫자만 왔다 갔다 하면서 정말로 숫자의 가능성을 믿고 우리는 거래를 실행합니다.

    실물을 주고받을 때는 착오를 일으킬 가능성이 현저히 떨어집니다. 하지만 숫자로 비대면으로 송금을 할 때는 많은 오류가 발생합니다. 이는 사람의 공통된 특징입니다. 추상화된 것에서 많은 오류를 일으킵니다.

    KAKAO BANK와 토스 뱅크의 노력

    전문 디지털 뱅크의 노력은 아래와 같습니다.

    • 최근 내가 문제없이 보낸 계좌번호 리스트를 먼저 보여주며 선택할 수 있도록 합니다.
    • 은행 선택 후 선택한 은행을 지속적으로 노출합니다.
    • 이체 금액 입력 전에 사용자 이름을 검색해 누구에게 보내는 것인지 확인시켜줍니다.
    • 보내기 전 최종 확인을 수취인 이름으로 할 수 있게 되어있습니다.
    • 송금 이후 확인 및 다음 절차

    밑에 글을 읽기 전 여러분이 이체를 한다고 생각하고 해당 글을 보시면 많은 도움이 될 것입니다. 보통 이체할 금액, 계좌번호만 머릿속에 있으면 머리가 복잡해지지 않나요?

    1. 기존 송금 계좌 번호 노출

    제 경우를 보면 특별한 경우가 아니면 대부분 송금하는 사람에게만 송금하기 때문에 송금 첫 화면에서 계좌를 선택해 이체하게 됩니다. 이 경우를 보았을 때 사용자에게 편의를 제공하고 기존에 송금한 내역이 문제가 없다면 앞으로도 문제가 없을 가능성이 높으니 해당 UX는 사용자 품도 줄이고 안전하게 만든 장치입니다. 하지만 최근에 잘못 보냈는데, 그 계좌가 계속 최근 리스트에 노출되어 있다면 착오 송금을 또 만들 수 있는 계기가 됩니다. 따라서 최근 송금리스트에 가장 필요한 기능은 삭제 기능입니다.

    2. 은행 선택 후 선택한 은행 지속적으로 노출

    송금하겠다는 마음이 급하면 계좌번호를 빨리 넣고 싶어 집니다. 하지만 순서가 있는 법. 은행을 선택하고 계좌번호를 넣을 수 있게끔 설계되어 있습니다. 하지만 이때 앞서 말한 송금하겠다는 마음이 급하면 외운 계좌번호와 돈을 입력한다고 은행을 잘 보지 못하는 경우가 있습니다. 이때 이체할 은행을 은행 BI와 함께 은행명을 상단에 지속적으로 노출하면 착오 송금을 방지할 수 있게 됩니다.

    3. 금액 입력 전에 앞서 입력한 정보를 통해 수취인 이름 표기

    은행명과 계좌 번호만 있으면 수취인의 이름을 알 수 있습니다. 금액을 입력하기 전 단계인 상태에서 상단에 받는 사람 이름을 노출시킨다면 정말 큰 오류를 방지할 수 있습니다. 하지만 정말 우연의 일치로 잘못 보냈는데 받는 사람 이름과 같다면 우리는 그것을 오류로 파악할 수 없습니다. 받아야 될 사람이 못 받았다고 이야기하기 전까지는 알 수 없습니다. 이럴 확률은 거의 없습니다. 물론 이것까지 고려하면 더욱 좋은 UX/UI가 될 것이라고 믿습니다.

    4. 보내기 전 최종 알림

    보내기 전 최종 화면에서 반드시 확인해야 하는 정보는 수취인의 이름과 보내는 금액입니다. 다른 정보들을 어떻게 노출할 것인가는 사실 지금 이 두정보에 비하면 배부른 소리입니다. 수취인의 이름과 금액을 정확하게 사용자에게 인지시키는 마지막 기회입니다. 여기서 확인 버튼을 누르면 돈은 넘어가고 그때부터 돌려받기 굉장히 까다로운 상황에 직면하게 됩니다. 따라서 여기서 중요한 두 가지 정보 수취인의 이름과 송금하는 금액을 반드시 눈에 띄게 해야 하며, 이전에 이와 같은 팝업을 띄우면 절대로 안됩니다. 피로감 때문에 반사적으로 다음 혹은 완료 버튼을 누르는 순간 착오송금으로 넘어가게 하는 지름길을 만들어 놓은 것과 같으니까요.

    5. 송금 이후 확인

    송금 이후 확인 화면은 이체가 성공적으로 완료되었음을 알려주는 화면입니다. 여기에도 수취인의 이름, 금액 그리고 은행 정보 계좌번호 정보 등이 노출되면 좋습니다. 그 이후 송금을 했다는 것을 확인해달라는 차원에서 해당 메시지를 공유할 수 있는 버튼이 있으면 금상첨화입니다.

    여러분들은 이런 오류를 범하지 않았으면 합니다. 잘못 보내면 정말 가슴 아픕니다. 그리고 돌려받기까지 얼마나 많은 시간이 걸릴지 알 수가 없습니다. 이런 중요한 문제를 사전에 방지하는 역할을 반드시 수행해야 합니다. 이것이 가장 싸게 막을 수 있는 방법입니다.

  • 할인의 유혹

    할인의 유혹

    우리는 같은 수치의 이득을 더 좋아할까? 같은 수치의 손실을 더 싫어할까? 그 강도가 같을까라는 의문을 가져보면 이 글을 이해하는데 편합니다. 우리는 손해 보는 것을 더욱 싫어합니다. 할인은 항상 기간이 있습니다. 그 기간을 놓치면 우리는 손해를 본다고 생각합니다. 하지만 우리 돌아봅시다. 불필요한 물건을 사다 나른 적 없나요? 참 저도 이런 것을 알지만 필요하리라 생각해서 구매한 것들은 대부분 좁은 집에 부피를 차지하다 시간이 지나 없어지더라고요. 어떤 결핍 때문에 저는 할인만 하면 그곳을 쉽게 지나치지 못할까요?

    기간 할인은 강력하다

    지금 필요하지 않은 물건을 세일합니다. 40% 세일을 한다면 여러분을 그냥 지나치실 수 있나요? 여기에 악마 같은 말이 한번 더 붙습니다. 오늘까지 40% 세일입니다.라고 하면 저는 이성을 잃어버립니다. 합리적 소비자, 국부론에서 이야기하는 합리적 자아가 저를 인도하지 않습니다. 우리 집에는 그런 물건들이 너무도 많습니다. 묶음 할인, 기간 할인 등 먹는 것들은 사서 먹으면 어느 정도 해결되는데, 물건들은 계속 부피를 차지하는 것이 여간 짜증 나는 것이 아닙니다.

    왜 오늘까지 할인을 한다고 하면 저는 그곳을 못 지나칠까요? 오늘 6,000 원 하는 물건이 내일 10,000원으로 변하기 때문입니다. 그렇다면 그것은 나에게 4,000원만큼의 손해를 끼치는 것 아닌가. 그럼 나는 오늘 사는 것이 이득인 것이다. 근데 과연 이 계산이 정확한 계산일까요? 모릅니다. 하지만 사람의 마음을 움직일 수 있는 요령이 하나 생겼습니다. 손해 보는 느낌을 만들어 소비의 영역으로 사용자를 유도하는 것입니다.

    슈퍼마켓이 사라진 이유 Feat. 편의점의 시장 장악

    2000년대 초만 하더라도 대구에서는 많은 편의점을 볼 수 없었습니다. 아파트에 있는 슈퍼에서 간식거리를 샀습니다. 왜냐하면 20% 가격이 할인되어 있어 500원짜리가 400원으로 팔았기 때문입니다. 예나 지금이나 편의점의 특징은 24시간을 하며 가격 할인은 없었습니다. 편의점을 가는 이유는 삼각 김박에 끼워주는 커피나 음료를 사기 위해서였습니다. 근데 지금은 슈퍼가 없어지고 편의점만 많이 보입니다.

    그 이유는 편의점 사장님 입장에서는 너무 영업하기 편한 구조로 되어있습니다. 개점하기도 편하고 운영하기도 슈퍼에 비해서 너무 편합니다. 하지만 편한만큼 남는 비용이 없다는 것을 뜻합니다. 제공자 입장에서 살펴보면 슈퍼마켓보다는 편의점이 편하다. 하지만 사용자 입장에서 편의점을 보면 슈퍼마켓을 추월하게 된 계기는 덤으로 끼워주는 상품이라고 생각합니다.

    편의점은 체인 본부에서의 마케팅 전략인 1+1 전략으로 입지를 굳히기 시작했습니다. 그리고 삼각 김밥을 사면 오렌지 주스 700원짜리를 300원에 팔아 딱 천원이 떨어지게 만들었습니다. 저는 이 순간이 편의점이 슈퍼마켓을 넘어서는 발판을 제공했다고 생각합니다. 덤이지요. 근데 왜 50% 할인보다 1+1으로 마케팅을 했을까요? 여기서부터는 제 추측입니다. 제조사에서는 새로 만든 물건을 샘플로 다 주고 싶어 합니다. 그리고 제고가 쌓이고 버리게 되는 물건은 지옥이지요. 보통 1+1을 사면 나 혼자 먹기보다는 다른 사람들에게 하나 더 나눠주는 결과를 초래하게 됩니다. 따라서 더 널리 퍼질 수 있는 결과를 초래하는 것이 기업에서의 이익이라 생각해 지금까지도 1+1 마케팅이 진행 중인 것으로 보입니다.

    Appstore 할인의 유혹

    디지털 제품에도 마찬가지로 해당 법칙이 적용됩니다. 앱스토어에 유료 순위표가 한 번씩 출렁거릴 때가 있습니다. 그것은 바로 할인이 들어가서 필요하지 않은 앱을 지른 적은 없으신가요? 저는 스팀을 들어갈 때마다 고민합니다. 너무 가지고 싶은 게임들이 많아서…

    여러분 우리는 소비자로 삶을 살아가고, 소비를 통해 구원받는 느낌을 받습니다. 우리는 자본주의, 소비주의에 살고 있습니다. 기업이 우리를 현혹하는 가장 중요한 방법인 할인에 속지 말자 이런 뜻이 아닙니다. 내가 누군지를 정확하게 알아야 내가 원하는 소비를 합리적으로 할 수 있습니다. 모두 자신이 좋아하는 것을 찾아 자유로운 삶을 살길 기원합니다.

    https://media.giphy.com/media/67ThRZlYBvibtdF9JH/giphy.gif
  • 굿바이 플래시(feat. 웹 최적화)

    굿바이 플래시(feat. 웹 최적화)

    기성세대와 새로 등장한 세대의 격차는 신라시대부터 이어져오던 전통입니다. 이것이 왜 그럴까 생각해봤습니다. 기성세대가 되기 위해서는 아무것도 하지 않고 기성세대가 될 수 없습니다. 기성세대는 신세대였던 때가 있었고 그들은 어떤 어젠다 혹은 특징적인 문화 기술을 가지고 주도권을 쟁취했습니다. 그리고 그것이 표준이 되었고 기성세대로서 자리를 잡습니다. 그렇다면 기성세대는 언제 역사로 사라질까요? 새로운 세대가 같은 역할을 해 사회를 바꿀 때입니다. 따라서 이것은 순환되는 것이고 이것이 우리 사회의 활력이며, 이것이 역사를 쓰게 되는 원천입니다.

    대 플래시의 시대

    플래시는 언제 웹에 큰 비중을 차지했을까요? 제 경험을 뒤져보면 졸라맨, 엽기토끼, 오인용 애니메이션을 볼 때였습니다. 너무 행복했습니다. 그리고 지금 보면 이상하지만 플래시 게임을 하는 것 자체가 그 당시에는 너무나 큰 행복이었습니다. 지금으로 따지면 Youtube 키즈의 역할을 주니버 혹은 야후 꾸러기가 했던 시대이고, 아이들을 위한 플래시 애니메이션이 많았던 시기입니다. 엽기라는 키워드가 한창 떠들썩했을 때입니다. 이런 것들이 역사책이나 과거를 회상할 때 ‘플래시가 한때는 유행이었습니다’라는 한 문장으로 되는 것들이 너무나 안타깝습니다.

    그 시대는 지금 레저렉션으로 회자되고 있는 디아블로 2와 메트릭스로 세상이 떠들썩했습니다. 그때부터 올해 21년 1월 부로 서비스가 종료되었습니다. 플래시는 왜 사망선고를 받고 역사 속으로 사라질 수밖에 없었을까요? 일단 Flash가 인터넷 익스플로러와 단짝이었던 것만 기억해두면 모든 이야기가 풀립니다.

    인터넷 익스플로어 시대의 HTML 텍스트와 이미지 위주의 콘텐츠가 많아서, HTML 언어 자체를 업데이트해야 할 이유가 없었습니다. 표준 HTML 언어를 업데이트하는 W3C에서 업데이트를 하지 않았던 것입니다. 하지만 인간의 욕심은 끝이 없지 않습니까? 글보다는 이미지 이미지보다는 영상이 훌륭한 경험을 제공하지요. 이윽고 HTML 5가 되어서야 많은 멀티미디어(영상, 음악 등)를 HTML로 첨부할 수 있게 되었습니다. 그럼 HTML5 이전까지는 너무도 불편하게 영상을 Window Media Player나 VLC 플레이어를 통해 봐야 했습니다. 여기서 등장하는 것이 플래시입니다. 플래시는 HTML 위에 올라가기 쉬운 형태였고, 생각하는 모든 것(영상, 인터랙션 콘텐츠)을 구현할 수 있었습니다. 적어도 그 시대에는…

    달이 차면 기울 듯 플래시도 기울다. 그리고 모바일의 시대로

    플래시의 단점은 무겁다는 것입니다. 무거우면 당연히 속도가 나오지 못합니다. 그리고 플래시는 웹 표준에 맞지 않아서 무엇이 있는지 검색 엔진에서 알 수가 없습니다. 무겁고 머신리더블 하지 않습니다. 이것이 치명적인 단점이었습니다. 무겁다는 것은 모바일 시대가 도래할 상황에서는 치명적인 단점으로 작용했습니다. 그러한 이유로 아이패드와 아이폰은 플래시를 지원하지 않았습니다. 따라서 웹페이지가 뜨지 않으면 사용자들에게 오류처럼 인식됩니다. 따라서 기업들과 웹을 개발하는 사람들은 점점 플래시를 버리기 시작했습니다.

    그리고 익스플로러가 느리다는 느낌을 주는 것은 플래시 때문이었을까요? 너무 많은 버전과 레거시가 있어서일까요? 이때쯤 국내 기준으로 크롬 브라우저를 많이 사용하기 시작했습니다. 하지만 아직도 익스플로러를 기준으로 돌아가는 액티브 엑스 등 때문에 익스플로러를 사용해야 접속할 수 있는 웹들이 있습니다. 저는 개인적으로 한 시대를 풍미했던 기술들이지만 이제 역사 속으로 사라져야 앞으로의 기술 발전에 도움이 된다고 생각합니다. 모든 기술은 자멸하지 않는 이상 다음 대안이 없으면 이동하지 않습니다. 그때 마침 HTML5와 CSS3가 업데이트되었고, 이후 Java Script가 각광받기 시작했습니다.

    웹 표준을 지킴으로서 얻는 이득

    여러분들은 처음 들어가는 웹사이트를 찾을 때 어디를 들어가십니까? 저는 구글이라는 검색엔진을 사용합니다. 그럼 구글을 전 세계에 있는 등록된 모든 웹사이트를 알려줄 수 있도록 분류하고 체계화합니다. 이것을 크롤링이라고 하는데, 구글 검색엔진에 별도로 등록을 해야 검색 결과가 노출되게 합니다. 그리고 업데이트를 체크해 검색 결과에 뿌립니다. 당연히 사람은 못하는 일이고, 기계도 표준을 지키지 않으면 모든 예외사항을 처리하기란 불가능합니다. 먼 훗날에는 AI가 발달하게 되면 될지는 모르겠으나 지금은 표준을 맞춰 작업하는 것이 효율적입니다. 웹 표준을 지켜서 얻는 이득은 아래와 같습니다.

    • 다양한 디바이스에서의 접근이 용이해집니다.
    • 효율적인 접근이 가능해집니다.
    • 검색 엔진 최적화됩니다.
    • 다양한 브라우저에서 호환성이 높아집니다.
    • 관리하는 사람 입장에서 효율적인 관리를 할 수 있습니다.

    사람은 두발로 걷습니다. 왼발이 앞으로 전진하지 않으면 한발자국도 내딛을 수 없습니다. 반대로 오른발이 앞으로 갈 때 왼발을 뒤로 빠져줘야 합니다. 이렇게 우리는 기술을 발전시키고, 문명을 발달시킵니다. 플래시 그동안 고생 많으셨습니다~

  • 퇴로를 확보하라 – 실수는 인간적이다

    퇴로를 확보하라 – 실수는 인간적이다

    사람은 누구나 두려움을 가지고 태어난다. 그것은 생존에 유리한 도구였으리라. 지금은 우리를 공격하는 동물도, 우리를 얼어붙게 하는 추위도 도구와 기술로 우리를 보호하기에 이르렀다. 두려움은 경계 대상이 있어야 생기는 감정이다. 절대 여러분이 만들어놓은 서비스에서 이러한 경험을 제공하면 안 된다. 어떻게 여러분이 망가트려도 돌아갈 수 있고, 여러분은 아무것도 해치지 않았다고 말해주는 서비스를 만들었으면 한다.

    나는 어릴 적부터 모든 물건을 망가트리곤 했다. 그리고 그 망가트린 것들 중 가장 큰 것은 할아버지 2층 방에 있는 110v 난로였다. 7살인 내가 도저히 알 수 없는 변압기라는 존재는 참 어려웠다. 할아버지 난로에서 쌓여있던 담배연기가 나오는 것처럼 남색 송풍구에서 흰색 연기가 나왔다. 부모님은 상황을 수습하고 나한테 함부로 만지면 안 되라는 말을 하셨다. 물론 나는 그 말을 들을 리 없었다. 이후 많은 것들을 고장내고, 고치고를 반복했다. 그때는 과학자가 꿈이었다. 뭘 만드는 사람이 과학자라고 생각했던 시절의 이야기다.

    근데 그때 내 눈앞에 컴퓨터가 생겼다. 외삼촌의 컴퓨터에서 고인돌 게임을 하던 기억이 있던 컴퓨터는 키보드만 있었는데 이건 마우스도 있었다. 그리고 나는 그것을 만지고 싶었으나 너무 복잡했고, 슬기로운 생활 숙제를 하려고 하면 인터넷을 켜야 했는데, 그때는 컴퓨터를 켜면 바로 인터넷이 되지 않았다. 하이텔? 맞나 모르겠다. 그걸로 연결 신호를 보내고 연결을 받아야 겨우 야후라는 검색 사이트로 이동할 수 있었다. 물론 거기서 야후 꾸러기에서 숙제를 다 해결하곤 했다.

    근데 문제가 생겼다. 컴퓨터를 꺼야 하는데 안 꺼진다. 아빠가 가르쳐준 데로 했는데 안 꺼진다. 시작에서 시스템 종료를 눌렀는데 이상한 팝업이 뜨더니 꺼지질 않는다. 뭘 잘못 누르면 못 고칠 것 같은 생각이 들었다. 그래서 해당 팝업을 그냥 둔 상태로 아빠가 퇴근하기를 기다렸다. 아빠는 아무렇지도 않게 뚝딱뚝딱하더니 컴퓨터를 껐다. 그 이후 크고 둔탁한 플라스틱 박스는 내게 무서운 존재가 되었다.

    안 꺼지고 크고 둔탁한 물건은 언제 나에게 쉽게 다가왔을까? 그냥 컴퓨터 잘못되면 아빠 미안해요 글 쩍 글 쩍 하고 혼나야겠다는 마음을 먹고 컴퓨터를 막 만지기 시작했을 때다. 그리고 잘하는 친구 옆에서 하는 것을 보고 배웠으며 그 친구가 어떻게 해쳐나가는지 방법론을 배웠을 때 내 컴퓨터 조작 실력은 많이 늘었다.

    UX 이론 중에서 안전한 탐색이라는 개념이 있습니다. 사용자가 곤경에 빠지지 않을 정도로 UX를 설계해 진입장벽을 낮추고, 익숙하게 될 때까지 만져도 아무런 문제가 생기지 않도록 하는 방법론입니다. 이때 가장 중요한 것은 사용자 스스로 잘못을 인지하고 스스로 퇴로를 확보할 수 있도록 하는 것입니다. 이것을 어떻게 구현하느냐의 방법에는 크게 세 가지가 있습니다.

    1. 알럿 메시지

    제일 많이 쓰이는 방법이다. ‘다음 단계로 넘어가면 해당 단계의 내역은 저장됩니다.’와 같은 문구에서 하단에 네, 아니오 버튼이 있는 경우가 그 흔한 경우이다. 이것은 자주 써와서 너무나 위험하다. 여러분들 중 이 알럿 팝업을 처음부터 끝까지 다 읽으면서 하는 경우가 있는가? 그렇다면 다행이지만, 반복적으로 노출될 경우 피로감 때문에 팝업의 안내글을 안 읽고 무지 성으로 다음 버튼을 누르게 됩니다. 그러고 나서 어 이게 왜 이래 고쳐줘.라는 반응이 나옵니다.

    이건 누구의 잘못일까요? 사용자의 잘못이 아닌 해당 방식으로 UX를 기획한 기획자의 잘못입니다. 알럿이 많을 수밖에 없는 구조가 있다 할지라도 우선순위를 매겨야 하며, 사용자가 피로한 지 안 피로한 지 확인해야 한다. 보통 3회가 넘어가는 순간 피로감을 느끼며 그냥 넘기게 됩니다. 따라서 반드시 알럿은 3회 이상은 띄우지 말고 해결하는 것을 반드시 지키셔야 합니다.

    2. 아무거나 할 수 있는 보호 공간 Play Ground

    어린이 놀이터에서 흙을 만지고 노는 것은 놀이터 안에서만 가능합니다. 그리고 그 만들어진 모래 성은 그곳에서만 있습니다. 이와 같이 그곳에서의 행위는 그곳에서만 남고 실제 서비스에 저장되지 않는 영역을 만들어낸다. 그러면 사용자는 앱에서 사용할 수 있는 기능을 터득해 실제 사용에 아무런 문제가 생기지 않는다. 하지만 이는 사용자가 충분히 배우고자 하는 의지가 있을 때 가능한 것이다. 보통 이런 것을 튜토리얼이라고 하는데, 튜토리얼 마저 귀찮아 그냥 할래 라고 하는 사용자에게는 이 방법은 독이다.

    3. 행위마다 퇴로를 확보하는 법

    문서 작업을 하다 보면 컨트롤 Z는 정말 행복한 기능입니다. 모든 퇴로를 만들어 놓았기 때문이지요. 저는 인터넷에서 뭘 살 때 실수로 제 주소가 없어지거나, 회원 가입할 때 기껏 기입해놓은 정보가 사라질 때 제일 짜증이 납니다. 하지만 이것을 스텝으로 쪼개 놓으면 한 번에 저장된 정보가 없어지는 경우가 없습니다. 이는 설계자가 사용자를 얼마나 배려하는지를 볼 수 있는 척도입니다. 특히 컨트롤 Z가 안 먹히는 상황에서는 더더욱 필요한 방법입니다.

    자료가 더 모이면 2편을 만들어 보도록 하겠습니다.