과거의 웹사이트 제작은 마치 비영리조직 소개서를 만들 듯 조직의 정보만을 나열하는 것이 일반적이었습니다. 하지만 점점 더 많은 디지털 매체가 생기고 사용자의 관심을 유지하는 것이 어려워지면서 ‘사용자 경험’이 웹사이트 구축의 중요한 화두가 되었습니다.
이제부터 사용자 경험을 중심으로 어떻게 비영리조직의 웹사이트를 만들 수 있을지 단계별 절차와 방법론에 대하여 자세히 알아보도록 하겠습니다.
1. 사용자 경험이란 무엇이며 왜 중요한가
점심을 먹고 커피를 마시기 위해 커피포트로 물을 끓이는 상황을 생각해보겠습니다. 우리가 커피포트에 물을 끓이려고 버튼을 누를 때, 대부분의 제품은 소리가 나거나 불이 들어오곤 합니다. 우리는 그럼 “아, 정상적으로 작동하는구나”라고 생각하는데요.
그런데, 만약 소리를 내지 않거나, 불이 들어오는 기능이 없는 커피포트는 어떨까요? 아마, 버튼을 누르고도 정상적으로 작동하는지 확인하기 위해 손을 대보는 수고를 해야 하거나, 때로는 켜진 줄 알았는데 아니어서 시간을 낭비하게 될 수도 있습니다. 그 밖에도 디자인, 손잡이의 굴절 각도, 그립감, 손잡이의 재질, 커피포트의 무게, 물을 따를 때의 편리성, 커피포트가 놓인 위치, 당시 컨텍스트 등 수많은 요소가 커피포트를 사용하는 우리의 만족도에 영향을 미칠 것입니다.
사용자 경험이란 위와 같이 ‘제품 내외의 요소들이 영향을 미쳐 만들어내는 제품 사용 과정에서의 총체적인 경험’을 의미합니다.
사용자 경험은 왜 중요할까요? 위 예시에서의 두 제품이 ‘물을 끓인다’라는 기능 면에서는 다르지 않습니다. 산업이 발달하면서 많은 제품들의 기능이 상향 평준화되었기 때문입니다. 그 결과 제품 자체의 기능과 더불어 유희성, 심미성, 편의성, 감성 등의 총체적 요인들이 제품 선택에 큰 영향을 미치는 기준이 되었습니다.
2. 사용자 경험 중심의 웹사이트 제작 5단계
훌륭한 사용자 경험을 제공하는 웹사이트를 만드는 것은 어려운 일입니다. 하지만 그 과정을 단계별로 나누어 본다면 그 방법을 보다 명확하게 이해하실 수 있는데요.
사용자 경험을 디자인하는 과정은 5개의 층으로 이루어져 있습니다.
① 전략층 : 웹사이트 운영자가 얻고자 하는 것과 사용자가 웹사이트를 통해서 얻고자 하는 것을 정의하는 단계입니다. 가령, 비영리조직 홈페이지의 경우, 사용자를 설득하여 후원자로 전환하는 것, 사용자는 본인의 관심 주제에 대한 정보를 얻는 것, 혹은 가치관과 부합하는 조직을 후원하는 것이 해당합니다.
② 범위층 : 목표 달성을 위해 웹사이트가 어떤 요구 사항들을 충족시킬 것인지를 정의하는 단계입니다. 정보 중심의 서비스의 경우 정보를, 기능이 중심이 되는 솔루션의 경우 필요한 기능을 리스트업하는 단계입니다.
③ 구조층 : 리스트업한 요구사항들을 어떤 구조와 위계를 통해 제시할지 정하는 단계입니다. 예를 들어 정보들을 어떤 단위로 나눠서 페이지화하고 페이지는 어떻게 위계를 정하여 메뉴화할지 정하는 단계입니다. 웹사이트의 경우 구조층에서는 Information Architecture(IA)가 아웃풋으로 도출됩니다.
④ 골격층 : 컨텐츠 레이아웃, 인터페이스 등의 요소들을 설계하는 단계입니다. 추상적인 구조층에 비해 보다 구체적으로 표현되는 단계입니다. 가령, 후원하기 버튼을 어디에 배치해야 하는 것이 효율적일까 등을 고민하는 단계입니다. 웹사이트의 경우 골격층에서 와이어 프레임이 도출됩니다.
⑤ 표면층 : 웹사이트의 표면에 나타나는 글과 그림 등을 사용자의 시선을 고려하여 심미적, 효율적, 효과적으로 디자인합니다. 우리 기관의 키 컬러(key color)를 중심으로 통일성과 안정적인 느낌을 주는 웹사이트를 만드는 등의 활동이 그 예시인데요. 우리가 흔히 ‘디자인’이라고 할 때 떠오르는 활동들이 표면층에 해당합니다.
이 다섯 개의 층에는 두 가지 원칙이 있습니다.
첫째, 웹사이트의 구축은 추상적인 전략층부터 범위층, 구조층, 윤곽층, 그리고 가장 구체적인 표면층의 순서대로 이루어집니다. 따라서 전략층에서는 웹사이트와 전략의 부합 여부에만 관심을 가지며, 나중에 웹사이트의 겉모습 등은 표면층에서 고민을 합니다.
둘째, 위 층은 바로 그 아래에 있는 층의 영향을 받습니다. 즉, 표면은 골격에 의해 결정되며, 골격은 구조에 의해, 구조는 범위에 의해, 범위는 전략에 의해 결정됩니다. 따라서 전략층에서 발생한 문제를 간과하면, 위 층들에 영향을 줍니다. 그렇다고 해서 모든 문제를 각 층에서 완벽하게 해결하는 방법 또한 오히려 비효율적일 수 있습니다. 왜냐하면, 위 층에서의 논의가 아래층의 사항들을 재평가할 수 있는 계기가 되기도 하기 때문인데요. 이때, 이전 단계의 작업을 수정하게 될 수도 있습니다. 이처럼 각 층들은 양방향으로 긴밀히 연결된 구조입니다.
위 5개의 층은 사용자 경험 문제를 논의하고 해결책을 마련하는데 유용한 틀로 활용되었지만, 낯선 개념이라 어려우실 수 있습니다. 이제 하나씩 풀어서 소개하겠습니다.
1) 전략층, 웹사이트의 목표와 사용자 요구
훌륭한 사용자 경험을 제공하기 위한 첫걸음은 전략을 명확하게 정의하는 것입니다. 전략을 정의할 때는 두 가지 질문에 대한 답을 확실히 할 수 있어야 합니다. (1)우리는 이 웹사이트를 통해 무엇을 얻고자 하는가? 그리고, (2)사용자는 이 제품을 통해 무엇을 얻고자 하는가?
첫 번째 질문은 웹사이트의 목표를 도출하기 위해 필요한 질문입니다. 우선 웹사이트의 목표는 광범위하거나 너무 구체적이지 않게 균형을 맞추는 것이 중요합니다. 이를 위해서 웹사이트를 통해 해결하고자 하는 문제가 무엇인지 명확하게 정의하는 과정은 필수입니다.
웹사이트를 통해 얻고자 하는 것을 정의하는 단계에서 간과하기 쉬운 작업이 바로 ‘성공에 대한 정의를 내리고 지표를 설정하는 것’인데요. 향후 조직 내 커뮤니케이션과 의사결정을 위해서는 가령 ‘웹사이트 개설 이후 방문자가 후원자로 전환되는 비율 1%’와 같이 성공에 대한 정의를 내리는 작업이 필요합니다.
두 번째 질문은 웹사이트에 대한 사용자 요구를 파악하는 질문입니다. 웹사이트를 구축하면서 경계해야 할 행동 중 하나가 자신이 모든 사용자의 생각을 대변한다고 생각하는 것입니다. 사용자의 다양성을 반영하기 위해선 사용자를 여러 기준에 의해 세분화한 후 이에 대한 정보를 수집하고 그들을 이해하는 과정이 필요합니다.
이를 위해선 사용자를 관찰하거나 사용자에게 평가를 부탁하는 등의 다양한 조사 방법이 있습니다. 특히 사용자에 대한 감각을 잃지 않기 위한 방법으로는 페르소나를 설정하는 것이 대표적입니다. (페르소나는 특정 사용자 집단의 대표성을 지닌 가상의 인물을 의미합니다.)
가령, 동물보호단체라면 ‘3살짜리 강아지를 키우며, 동물 보호 문제에 관심이 많은 26살 여대생 김수진 씨’로 페르소나를 설정하고 그녀가 사용자 요구와 관련한 의사결정을 내리는 과정을 상상하는 것입니다. “김수진 씨라면 웹사이트에서 어떤 정보를 얻고 싶을까?” “김수진 씨라면 어떤 동물보호단체가 있는지, 어떤 활동을 하는지 궁금할 것이고, 만약 동물구조 사례를 사진, 웹툰 등으로 전달하면 김수진 씨는 도와야겠다는 마음이 더 커질 거야” 와 같은 방식으로 생각을 진행할 수 있습니다.
웹사이트의 목적과 사용자 요구를 파악하는 과정에서 팀 내부적으로 기억해야 할 단어는 ‘명시성’입니다. 위 과정에서 파악한 사실과 전략 설정에 대해 팀이 같은 그림을 공유하려면 이를 명시적으로 표현할 수 있어야만 합니다
2) 범위층, 요구 사항 정의와 우선순위 부여
전략층이 ‘이 웹사이트를 왜 만드는가’에 대한 답을 구하는 과정이었다면, 다음 단계인 범위에서는 ‘구체적으로 무엇을 만들 것인가’라는 새로운 고민이 시작됩니다.
범위를 명확히 정한 이후에는 특정 기능 또는 정보를 개발할 것인지에 대한 기준이 생기는데요. 범위층에서는 조직 내에서의 요구 사항과 함께 전략층에서 수집한 요구 사항들에 대해 정의, 선별, 우선순위 부여를 합니다.
요구 사항을 작성할 때는 (1)긍정적으로 작성할 것, (2)구체적으로 작성할 것의 두 가지를 기억해야 하는데요.
예를 들어, ‘사용자가 옷의 사이즈를 선택하지 않으면 결제창이 뜨지 않는다’라고 가정해보겠습니다. 이때 요구 사항은 위문장 그대로 서술하는 것이 아니라 ‘사용자가 옷의 사이즈를 선택하지 않아 결제창이 뜨지 않는다면, 옷의 사이즈를 선택하는 항목으로 이동시킨다’와 같이 긍정적으로 서술되면 더 좋습니다.
또한, ‘인기가 많은 상품은 사람을 강조한다’라는 문장은 ‘인기가 많다’와 ‘강조’에 대한 정의가 없어 구체적이지 않습니다. 이에 대해 내부적으로 정의에 대해 협의를 한 후, ‘사람들이 지난주 가장 많이 구매한 상품은 리스트 맨 위에 배치한다’로 바꾸는 것이 낫습니다. 요구 사항을 선별하고 우선순위를 부여하는 과정에서 조직 내 정치적 관계에 의해 왜곡된 선택이 일어날 수 있습니다. 따라서 최대한 전략층에서 세운 목표에 따라, 공정성을 유지하며 요구 사항에 대해 논의는 필수입니다.
일반적으로 비영리조직에서 외부 제작회사에 의뢰할 때 작성하는 RFP가 바로 이 ‘범위층’ 에 대한 서술이며, 요구 사항이 명확할수록 원하는 의도의 웹사이트가 나올 확률이 높아집니다.
예를 들어 ‘방문자를 늘리고 싶다’가 아니라 ‘네이버 검색에서 상위에 노출되고 싶다’, ‘후원자가 많아졌으면 좋겠다’가 아니라 ‘결제 페이지의 전환율을 더 높이고 싶다’가, ‘모바일에서 빠르게’가 아니라 ‘모바일 로딩 속도를 0초 이내로’가 더 정확한 표현입니다.
3) 구조층, 인터랙션 디자인과 정보 구조 설계
전략 층과 범위 층을 거친 후에는 여러 요구 사항을 담은 리스트가 있을 것입니다. 이처럼 조각들로 이루어진 요구 사항들을 잘 구조화하여 하나의 그림으로 만드는 단계가 바로 구조층입니다.
구조층은 (1)인터랙션 디자인(interaction design)과 (2)정보 구조 설계(information architecture)를 포함합니다.
(1)인터랙션 디자인은 ‘사용자의 행동을 기술하고, 시스템이 사용자의 행동을 받아들이고 어떻게 반응해야 하는가’에 대한 과정입니다. 가령, 웹사이트에서 좌측 상단에 위치하면 로고를 클릭하면 대부분 홈 화면으로 이동하도록 만들어졌습니다. 하지만 인터랙션 디자인을 고려하지 않은 웹사이트라면 로고를 클릭할 때 아무 변화가 없거나 홈이 아닌 다른 페이지로 이동할 것입니다.
개발자는 전통적으로 사용자의 행동보다 자신이 만든 소프트웨어가 어떻게 작동하는가에 관심이 많은데요. 그래서 과거에는 여러 소프트웨어가 서로 다른 방식으로 작동하더라도 사용자가 오류를 겪으며 이에 맞추는 경우가 빈번했습니다.
하지만 이제는 다릅니다. 사람들이 소프트웨어를 어떻게 다루는지에 대한 정보가 축적되면서, 이제는 사용자의 입장에서 효율을 높여줄 수 있도록 개발이 이루어지는 방향으로 바뀌고 있습니다. 마치 두 명의 댄서가 춤을 추듯, 시스템과 사용자는 서로 반응을 예측하여 스텝이 엉키지 않도록 되어야 합니다.
그래서 인터랙션 디자인에서 중요한 내용은 바로 ‘개념적 모델(conceptual model)’입니다. 개념적 모델이란 인터랙션 디자인에 의해 만들어진 동작 방식을 실제 물건 등에 비유하는 것입니다. 가령, 온라인 쇼핑몰의 장바구니라는 개념적 모델은 이름이 장바구니일 뿐이지만 사람들로 하여금 실제 장바구니를 떠올리며 ‘물건을 넣을 수도, 뺄 수도 있으며 계산을 위한 물건을 다는 곳’이라는 예상을 하게 합니다. 그리고 실제로 온라인 쇼핑몰의 장바구니도 이와 다르지 않은 기능을 제공합니다. 반면, 개념적 모델을 너무 똑같이 따라도 오히려 웹사이트에 적합하지 않기 때문에 선별적인 수용이 필요합니다.
(2)정보 구조 설계는 정보를 전달할 때, 사람들이 그 내용을 이해하고 활용할 수 있도록 구성하는 것입니다. 정보 구조는 사람의 정보 처리 방식과 관련이 깊은데요. 구조에 따라서 효율적이고 효과적인 정보의 전달 성패가 결정됩니다. 웹사이트의 목적이 온라인 쇼핑몰의 판매, 항공사의 예약 등 기능 중심일 때는 물론, 특히 목적이 우리 조직을 알리는 것 등 정보제공에 집중되어 있다면 반드시 더 집중해야 합니다
정보 구조 설계에서는 전달하고자 하는 정보를 먼저 분류해야 합니다. 분류법에는 하향식 접근과 상향식 접근이 있습니다.
하향식 접근이란 전략층에서 설정한 목표에 맞추어 큰 범주를 만들고 이를 더 작게 나누면서 구조를 직접 도출하는 것입니다. 반면, 상향식 접근이란 마찬가지로 분류 체계를 만드는 방법이지만 전달하고자 하는 정보를 분석하여, 작은 그룹으로 뭉치고, 그 그룹들을 다시 큰 그룹으로 뭉치는 방법입니다. 각 방법이 장단점이 있기 때문에 두 관점을 적절히 고려하며 균형을 맞춰가는 것이 중요합니다.
분류체계를 만든 이후에는 이를 바탕으로 다양한 설계 방법이 있습니다. 각 구조마다 특징이 있기 때문에 웹사이트에서 의도하는 바를 고려하여 적합한 구조를 차용하면 됩니다.
- 계층 구조 : 우리가 흔히 볼 수 있는 기업의 조직도 모양입니다. 상하관계가 있으며, 위의 마디는 아래를 포괄합니다. 가장 많이 쓰이는 구조입니다.
- 격자 구조 : 사용자가 웹사이트 내에서 다차원적으로 옮겨 다닐 수 있도록 만들어 놓은 구조입니다. 가령 사용자마다 제품을 크기별, 색상별, 가격별 등 다양한 기준으로 보고 싶어 하는데요. 이를 가능케 하는 구조입니다.
- 유기 구조 : 유기 구조는 일관된 유형이 없습니다. 그래서 정보 간의 관계가 불명확하거나 확정되지 않은 주제들에 대한 탐색에 용이하다는 장점이 있어 사용자가 자유롭게 정보를 찾아다닐 수 있습니다.
- 순차 구조 : 순차 구조는 책, 기사 등에서 흔히 볼 수 있습니다. 신문기사나 교육용 자료와 같이 순서가 있는 컨텐츠를 담기에 적합한 구조입니다.
구조층에서는 특히 생소한 용어가 많이 등장했는데요. 결국 이 모든 과정을 바탕으로 웹사이트 구조도(architecture diagram)를 그릴 수 있습니다.
4) 골격층, 인터페이스와 내비게이션, 그리고 와이어프레임
구조층이 웹사이트의 동작 방식을 이야기한다면, 골격층은 그 방식이 보이는 형태를 정의하는 단계입니다.
골격층은 크게 1)버튼, 입력 상자 등을 디자인하는 인터페이스 디자인, 2)사용자의 웹사이트 내 이동경로를 설계하는 내비게이션 디자인 그리고 3)효율적 의사전달을 위해 정보를 표현하는 방법인 정보 디자인이 있습니다.
이 단계에서부터는 보통 외부 디자인 회사에서 직접 담당하는 부분이라 정확히 이해하지 못하는 부분이 많을 것입니다. 비영리조직에서는 일부 생소한 용어가 있으므로 하나씩 소개하도록 하겠습니다.
인터페이스 디자인이란 사용자가 하고자 하는 일이 가능하도록 인터페이스 요소들을 골라서 화면에 배치하는 작업입니다. 가령 체크박스, 입력상자 등이 이에 해당하는데요. 아래와 같이 ‘이 인터페이스는 이런 용도로 쓰인다’ 라고 생각하도록 관습에 따른 디자인을 활용하는 것이 좋습니다. 아래와 같이 입력 상자가 있으면 사용자는 어떻게 반응해야 하는지 알고 있겠죠?
내비게이션 디자인은 사용자가 원하는 정보에 접근할 수 있도록 경로를 설계하는 작업입니다. 가령, 대부분의 웹사이트는 좌측 상단의 로고를 클릭하면 첫 페이지로 돌아가도록 설계되어 있습니다.
하지만 “웹사이트 내 모든 요소에 링크를 달면 사용자가 웹사이트 내 어디든 갈 수 있겠지”라고 간단하게 생각하시면 안 됩니다. 내비게이션 디자인은 훨씬 복잡하고 어려운 일입니다. 이럴 때는 사용자가 웹사이트 내 페이지를 이동할 때 아무것도 모른다고 가정한 채 설계해야 합니다.
골격층의 끝에서는 와이어 프레임을 만들 수 있습니다. 와이어 프레임이란 페이지 내 요소들이 구체적으로 어떻게 배치가 되는지를 그린 그림인데요. 비로소 우리가 흔히 생각하는 웹사이트의 모습이 드러납니다.
5) 표면층, 감각적인 디자인 만들기
골격층에서 주로 배치의 문제를 다뤘다면, 표면층은 골격층의 논리를 표현하고 감각적인 디자인을 만드는 단계입니다.
보통 디자인하면 사람들은 미적인 디자인을 떠올리곤 하는데요. 그러나 한 가지 염두에 둬야 하는 사실은 웹사이트의 디자인을 평가하는 기준은 미학이 아니라 ‘얼마나 웹사이트가 의도하는 전략을 디자인으로 표현하느냐’라는 것입니다.
웹사이트는 인간의 오감 중 특히 시각이 가장 중요한 감각으로 작용합니다. 이때, 좋은 디자인을 평가하는 간단한 방법 중 하나는 바로 사용자의 시선을 추적하는 것인데요. 시선 추적 장비를 통해 사용자의 시선이 어디에 머무는지, 어떤 어려움을 겪는지 등을 파악할 수 있습니다.
표면층에서 디자인 측면으로 고려해야 하는 요소는 정말 다양합니다. 사용자의 주목을 이끌기 위해서 적절한 대비(contrast)가 이루어져야 하며, 반대로 사용자의 혼란을 줄이기 위해서는 통일성(uniformity)을 유지하는 것도 중요합니다. 또한, 단순히 현재 만들고 있는 웹사이트 외에도 같은 기관 내의 다른 SNS 채널, 제품, 포스터 등과의 일관성 또한 고려되어야 합니다.
그리고 마지막으로 디자인상의 의사결정을 문서화하는 작업도 구성원 간의 원활한 공유를 위해 필요한 작업 중 하나입니다.
훌륭한 사용자 경험을 제공하는 웹사이트를 만드는 5단계인 전략층, 범위층, 구조층, 골격층, 표면층을 소개드렸습니다. 낯선 용어도 많고, 평이하지 않은 내용이었던 만큼 더 자세히 알고 싶으시다면 제시 개럿의 저서 “사용자 경험의 요소(The Elements of User Expererience)”를 한 번 읽어 보시기를 권합니다.
웹사이트는 조직 입장에서 다른 사람들에게 사업 내용 등 정보를 전달하고, 사람들로 하여금 후원 결제 등 특정 기능을 수행하게 할 수 있는 중요한 채널입니다. 또한, 관심을 가지고 방문한 사람들로부터 조직이 보이는 첫인상이라는 점에서 ‘얼굴’이라고 할 수도 있습니다.
여러분도 사용자 경험을 중요시하는 웹사이트를 구축하여 이루고자 하는 목표를 달성하시길 기원합니다.
도너스의 서비스가 궁금하시다면?
홈페이지를 방문해 보세요!
후원자 경험에 대한 전문성이
오늘날, 모금기술의 차이를 만듭니다.