SPA가 뭔가요? SPA의 개념부터 분석 방법까지 알아보자!

😃안녕하세요, 뷰저블 팀입니다.😀 오늘은SPA가 무엇이고 방문한 웹 사이트가 SPA인지 확인하는 방법에 대해서알아보겠습니다.1. SPA가 무엇인가요?SPA는 Single Page Application의 약자로 URL이나 페이지가 바뀐 것 같더라도 실제로는 콘텐츠만 갱신되는 형태의 단일 페이지를 말합니다. 일반적으로 우리가 방문하는 웹 사이트는 보통 MPA (Multi Page Application)인데요, 이는 사용자가 한 페이지에서 다른 페이지로 이동할 때 새로운 페이지의 정적 리소스를 다시 다운로드하는 방식을 사용합니다. 즉, MPA는 여러 페이지의 연결로 이루어져 있기 때문에 콘텐츠를 추가하고 싶으면 원하는 만큼 페이지를 추가할 수 있으나 페이지 이동 시 새롭게 리소스를 가져오기 때문에 느린 이동 속도를 가지게 됩니다. 하지만, SPA는 하나의 페이지로 이루어져 있습니다. 때문에 사용자의 인터랙션으로 요청된 새로운 콘텐츠에 대해서 전체 페이지를 다시 불러오지 않고 해당 콘텐츠만 변경되는 특징을 가지고 있습니다. 이 특징 덕분에 새로고침이 발생하지 않아 로딩 시간이 굉장히 빠른 것이 장점입니다.  2. SPA 페이지는 어떻게 확인하나요?현재 내가 방문한 웹 사이트가 SPA인지 MPA인지 확인하고 싶다면 아래 방법을 따라 해보세요!이번에는 예시를 보여드리기 위해 ‘Beusable 공식 홈페이지’와 ‘뷰저블 포럼 페이지’에서 SPA 페이지 확인 방법을 실행해보겠습니다. 먼저, Beusable 공식 홈페이지에 들어가 개발자도구 > Sources 탭 > Page 탭을 열어봅시다. 이 때 다른 페이지로 전환하는 버튼을 누르게 되면(A페이지)(B페이지로 전환 했을 때)오른쪽에 보이는 Page 탭에서 리소스가 다시 새로고침되고 있습니다!따라서 Beusable 공식 홈페이지는 MPA 페이지군요! 다음으로 뷰저블 포럼 홈페이지에 들어가 동일한 방법으로 개발자 도구를 열어봅시다. 이 후 다른 페이지로 전환하는 버튼을 누르게 되면(A페이지)(B페이지)MPA 방식처럼 리소스가 새로고침되지 않는 모습을 보여주고 있습니다.이처럼 전환 버튼을 눌렀을 때 url은 변경되지만 리소스가 새로고침되지 않는 뷰저블 포럼 페이지는 SPA 페이지라고 볼 수 있습니다.  3. SPA 페이지를 뷰저블로 분석하고 싶어요!뷰저블 히트맵은 MPA 방식의 웹사이트 기준으로 PV를 측정하는데요, 사용자가 A페이지에서 B 페이지로 진입해 페이지 리소스가 새로고침될 때 B 페이지의 1pv를 수집하게 됩니다. 하지만 SPA 방식의 웹 사이트는 페이지가 하나이기 때문에 처음으로 진입한 페이지에서만 1PV가 측정되고 이후에 다른 페이지로 전환해도 리소스가 새로고침되지 않기 때문에 진입 이후의 페이지에서는 PV가 측정되지 않는다는 단점이 있습니다. 때문에 웹 사이트가 SPA 방식으로 구성되어 있다면 히트맵 상단 우측에 있는 SPA 토글을 체크해야 원하는 페이지의 데이터가 수집할 수 있습니다. SPA 분석 토글을 체크하면 URL이 바뀌는 것을 기준으로 PV를 측정하기 때문에 SPA 페이지에서도 정확한 PV 측정이 가능해질 수 있습니다.지금까지 SPA가 무엇인지, SPA 페이지 확인 방법과 히트맵 분석 방법에 대해서 알아보았습니다!이 포스팅을 통해 SPA에 대한 궁금증이 풀리셨기를 바랍니다! 또 SPA 페이지는 원래 A/B Testing 기능이 지원되지 않았는데조만간 UX Writing이 지원되는 기능 업데이트가 있을 예정입니다.SPA 기능 업데이트에 대한 포스팅도 놓치지 말고 많은 관심 부탁드립니다! 😊 

URL 구조 이해하고 분석 매치유형 활용하기 (3/3)

😊 안녕하세요, Beusable 팀입니다! 😊앞선 포스팅에서는 Exact, Simple, Starts 매치에 대해서 알아봤는데요,매치 유형을 이해하는데 도움이 많이 되셨나요?그렇다면 오늘은 Ends, Contains, Regular Expression 매치에 대해서 알아보도록 합시다! 매치유형 선택에 필요한 꿀팁이 가득하니 이번 포스팅도 주목해 주세요!  4. Ends Match Ends Match는 입력한 종료 문자열로 끝나는 모든 URL 분석하는 매치 유형입니다. 때문에 입력한 종료 문자열과 정확히 일치하는 URL의 데이터만 수집합니다. 분석이 필요한 URL의 도메인과 종료 문자열을 입력 후 동일한 도메인과 종료 문자열이 랜딩 URL에 있다면 매치가 가능합니다. 다음 예시를 참고해 입력한 문자열이 정확히 랜딩 URL의 종료 문자열과 일치하는 지 확인 후 매치 유형을 등록해주세요! 언제 사용하나요?특정 문자열로 끝나는 패턴을 가진 모든 페이지의 데이터를 합산 및 분석할 경우- 분석 페이지 중 ‘AB 테스트’ 페이지로 방문한 유저의 데이터를 분석하고 싶은 경우URL 중간 문자열이 유입경로에 따라 가변적으로 변화할 경우- 파라미터를 가진 URL이 유입경로에 따라 Path가 달라질 경우이런 점은 유의해주세요!분석 목적과 무관한 페이지 데이터가 수집되지 않도록 입력한 URL 패턴에 대한 충분한 검증이 필요합니다.  5. Contains Match Contains Match는 입력한 포함 문자열을 포함하는 모든 URL 분석하는 매치 유형입니다. 분석을 원하는 페이지에 모두 동일한 특정 문자열을 가지고 있다면 Contains Match를 사용하는 것이 가장 적합합니다. 분석이 필요한 URL의 도메인과 포함 문자열을 입력해 Contains Match를 사용할 수 있습니다. 다음 예시를 참고해 입력한 포함 문자열과 동일한 문자열이 랜딩 URL 내에 존재하는 지 확인 후 매치 유형을 등록해주세요! 언제 사용하나요?여러 URL을 하나의 데이터로 합쳐 분석할 경우- 특정 상품 코드가 존재하고 각 상품별 모든 유입 경로 URL에 대한 데이터를 함께 수집하고자 할 때- 분석하려는 URL에 공통적으로 존재하는 키워드가 있을 경우이런 점은 유의해주세요!분석 목적과 무관한 페이지 데이터가 수집되지 않도록 입력한 URL 패턴에 대한 충분한 검증이 필요합니다.  6. Regular Expression Match Regular Expression Match는 입력한 정규 표현식을 통과하는 모든 URL 분석하는 매치 유형입니다. 앞서 설명한 5가지의 매치유형 모두 분석 목적에 적합하지 않다면 정규 표현식을 작성해 이를 통과하는 URL만 수집할 수 있도록 할 수 있습니다. 정규 표현식은 예시와 같이 분석 목적에 따라 원하는 방식으로 작성하실 수 있습니다.언제 사용하나요?앞의 5가지 매치 유형을 활용하기 힘들 경우예를 들어 Path가 ‘location’키워드로 시작해 ‘site’ 키워드로 끝나는 URL을 분석하고 싶을 때 Starts 매치와 Ends 매치를 함께 사용할 수 없기 때문에 정규식을 통해서 원하는 URL만 수집할 수 있도록 해야 합니다. 이런 점은 유의해주세요!분석 목적과 무관한 페이지 데이터가 수집되지 않도록 입력한 URL 패턴에 대한 충분한 검증이 필요합니다. 또한 정규식 작성에 대한 가이드는 뷰저블 내에서 따로 드리지 않고 있습니다.지금까지 분석 목적에 따라서 어떤 매치 유형을 활용하면 좋은지 알아보는 시간이었습니다! ‘URL 구조 이해하고 매치 유형 활용하기’ 시리즈를 통해서 매치유형에 대한 궁금증이 풀리셨나요? 뷰저블 히트맵을 사용하는 데에 이 글이 많은 도움이 되었기를 바라며앞으로의 뷰저블 포스팅들도 기대해주세요!😉[출처]UX Case Study [1] : 웹 페이지 UX 분석을 시작하기 위한 첫 단계데이터 분석을 위한 기초, URL 이해하기 | 뷰저블뷰저블 페이지 등록 가이드 p14~23시리즈 이어서 보기▶URL 구조 이해하고 분석 매치유형 활용하기 1/3▶URL 구조 이해하고 분석 매치유형 활용하기 2/3▷URL 구조 이해하고 분석 매치유형 활용하기 3/3

6개월간의 완주, 뷰저블리 1기 수료식 현장 스케치

안녕하세요, 뷰저블 팀입니다.😊저희는 드디어 8월25일, 3월부터 8월까지 ‘뷰저블리 1기’ 활동에 참여해주신 서포터즈 분들을 모시고 1기 수료식을 진행하였습니다!금요일 오후 7시, 새로 이전한 사무실 1층에 함께 모여 뷰저블 서포터즈 1기의 활동을 정리하기 위한 시간을 가졌습니다.콘텐츠 인사이트 공유스터디 그룹 운영 결과수료식 및 우수 서포터즈 시상데이터 드리븐 인사이트 세미나 초대등의 알찬 구성으로 수료식에서도 Data-Driven UX에 대한 인사이트를 공유한 뷰저블리 1기! 🤣 비교적 거리가 먼 곳에서 출발하신 분들도 있었는데 판교까지 발걸음 해주신 모든 서포터즈 분들께 감사의 말씀 전하고 싶습니다! 🙂 뷰저블리 1기 활동 공유와 수료식 시상을 마치고 뷰저블만의 실용적이고 멋진 굿즈들을 드렸습니다. 꼭 서포터즈분들의 마음에 들으셨으면 좋겠네요!😁 마지막으로 6개월 동안 서포터즈로서 열심히 활동해주신 뷰저블리 1기 분들과 함께 맛있는 저녁 시간을 가졌습니다. 서포터즈로 활동하면서 못다 한 이야기를 가볍게 터놓고 대화할 수 있는 좋은 시간이었습니다!아쉽게도 일정 문제로 수료식에 참석하지 못한 서포터즈분들께도 수료를 축하드리며다시 한번 6개월동안 서포터즈 활동을 완주해주신 모든 뷰저블리 1기 분들께 감사드립니다!

URL 구조 이해하고 분석 매치유형 활용하기 (2/3)

😊 안녕하세요, Beusable 팀입니다! 😊앞선 포스팅에서 배웠던 URL은 데이터 분석에 어떻게 활용되고 있을까요?오늘은 URL에 대한 이해를 바탕으로 분석 페이지를 등록할 때어떤 매치 유형을 선택해야 하는 지 알아보겠습니다. 매치유형 선택에 필요한 꿀팁이 가득하니 이번 포스팅 내용에 주목해 주세요! 뷰저블 히트맵을 활용해 웹 페이지를 분석하기 위해서는 가장 먼저 분석할 페이지를 등록해야 하는데요, 이때 분석할 페이지의 URL 구조 및 접근 방식에 맞는 매치 유형을 선택해야 합니다!앞선 포스팅을 통해 분석할 페이지의 URL 구조를 이해하고 분석 목적을 명확하게 파악한다면 분석에 적합한 매치 유형이 무엇인지 쉽게 선택할 수 있을 것입니다.하지만 그전에 먼저 매치 유형에 따라 어떻게 데이터가 수집 되는 지를 알아보도록 합시다.  매치 유형 이해하기뷰저블 히트맵 대시보드에서 ‘페이지 등록’ 버튼을 클릭하면 분석 페이지 설정을 위한 창이 나타납니다.여기서 URL의 매치 유형 6가지 중 하나를 선택해야 하는데요,분석할 URL의 구조와 분석 목적에 따라서 한 가지의 매치유형을 고르실 수 있습니다.이번 포스팅에서는 먼저 Exact Match, Simple Match, Starts Match를 알아보도록 하겠습니다.  1. Exact Match Exact Match는 등록한 URL과 실제 랜딩 URL이 100% 일치해야 데이터를 수집하는 매치입니다.  때문에 원하는 페이지의 URL에 대해서만 데이터 수집이 가능하다는 특징이 있습니다. 또한 A/B 테스트와 세션 리포트 열람 기능을 사용할 수 있는 매치 유형입니다. Exact Match로 페이지를 등록하고 싶다면 예시처럼 등록 URL과 랜딩 URL이 완벽히 일치해야 하며 만약 등록한 URL과 실제 랜딩한 페이지의 URL이 한 글자라도 다르면 실제 페이지의 데이터를 수집할 수 없게 됩니다. 언제 사용하나요?특정 유입경로로 들어오는 유저의 데이터를 수집할 경우- 정확히 '네이버 광고’를 통해 사이트에 방문한 유저의 데이터를 원할 때- 이번달 여름 기획전 페이지에 직접 유입 경로로 들어온 사용자들의 행동 데이터를 원할 때즉, 전체적인 행동 데이터보다 특정 유입 경로로 들어온 사용자들의 행동 데이터를 알고 싶을 때 적합한 매치 유형입니다.A/B 테스트와 세션 리포트 기능을 사용할 경우이런 점은 유의해주세요!Exact Match는 특정 페이지만 분석하기에 적합한 매치 유형으로 동일한 페이지더라도 등록 URL과 동일하지 않은 URL로 랜딩된 사용자 데이터는 수집에 제한이 있을 수 있습니다.   2. Simple MatchSimple Match는 등록한 URL의 domain과 Path만 일치하면 해당되는 모든 URL의 데이터를 수집하는 매치유형입니다. 때문에 프로토콜, 파라미터 등의 요소가 달라도 도메인과 패스만 같다면 모두 수집할 수 있다는 장점을 가지고 있습니다.다음 예시를 참고해서 등록한 URL과 실제로 랜딩 했을 때의 URL의 도메인과 Path가 일치하는 지 꼭 확인 후 등록해주세요!언제 사용하나요?변수(어떤 광고/마케팅)을 포함하여 분석하는 경우어떤 광고나 마케팅으로 유입했느냐에 따라 랜딩 URL이 달라질 경우사이트의 메인 페이지를 분석하고 싶은 경우분석 대상의 URL이 Path로 결정되는 경우같은 도메인과 Path를 공유하는 카테고리의 전체 레이아웃 분석을 위해 데이터를 합산 및 집계하고자 할 때이런 점은 유의해주세요!Simple Match는 랜딩 URL의 프로토콜, 파라미터, 프래그먼트가 등록 URL과 달라도 도메인과 path가 같으면 매치가 가능한 유형입니다. 하지만 유입경로에 따라 도메인이나 path가 달라진다면 해당 URL의 데이터는 수집되지 않을 수 있습니다.  3. Starts MatchStarts Match는 입력한 시작 문자열로 시작하는 모든 URL을 분석하는 매치 유형입니다. 때문에 입력한 문자열과 정확히 일치하는 url의 데이터만 수집합니다.다음 예시를 참고해 입력한 문자열이 정확히 랜딩 URL의 시작 문자열과 일치하는 지 확인 후 매치 유형을 등록해주세요!언제 사용하나요?여러 URL을 하나의 데이터로 합쳐 분석하는 경우파라미터로 구분되는 다양한 상품 페이지들을 하나의 리포트에서 함께 수집하고자 할 때특정 하위 페이지에 대한 전반적 분석을 하고자 할 때 이런 점은 유의해주세요!Starts Match로 도메인까지만 등록하게 되면 모든 사이트의 데이터가 수집되어 PV가 많이 소진될 수 있습니다. 또한 분석 목적과 무관한 페이지 데이터가 수집되지 않도록 입력한 URL 패턴에 대한 충분한 검증이 필요합니다.오늘은 분석 목적에 따라서 Exact, Simple, Starts 매치 유형을어떻게 활용하면 좋은지 알아보는 시간이었습니다! ‘URL 구조 이해하고 매치 유형 활용하기’ 포스팅을 통해서 매치유형에 대한 궁금증이 풀리셨나요? 뷰저블 히트맵을 사용하는 데에 이 글이 많은 도움이 되었기를 바라며다음 Ends, Contains, Regular Expression 매치 유형에 대한 포스팅도 기대해주세요!☺[출처]UX Case Study [1] : 웹 페이지 UX 분석을 시작하기 위한 첫 단계데이터 분석을 위한 기초, URL 이해하기 | 뷰저블뷰저블 페이지 등록 가이드 p14~23시리즈 이어서 보기▶URL 구조 이해하고 분석 매치유형 활용하기 1/3▷URL 구조 이해하고 분석 매치유형 활용하기 2/3▶URL 구조 이해하고 분석 매치유형 활용하기 3/3

URL 구조 이해하고 분석 매치유형 활용하기 (1/3)

URL 구조 이해하고 분석 매치유형 활용하기 (1/3)  😊 안녕하세요, Beusable 팀입니다! 😊오늘은 이러한 상황을 해결해보고자 " URL을 이해하고 어떤 상황에서 각 매치유형을 사용해야 하는 지 " 알아보려고 합니다. URL 구조 이해부터 매치유형 활용까지!  분석 페이지 등록할 때 필요한 꿀팁이 가득하니 이번 포스팅 내용에 주목해 주세요! 🙂 매치유형을 활용하기 위해서 각 URL의 구조를 예시를 통해 살펴보겠습니다. URL의 구조를 알아봅시다! URL은 프로토콜, 도메인, Path, 파라미터, 프래그먼트로 구성되어 있습니다.각각의 구성 요소들을 살펴볼까요?먼저 프로토콜은 컴퓨터 간 정보 주고 받을 때 통신 방법에 대한 규칙을 표기한 것 입니다. 기본적으로 http와 https를 대표적으로 많이 사용하는데요,  http는 html 문서를 주고 받을 수 있는 프로토콜로 일반적인 웹 사이트에서 가장 많이 사용됩니다. https는 http의 보안이 강화된 버전으로 보안이 필요한 서비스에서 주로 사용하는 것을 볼 수 있습니다. 도메인은 숫자로 된 IP 주소와 다르게 사용자가 기억하기 쉽게 보통 서비스 명으로 불리는 컴퓨터 주소입니다. 도메인 전체에는 국가나 기관의 정보를 보여주는 상위 도메인명, 도메인 이름과 도메인에 속한 호스트 정보가 기입됩니다.상위 도메인명국가와 기관에 따라 다른 상위 도메인명을 사용합니다.  (국가 구분의 예) 캐나다 구글 사이트 : www.google.ca의 'ca' 한국 구글 사이트 : www.google.kr의 'kr' (기관 구분의 예) 영리 목적의 기업 : 네이버 www.naver.com의 'com'비영리 목적의 삼성재단 : www.samsungfoundation.org의  'org' 도메인명숫자로 표현된 IP 주소를 쉽게 기억할 수 있는 영문으로 표현한 것이 도메인명입니다. (예시)naver, youtube, beusable 호스트명도메인의 하위 개념으로 서브도메인, 보조도메인으로도 불립니다. (예시)music.naver.comblog.naver.commail.google.com Tip! 뷰저블 히트맵에서는 서브 도메인이 다르면 상위 도메인과 도메인명이 같아도 다르게 인지 하는데요, 예를 들어 모바일 버전의 네이버 URL인 ‘m.naver.com’과 데스크탑 버전의 네이버 URL인 ‘www.naver.com’을 서로 다른 도메인으로 인지하기 때문에 뷰저블 히트맵에 분석 페이지를 등록하실 때 각각의 페이지를 별도로 히트맵에 등록해주셔야 합니다! Path는 파일 도메인에 해당하는 웹 서버 기준으로 제공하고자 하는 페이지가 속한 폴더명과 파일명이 나타난 경로입니다. Path는 도메인 이후 /(슬래쉬) 뒤에 표시 됩니다. 컴퓨터의 파일 경로처럼 생각하면 좀 더 이해가 쉽습니다! 파라미터는 가변적 콘텐츠 처리할 때, url을 구분하려고 할 때, 파일 디렉토리 및 파일명 역할을 할 때 필요한 정보로 보통 ?(물음표) 뒤에 표시가 됩니다. 이름과 값으로 구성된 세트가 1개 이상 존재 시 "&"로 구분합니다.위의 예시를 해석하면, 앞선 도메인과 path의 경로에 따라서 ~top100.nhn의 페이지를 보여줄 때 "domain은 OVERSEA로, duration은 1h로 설정한 정보를 제공한다" 라고 볼 수 있습니다. Tip. 파라미터의 사용 용도파라미터는 필터링 기능처럼 웹 사이트에 접속 했을 때 특정 정보가 미리 입력되어 있도록 하는 기능을 합니다. 이에 따라 사용 용도가 크게 3가지로 나누어질 수 있습니다. 1. 가변적 콘텐츠를 처리하기 위한 정보쿼리 스트링으로도 불리는 파라미터는 페이지의 콘텐츠가 정보에 따라 가변적으로 변하는 경우에 많이 사용됩니다.예를 들어, 검색 결과 페이지에서 파라미터를 통해 원하는 검색어 정보를 URL에 함께 전달할 수 있습니다. 이 때, 초기 화면이 아닌 지정된 검색어 정보가 있는 콘텐츠와 레이아웃으로 구성된 웹 페이지를 볼 수 있습니다. 예시)https://shopping.naver.com/luxury/cosmetic/category?menu=10009886네이버 쇼핑 페이지에서 Path까지만 입력하면 ‘쇼핑-럭셔리-코스메틱’까지의 페이지가 열람되지만 파라미터까지 모두 입력하면 ‘쇼핑-럭셔리-코스메틱’에서 파라미터에서 지정한 검색어 정보인 ‘스킨케어’로 설정된 페이지가 나옵니다. 2. URL을 구분하기 위한 정보URL을 여러 매체를 통해 홍보한 경우 어떤 방식으로 유입되었는지 확인하기 위해 각 매체 URL에 파라미터값을 추가할 수 있습니다. 예시)예시로 제시된 두 URL은 모두 구글에서 ‘쿠팡’을 검색하면 나오는 페이지입니다.https://www.coupang.com/ 검색을 통해 들어온 쿠팡 사이트의 URL은 다음과 같지만,https://www.coupang.com/?src=1042016&spec=10304903&addtag=900&ctag=HOME&lptag=쿠팡&itime=20230818174015&pageType=HOME&pageValue=HOME&wPcid=1...동일한 페이지 이지만 ‘구글 광고’로 제시된 쿠팡 사이트로 들어온 사용자의 유입 URL은 다음과 같습니다. 이러한 파라미터의 기능을 활용해서 광고로 유입된 사용자를 분석해 광고 효과를 측정해볼 수 있습니다. 3. 파일 디렉토리 및 파일명 역할을 하기 위한 정보파라미터는 파일디렉토리 및 파일이름과 유사한 역할로도 쓰이는 경우도 있습니다. 예시)‘미디어오늘’의 메인 사이트: http://www.mediatoday.co.kr/?mod=main&act=index '미디어오늘'의 회사소개 사이트: http://www.mediatoday.co.kr/?mod=company&act=introduce  Tip. 패스와 파라미터는 어떻게 구분하나요?앞서 말씀드린 것처럼 패스는 웹 서버가 제공하고자 하는 페이지가 속한 파일 경로와 파일명이 나타난 경로이고, 파라미터는 URL의 매개변수로써 URL에 추가적인 정보를 설정할 수 있는 기능이 있습니다.이 두 가지 요소를 쉽게 구분하기 위해서는 /(슬래쉬)와 ?(물음표)를 잘 보시면 됩니다!  Tip. UTM Parameter는 무엇인가요?여러분! 혹시 뷰저블 히트맵에 있는 Campaign 세그먼트 기능을 아시나요?뷰저블 히트맵의 Campaign 토글을 누르면 다음과 같은 팝업을 볼 수 있는데요!여기서 말하는 UTM Parameter는 무엇을 말하는 것일까요? UTM Parameter는 Urchin Tracking Module의 약자로, GA에서 특정 캠페인 및 콘텐츠의 성과 측정을 위해 URL 뒤에 파라미터의 형태로 추적을 위한 코드를 붙이는 기법입니다. UTM Parameter을 활용하면 사용자가 어디서, 어떻게 유입이 되었는지 상세한 분석을 할 수 있다는 장점이 있습니다! 다음은 UTM 파라미터의 종류와 그 내용을 간략히 표로 정리해 보았습니다.종류내용예시Source광고 매체명 (어느 매체로 유입이 되었는지)google, naverMedium유입을 유도한 마케팅 방식Banner, cpc, email newsletterCampaign어떤 캠페인의 광고인지 (캠페인명, 슬로건, 프로모션 코드)jan_event, feb_eventTerm키워드 정보 or 타겟팅 정보 (어떤 키워드로 들어왔는지)beusable 등Content어떤 광고 내용에 의해 유입이 발생했는지ecocampaign, watercampaignCampaign 토글 버튼을 통해 설정한 각 UTM Parameter을 선택하여 등록 URL에 진입한 사용자의 데이터를 쉽게 조회해보세요~!   프래그먼트는 뷰저블 히트맵에서는  페이지의 특정 요소에 대해 지시 가능한 기능으로 여러 콘텐츠가 나열된 페이지의 특정 위치 정보를 사용자에게 함께 전달하고자 할 때 유용하게 사용됩니다.페이지에서 content 영역을 지시해 URL 클릭 시 바로 content 영역으로 스크롤 된 페이지를 확인할 수 있습니다. 오늘은 URL의 개념과 구조에 대해서 설명해보았는데요, URL에 대해서 이해하면 앞으로 활용할 매치유형에 대해서도 쉽게 이해하실 수 있습니다!  다음 포스팅은 URL 구조의 이해를 기반으로 페이지 등록 매치 유형에 대해 설명 드리도록 하겠습니다.  앞으로의 포스팅도 기대해주세요!😆[출처]데이터 분석을 위한 기초, URL 이해하기URL 분석하기 (1/2) | 뷰저블URL 분석하기 (2/2) | 뷰저블웹 데이터 분석의 기본, 파라미터를 아시나요? | 뷰저블 시리즈 이어서 보기▷URL 구조 이해하고 분석 매치유형 활용하기 1/3▶URL 구조 이해하고 분석 매치유형 활용하기 2/3▶URL 구조 이해하고 분석 매치유형 활용하기 3/3 

[연재 5] UX라이팅 세미나가 열린 날 라스트 Part.4 : UX 퀵서비스 '뷰저블'

   4. 데이터로 분석하는 UX 라이팅 / 포그리트 - 엄지연 팀장 사용자 경험을 데이터로 분석한다는 것은, 기업 비즈니스의 흥망성쇠를 결정하는 만큼 매우 중요한 일입니다. 실제로 요즈음 비즈니스에서 성공과 실패를 크게 좌우하는 것은 “사용자를 깊게 이해하려는 행동 데이터를 활용한 비즈니스 전략의 유무”라고 합니다. 그치만 UX를 분석한다는 것이 누구에게나 쉬운 일은 아닙니다. 데이터를 분석하는 데에 어려움을 겪고 계신 분들의 말을 조합해보자면..   사용자 데이터의 데이터 베이스를 다루는 것은 개발자같이 소위 말하는 ‘컴터 잘하는 사람들의 영역’으로, 데이터에 접근할 수 있다 한들 디자이너, 기획자, 마케터들이 쓰기 위한 데이터를 수집하는 것은 쉽지 않았져 1…  옆부서에 똑똑 협조를 요청해야하고, 수집된 데이터를 들여다 봐도 복잡하기 일수… 실무자가 활용하기엔 쉽지 않았져 2…  보편적으로, ‘고객데이터=방문자의 속성을 나타내는 데이터’라고 이해하고 계실텐데요, 어떤 매체를 통해 들어왔는지, 신규인지 or 재방문인지, 성과를 기간별 조회수나 활성 유저수, 전환율 위주 등 숫자로만 표현되는 약간은 고리타분한 것만 분석하고 계셨을 터.   때문에 뷰저블은 누구에게나 쉽고, 직관적인 데이터를 다를 수 있는 툴을 만들고자 했습니다. 또한 기업이 활용해야 하는 데이터는 사용자의 속성 데이터가 아닌, 사용자의 경험 데이터라고 강조합니다. 광고 매체나, 성별 연령대, 접속 지역 등등 ‘프로필’ 적인 속성 정보는 우리의 주요 타겟층만 파악 될 뿐, 그 자체가 기업이 나아가야 하는 전략적 브랜딩 요소를 대변하기엔 부족하다는 것이죠. 점점 멀티퍼소나 되어가는 유저들은 같은 속성을 장착하고 있더라도 서비스를 이용하는 사용자의 경험치 한도에 의해 콘텐츠의 본 의도와 맥락을 이해하는 격에 미세한 차이가 발생한다고 합니다. 그래서 뷰저블은 다양한 사용자들이 콘텐츠마다 느낀 순간의 감정 데이터들, 진짜!의 순수한 경험 데이터를 모아모아 평균을 제시하여, 사용자와 브랜드 간의 친밀도를 쌓는 방향성을 터줍니다 이윽고 축적된 경험데이터를 통해 콘텐츠가 우리의 의도대로 받아들여지고 있는지와 더불어, 사용자 관점에서 분석하여 발생하는 차이를 줄이는 것이 중요하다는데요, 오늘은 UX라이팅이 주제이니만큼, 텍스트로써 발생할 수 있는 여러가지 경험들을 우리 뷰저블이 어떻게 분석하여 쓸모의 데이터를 선사하는지 설명하겠습니다.     ① 마우스 스크롤 히트맵으로 콘텐츠의 주목도와 전달율 알아보기  상황 ▶ 우선, 텍스트가 사용자 경험에 미치는 영향에 대해 알고 싶습니다. 공을 들여 만든 컨텐츠를 과연 사용자가 소비하고 있을까요?  문제 ▶ 웹사이트에서 사용자가 어디서부터 어디까지 살펴보는 지, 또 주요한 배너들을 탐색하는 지 알 수가 없습니다. 또 특정 배너까지 도달한 사용자은 전체 사용자 중 몇%를 차지하는지, 어떻게 알 수 있을까요?  제안 ▶ 사실, 텍스트가 어디에 위치해 있는지에 따라 소비의 정도가 다릅니 다. 아래 이미지를 보시면 홈페이지의 상단 부분은 페이지에 접속하자마자 보이는 구간이니 붉게++, 반대로 홈페이지 하단 부분은 스크롤이 닿지 않는 부분이니 푸르게- - 나타나는 것을 볼 수 있죠. 여기서, 텍스트 콘텐츠도 전달이 얼마나 되었는지 알 수 있는데요, 상단일수록 자동으로 눈에 들어오니 노출도가 100% 자연스럽게 높고, 하단일수록 읽을 확률은 낮아지니 주목도는 낮아집니다. 그럼 그 중 사용자의 주목을 끄는 콘텐츠는 어느 영역일까요?   전달율과 노출도를 파악했다면, 다음으로 주목 데이터를 주목하여라!고 말씀드리겠어요.  위의 이미지는 기간을 두고 관찰한 스크롤 히트맵 데이터인데요,  스크롤 히트맵의  ‘어텐션그래프’의 꺾기도에 따라 각 위치별로 사용자들이 얼마나 콘텐츠에 도달을 했고, 체류했는지 알 수 있습니다! 이 뜻은, 하단 콘텐츠가 적은 사용자에게 전달되기는 했지만, 반대로 적은 사용자에게 주목을 받은 구간을 어텐션 그래프로써 확인할 수 있다는 것이죠. 이로써, 전달율과 주목도는 일치하지 않더라도 데이터를 교차해서 볼 가치가 있다라고 분석할 수 있습니다.      ② 마우스의 움직임을 보여주는 무브 히트맵으로 콘텐츠의 주목도와 전환율 알아보기  상황 ▶ 사용자는 과연 우리의 콘텐츠에 반응할까요? 단순히 보는 것이 아니라, 관심을 갖고 탐색하려는 의지가 있는지 살펴보고 싶습니다.  문제 ▶ 단순히 탐색에서 끝나는지, 혹은 탐색이 클릭이라는 결정까지 이어지는 지, 또 정확하게 어떤 콘텐츠에서 사용자가 가장 관심을 보이는지 알기 힘듭니다.  제안 ▶ 사용자가 메시지 키워드나 특정 이미지에 얼마나 주목했는지, 유심히 응시하는 곳은 어디인지를 무브히트맵을 통해 마우스 커서가 움직인 흔적으로 주목도를 파악할 수 있습니다.  1) 스크롤 히트맵에서 본 것처럼 어텐션그래프가 튀어나왔던 부분에 무브 히트맵이 도드라진 것을 볼 수 있죠?  상단의 예시 이미지를 보면 마우스 Hover로 접근 후 Click으로 전환을 결정하기까지 UX Heat Map을 비롯한 다른 기능은 0.1~0.2초에 머무르는 것에 비해, Report & User Analytics엔 0.4초씩이나 머물렀다는 것은, 다른 기능 대비 텍스트가 길기 때문에.. 영어가 눈에 익기까지 주저했을 수도 있다로 분석될 수 있습니다. 이와 같이 전달 > 주목으로 이어진 콘텐츠가 전환으로 바톤터치가 잘 이루어졌는지 확인해야 합니다. 이러한 부분은 사용자들이 어떤 텍스트나 이미지에 관심을 두었는지 시각적인 UI를 기반으로 클릭 수치를 분석하는 뷰저블의 특장점 중 하나입니다. 클릭 히트맵을 통해 한눈에 딱! 사용자 전환율은 물론 전환하기까지의 시간까지 파악할 수 있으니, 정말 유용하죠?        ③ 저니맵으로 콘텐츠의 전환여정 알아보기  상황 ▶ 그럼 특정 콘텐츠가 고객이 전환하기까지 얼만큼의 기여를 했는지, 영양가를 알고 싶어여! 문제 ▶  행동을 유도하는 텍스트로 우리가 처음 고안한 ‘고객 경험 설계도’대로 페이지를 이어갔는데… 그 이후의 그 이후의 그 이후까지 특정 페이지에 왜 오래 머무는지, 혹 페이지를 이탈하면 왜 나갔는지 그 행동심리를 알아야 사용자 전체 경험이 마음에 와닿을 것 같아여… 첫단추가 중요하다구 ‘전환을 유도한 콘텐츠’가 어느 단계까지 유도하는지 그 임팩트를 알고 싶슴니다!  제안 ▶ 텍스트 메시지가 구매완료까지 도달하게 만들었는지 저니맵으로 살펴볼 수 있슴니다. 예시로, 뷰저블포럼에서 사용자들이 a/b 테스트에 대한 정보를 찾기까지 어떤 페이지를 거쳤는지, 혹시 정보를 찾아 헤메진 않았는지...를 뷰저블팀도 알고 싶어서 저니맵을 들여다 보았눈데요. 아래 이미지처럼 메인페이지에서 1분 정도 콘텐츠를 탐독 → 단 몇 초 만에 a/b테스트 가이드글까지 빠르게 도달해서 → 30분 정도 오랜 시간 동안 페이지에 머문 것을 확인 = 이것은 글만 읽고 나가는 것이 아닌, 뷰저블에서 실제 기능을 활용해 보면서 오랜 시간 글을 조회하고 있지는 않을까나...로 예측하고 결론지었습니다.  만약... 우리가 a/b 테스트 가이드를 찾기까지 애매모호 어려운 텍스트로 안내해 놓았다면... 메인페이지로 다시 이탈하거나 창을 닫아버리거나... 그럼 우리 텍스트의 효율은 냉정하게 없었던거라구 할 수 있슴니다. 도중에 훅! 튀는 구간이 있으면 콘텐츠 효율을 점검해보고, 개선이 필요할지도!     ④ UX라이팅의 효율을 검증하는 자가형 a/b테스트  효과 있는 것’과 ‘효과 없는 것’을 비교분석하여 사용자 선호도를 극명히 가려내는 뷰저블의  "a/b테스트"를 통해, 사용자 경험에 영향을 주는 타이틀, 라벨, 지시, 알림 등의 텍스트 뭉치들을 몇번의 클릭 만으로 수정할 수 있습니다. 뷰저블의 UX Writting 기능 자세한 글은 요기서 확인 UX Writing - A/B 테스트 설정하기 : Beusable Forum영상 자료 화면도 함께 공유 드립니다! :)   A와 B 각각의 전달-주목-전환의 단계를 히트맵&저니맵으로 교차 분석해보세요. 얻어가는 분석 결과물의 질에 확연히 차이가 벌어질겁니다.      ”사용자 데이터 기반으로 라이팅이 어떤 경험을 제공하는지 파악에 그치지 않고, 개선을 반복해나가는 것이 실무자 분들의 미션이 아닐까 싶습니다. 개선이 필요한 데이터가 발견되었다면, 개선 이유에 대한 가설이 설정되고, 그 가설의 맞틀 여부를 동료나 상사에게 컨펌을 받아야하는데, 컨센서스를 맞추는 것이 쉽지 않죠. 컨센서스를 맞추는 기간에 사용자 데이터들은 변화를 거듭하고, 타이밍의 찰나로 사용자에게 선택 받기가 점점 어려워집니다. 그래서 사용자 데이터들을 빠르게 확인하고 반영하는 것이 비즈니스에서는 아주 중요하죠”— 엄지연 팀장. 230427 UX세미나에서 —    엄지연 팀장은, 사용자에게 실시간 단위로 받은 검증 결과를 서비스에 바로 반영하되, 완벽한 결과를 한번에 만드려 하기 보단, 짧고 빠르고 쉽게’를 반복해서 인사이트 개선하는 것이 바람직하다 말합니다. 복잡한 과정이나 개발팀의 다른 도움 없이 즉각 텍스트를 수정하여 반영하기만 하면 된다니. 그 무엇보다 반복적으로 테스트를 진행할 수 있는 가장 효율적인 도구가 되겠습니다.  작은 문구 하나 바꾸는 것 쯤이야 1도 연연하지 않는 뷰저블의 a/b 테스트 기능으로 신한카드도 한달동안 이렇게나 많은 테스트를 실행했다구요!하루하루 변하는 고객의 변화를 놓치지 않고 즉각즉각 테스트를 실행하여 결과를 서비스에 즉각즉각 반영합니다.      “데이터 분석 솔루션 현업에서 서비스를 제공하고, 컨설팅을 하다보니, 완벽한 하나의 인사이트를 고집하는 것보다 고객에게 얻은 인사이트가 더 가치있더군요. 한번의 완벽한 테스트보다는 쉽고 빠르게 여러번 시행착오를 거쳐 반복적으로 진행될 수 있는 테스트 데이터야말로 길게 보아 유의미한 것이 확실합니다. 그러니 실패를 두려워하지 마세요.”     세미나는 여기서 진짜 -끗-   그동안 길고 긴 세미나 연재글을 지켜봐주셔서 감사드립니다. :)뷰저블은 누구나 데이터를 다를 수 있는 세상을 위하여, 언제나 지금처럼 최선을 다하겠습니다. 감사합니다.    

[연재 4] UX라이팅 세미나가 열린 날 Part.3 : 대출을 당기는 텍스트

 더 나은 사용자 경험을 위하여, 과 손 잡았습니다.    잘 따라오고 계시죠..? ▼ "어디 사용자가 UX라이팅에 불편함이 없는지 진찰 좀 해봅시다" 링크 ▼[연재 3] UX라이팅 세미나가 열린 날 Part.1 : UX 라이팅 처방전 : Beusable Forum "디지털 신인류의 올 어바웃 브랜드 빌드업" 링크 ▼[연재 4] UX라이팅 세미나가 열린 날 Part.2 : 디지털 센츄리 st 커뮤니케이션 : Beusable Forum      3. 금융 서비스의 UX 라이팅 성과 개선 사례 / 신한카드 - 박광훈 부부장 박광훈 부부장님은 고객에게 아리송하고 모호한 표현으로써 따라오는 서비스의 제한을 낮추기 위해서라도, 시시때때에 맞도록 고객 소통 언어를 다듬는 것은 굉장히 중요하다 보고, 우리 조직은 고객 경험 향상을 위한 가이드를 상시 업그레이드하여 디지털 금융 서비스의 문턱을 낮추는 것을 추구하고 있다! 라고 신한카드의 개인사 이야기로 세션을 시작하셨습니다. 스타일가이드를 1.0에서 ~ 3.0까지 출시할 정도로 신한카드는 보다 나은 사용자 경험을 제공하는 것에 진심이시고, 또 브랜드 경험을 확장하는데 텍스트가 주는 영향은 어마하다라는 것을 일찍이 깨우치셨다고 합니다. 특히 “사용자 경험을 잘 설계하기 위해서는 조직 내부에 사용자 경험 설계에 대한 프로세스가 표준화"되어 있어야하고, "지속적으로 일관성있는 설계를 유지할 수 있는 시스템이 구축되어 있어야 한다" 고 강조하셨는데요. 스타일가이드를 연속 시리즈로 출시하는 것 역시, 조직의 언어는 한 번 정립하고 끝날 사안이 아니라는 이유죠. 즉 '신한어'처럼 통일된 조직 언어를 통해 고객과 일관된 소통으로 서비스를 확장하고, 기업-고객 간 쫀쫀한 유대감을 쌓을 수 있도록 도와주는 신한카드만의 스타일 가이드가 필요하다는 겁니다.  그러나 기존 신한카드에서는 하나의 텍스트를 수정하기 위해, 엄청난 공수가 들어가야 했고, 또 너무 많은 프로세스로 인해 쉽사리 도전해야 겠다 마음먹기도 힘드셨다 해요. '지속 가능한 테스트 방법'과 '결과에서 얻을 수 있는 효율' 두 마리의 토끼를 잡으면서도, 고객 경험 데이터를 실무자가 직접 모니터링하고 > 테스트하고 > 관리할 수 있는 시스템을 갖추는 것이야말로, 신한카드가 지금 딱 온라인 금융 시장을 개척하는데 필요한 전개라고 합니다. 그리고 이것이 뷰저블의 UX Writing기능을 도입하기로 한 가장 결정적인 계기라고 합니다. “금융은 복잡해요. 모든 서비스가 금감원의 시야에 있고, 고객의 소중한 ‘돈’을 다루다 보니 보안도 항상 유념합니다. 신중하디 신중한 글자의 짜임새로 신용을 지켜줄 것이라는 신뢰를 주는 겁니다. 금융권에선 a/b테스트를 빈번히 진행합니다. 사용자의 머뭇거림 데이터가 쌓여 개선을 한번 기획하면, 임원 보고하고 피드백을 수렴하고, 몇 번의 디자인 수정까지 2달이 지나도 끝나지 않는 경우가 많아요. 사실 라이팅은 살아 숨쉬는 매체라서 순간순간 테스트하고 피드백을 받아야 합니다. 그래서 뷰저블의 a/b테스트 툴은 아주 유용했죠. 소스 코드를 건들지 않고도 화면 상의 텍스트를 A로 할까, B로 할까 설정하는 순간 모니터링이 되고, 빠르면 2-3일 만에도 데이터가 나옵니다. 단순히 검증을 위한 솔루션보다 데이터를 재미있게 가지고 놀 수 있는 툴임이 확실해요.”— 신한카드 박광훈 DX 개발팀 부부장. 230427 UX세미나에서 —    그럼 먼저 뷰저블을 도입하기 전 신한카드의 UX Writing을 테스트하는 과정을 한번 보실까요?실제 신한카드에서 이루어지는 UX라이팅 The Best+를 찾기 위한 내부 플로우   조직에는 팀장부터 신입까지, 다양한 의견을 가진 실무진들과 결정권자들이 존재합니다. 하나의 텍스트를 개선하기 위해서는 여러 절차를 거치고, 여러 의견을 수렴하여 의견을 통일하고 하나로 맞추기란 쉽지 않습니다. 그래서 a/b테스트로 검증하는 단계를 거쳐 결과에 대한 의견을 통일시키면 조직에서 발생하는 아쉬운 갭을 줄일 수 있어요. 데이터로 이야기하고 의사결정을 한다면 이보다 명확한 근거는 없을겁니다.  이것이 뷰저블의 a/b테스트가 주는 명확한 장점입니다. 즉각적인 결과로 데이터를 통해 민첩하게 의논할 수 있다는 장점. 결과물 차이를 없애고, 의사결정을 하는 이해관계자들에게 명확히 설명할 수 있는 툴이기 때문입니다. 그럼 신한카드가 뷰저블 툴을 통해 어떤 결과를 도출해내셨는지 한번 보실까요? -신한카드 X 뷰저블은, “레이블을 변경한 UX라이팅만으로도 효과를 볼 수 있겠느으냐…” 의 가설을 두고 단기카드 대출 서비스의 CTA 텍스트를 변경하는 a/b 테스트를 진행했습니다. 보시다시피 이번 테스트는, 데이터를 Only 분석만의 영역에서 활용할 것이 아닌, 카피라이트 아니 'UX 텍스트를 바꾸는 것으로 고객의 행동에 미치는 영향과 + - 매출의 상관관계'라는 마케팅적인 영역에서 활용을 가늠해보는 시도였다,라고 볼 수 있는데요.    빨간 박스의 '계좌 입금' 버튼을 '대출 신청하기'로 바꾸어 보겠습니다. '계좌입금' 대비 '대출 신청하기'의 버튼이전체 PV에서 클릭한 PV 비율도 UP마우스 호버에서 클릭으로 이어지는 비율도 UP  “계좌입금”이라는 기업이 보여주는 액션과 VS “대출 신청하기”라는 고객이 이루고자 하는 목적 중, UX라이팅적으로 고객의 선택을 받은 승자는…사용자 관점에서 쓰인 “대출 신청하기”였습니다. a/b테스트로써, 관심에서 전환으로 이어진 비율이 증가한 것을 수치로써 확실하게 검증하였네요! 하나의 텍스트를 변경한 것만으로, 텔러와 마주보는 창구가 익숙한 아날로그의 영역에서, 디지털 온라인 상에서 금융 서비스를 신청하고 이탈없이 복잡한 대출의 모든 과정을 수렴한 것을 보면 직관적이고 신뢰를 주는 강렬한 UX라이팅이 얼마나 중요한지 아시겠죠 뿐만 아니라, 정확하 데이터는 결정권자들을 설득할 수 있는 강력한 무기가 될 수 있습니다. :) 이젠 더이상 감이 아닌, 정확한 데이터로 결정해보세요!   현장에서 좋았던 질문들 ▼  Q. GA도 있는데 왜 신흥강자 뷰저블을 추천하십니까? ▼ A. 물론, GA도 써보긴 했슴니다만...금융사에서 GA를 쓰기엔 무리가 있습니다. 왜냐면 기본적으로 금융사의 엄한 개인정보정책때문에 개인의 IP나 상세정보를 GA에 제공할 수 없기 때문이죠.뷰저블은 고객 데이터를 일체 수집하지 않는다는 것이 가장 큰 장점이겠습니다. 또한 특정한 고객에 대한 분석을 할 수 없기 때문에 물론 GA를 대체할 수 없는 분석 영역도 있슴니다만,고객의 행동 패턴을 분석하는 것만으로도 가설>검증이 가능하고각 기능별로 데이터를 교차분석해보면 홈페이지를 어떻게 개선해야하는지 1차적으로,그리고 고객 경험을 어떻게 설개해야하는지 2차적으로 보입니다.사실.. 새로운 콘텐츠가 생기면 노후한(?) 가이드북의 한계로 증명할 수 없는 부분이 생기는데,이럴 때, 변화에 맞춰 발빠르게 대응할 수 있는 비장의 무기가 뷰저블의 a/b테스트거든요.   이상입니다! - 

[연재 3] UX라이팅 세미나가 열린 날 Part.2 : 디지털 센츄리 st 커뮤니케이션

[이전 글]► [연재 1] UX라이팅 세미나가 열린 날 Part.0 : 웰컴사(링크)► [연재 2] UX라이팅 세미나가 열린 날 Part.1 : UX 라이팅 처방전(링크)      그럼 세션2 시쟉해볼게요! :)   2. UX 라이팅, 실제 사례로 듣는 그 현장의 이야기 / 와이어링크 - 박승원 선임연구원 세션1에서는 ‘UX라이팅을 아주 잘 하고 싶은데 우리 서비스에 어떤 영향을 미치는지 비롯하여 그 '잘' 이론을 배우고 싶다구’에 대한 힌트/어드바이스/팁을 주로 다루었다면, 세션2에서는 UX라이팅을 앞으로 어떻게 바라보고 접근해야 하는지를 포함하여 스타일 가이드의 중요성을 강조하는 이야기 해볼게요!  연구원님은 “코로나로 인해 오프라인에서 온라인으로의 전환, 즉 디지털 트랜스포메이션, DX시대가 도래했다”라고 해서 커뮤니케이션의 관점이 앞뒤 마냥 완전히 달라진 것은 아니라고 합니다. 디지털 경험은 기존의 사람과의 커뮤니케이션 경험과는 다른 차원의 새로운 경험이라고 하는데요, 커뮤니케이션을 변화시킬 가장 똑똑하고 영리한 도구, 텍스트 즉 UX Writing이 그 접점에서 큰 역할이 수행할 것이니, UX Writing이 얼마나 중요한지 아시겠지요?  그래서 세션 중 연구원님은 ‘다른 차원의 새로운 커뮤니케이션 경험’을 어떻게 정의하셨냐면요,보이스에서 텍스트로 커뮤니케이션 수단의 시프트상호작용 양방 소통보다는 일방향적인 정보의 전달과 주입말의 템포나 보이스 톤 등 언어적 소통보다는 폰트의 크기, 스타일 등 비언어적 요소의 소통  쉬운 예로, 우리는 여태 브랜드에 불만을 품으면 대면으로 점원에게 컴플레인을 호소했지만, 이제 잘못의 대상은 브랜드 전체가 지게됩니다. 온라인 상에서 고객은 브랜드를 이미지와 텍스트로 처음 접하고 머릿 속 깊이 브랜드 이미지가 이미 각인되기 때문인데요. (텍스트의 톤앤 매너로 고객의 상황을 헤아리고 브랜드를 전방위적으로 보호하며 전체 이미지를 대변하게 되는 세상이라구요.)  그렇다면 차기 커뮤니케이션 수단인 ‘텍스트’를 다루는 필력을 높여야 겠지요? 1. 맞춤법은 지켜야합니다. 2. 외래어 표현도 아름다운 한글로 바꿔보고, 3. 불쾌한 오타도 없도록 하는 것은 당연지사겠지요.  텍스트를 곧이 곧대로 받아들이는 고객들에게 정중하게 예의를 차려야하니까요. 그렇게 쌓인 사례로 '브랜드 형성 과정에서 조직 간 얼라인을 맞춘 우리 브랜드만의 원앤온리 고유 필체가 담긴 스타일 가이드를 정립'하면 좋습니다.    -디지털을 이제부터 앞으로 가까이 해야하는 우리는 사용자 경험을 중시하여 전략X전술을 수립해야 하는 난관을 매일 마주해야하는데 주된 커뮤니케이션 수단이 Text라면, 우리는 어떻게 비용과 시간을 최대한 아껴서 효율적인 문구를 뽑아낼 수 있을까요? 여러 후보 중 어떠한 문구가 가장 효율적인지 판단하기 어렵다면, 직접 사용자를 대상으로 테스트를 해보는 것이 정답이겠습니다. 특히 중요한 CTA는 전환율을 좌우하는 만큼, CTA의 단어는 매우 중요하고 또 철저하게 고객 관점에서 전개되어야 합니다.우리는 이를 뷰저블의 a/b테스트로 각각의 텍스트에 대한 민감도를 테스트해보고 이탈률과 전환률을 살펴볼 수 있습니다. 디지털 비즈니스를 경험하신 분이라면 아시겠지요. 전환율을 좌우하는 CTA 버튼 상의 텍스트는 고스란히 매출에 직결되거나 고객의 어려움을 즉각 해결해 주어야 하는 의무를 가지고 있기 때문에 철저히 고객 관점에서, 특히나 예민하게 다루어야 합니다. 그럴 때는 뷰저블의 a/b테스트로 각각의 텍스트에 대한 민감도를 테스트해보고, 비호감적인 텍스트로 설마 이탈하는 것은 아닌지를 관찰할 수 있겠는데요. 아래 예시에서 두 CTA의 이탈율과 전환율을 살펴볼 수 있습니다.([연재2]에서 보신 바와 같이, ) Click PV Rate가 더 높았던 A페이지가 전환율이 높고, 이탈율이 낮은 것을 확인할 수 있습니다. 또 무엇보다 즉각적이고 빠르게 A/B Test를 진행할 수 있기 때문에 최소한의 공수로 검증 가능한 단계를 거쳐 정성적인 서술형 텍스트의 반응을 정량적인 결과로 얻어갈 수 있습니다. UX Writing을 통해 생소한 사람들은 큰 틀에서 콘텐츠 개선을 한다 다짐하고, ‘우리 사용자 경험을 텍스트로써 더 좋게 만들자’고 의지를 다지면 분명 눈에 보이는 개선을 발견하실 수 있을거예요. 그리고 '뷰저블의 a/b테스트로 Good & Bad 텍스트를 가르는 테스트를 번복하며, 스타일가이드를 편찬하는 작업을 브랜드 성장의 원동력으로 하면 더할나위 없겠죠'라 말씀을 끝으로 선임님의 세션은 마무리되었습니다. 아래 글은 디지털인사이트에서 이미 배포하신 좋은 기사도 함께 공유합니다! :) UX Writing A/B 테스트, 클릭 한 번으로 고객언어 10분 내 반영 - DIGITAL iNSIGHT 디지털 인사이트 (ditoday.com)  그럼 이어서, 현장에서 주신 좋은 질문들 몇가지 공유합니다!  Q1.조직 내 뱃사공들이 많으면 텍스트의 톤앤 매너가 달라지기 이룻인데요.그 과정에서 뱃사공들끼리 의견을 하나로 통일할 수 있는 대화Tip 딱 1개 부탁 드립니다.  ▼ A1.대화는 많이 하면 할수록 배가 산으로 가는 법... 기준이 잡혀있어야 합니다. 무엇이 좋은지 이야기하는 것이 아닌, 스탠다드&가이드라인을 정했으면 무엇이 더 그 것에 부합하는지,우리가 세운 가이드라인에 얼마나 일치하는지 평가하는 식으로 대화해서 풀어나가면 좋을 것 같습니다.   Q2.UI 전체적으로 조화로움도 따져야하니까, 다른 콘텐츠랑 라이팅이 결합되었을 때도 고려해야죠.라이팅 단독으로도 만점 효과를 기대할 수 있을까요?  ▼ A2.텍스트 중심으로 이야기했어도, UX가 결국 텍스트만으로 이루어지는 것은 절대 아니죠. 버튼 크기는 2글자 폭인데, 4글자가 들어가서 두줄이면 이상하니 디자인 가이드를 참고해야 하고요.대신, 텍스트 영역에서 여러가지 실험을 설계헤보고 변수를 틈타보는 성장을 시도할 수 있어요.뷰저블의 A/B테스트 : UX Writing 기능이면, 동일한 조건에서 디자인이 전부 똑같을 때, 텍스트 변화는 어떤 결과를 초래하더라를 알 수 있죠. 그 결과를 수렴하며 변수들을 제거해나가 가장 좋은 디자인+텍스트 조합을 찾는 것이 중요하겠습니다.  Q 2-1.알겠습니다. 그럼 버튼 상 텍스트를 개선해서 전환율을 높이겠어! 했는데, 전환율에 유의미한 변화가 없거나, 오히려 반감을 주는 경우엔요? ▼ A 2-1.A/B테스트로 무조건 좋은 안을 도출해내겠어! 라기보단 테스트한다는 관점에서 활용해야 합니다.전환율이 떨어진 것을 실패가 아닌, 하나의 사례를 수집한 것으로 봐야하는 태도가 중요합니다!    이상입니다! 

[연재 2] UX라이팅 세미나가 열린 날 Part.1 : UX 라이팅 처방전

[이전 글]► [연재 1] UX라이팅 세미나가 열린 날 Part.0 : 웰컴사(링크)    1. UX 라이팅이 서비스에 미치는 영향 / UX Writing Lab - 이춘희 대표 이춘희 대표님의 UX Writing Lab은, "다양한 제품과 기업의 웹사이트가 구축되는 과정에서 포착한 온라인 생태계의 경험치로 각 업무적 환경에 마주한 콘텐츠 전략을 UX 라이팅으로 단어를 조각하여 처방전을 내려 주신다" 고 합니다. UX 라이팅은, 사용성이나 브랜드 경험을 향상시키기 위해 인터넷 인터페이스 안에서 사용하는 말투와 단어의 성격을 다루는 것을 의미하는데요, 구글과 같은 실리콘밸리에서는 UX설계 프로젝트에서 콘텐츠 전략이 세워지면 UX라이팅으로 섬세하게 심리를 다스리는 전술을 수립합니다. (반면 아직 국내에서는 “콘텐츠 전략”이라는 분야가 자리를 잡아가는 중이구요) 국내의 몇몇의 기업들(쿠*, 토*)이 선구자로써 사용자가 대면한 '불쾌한 상황'과 '돌발상황 해결이 시급' 한 영역에서 ‘우리 회사의 보편적인 언어 레벨과 스타일’을 정립하고 고유의 브랜드 경험을 확장해 나가고 있습니다.  그럼 이 UX Writing 전략을 어떻게 적용해볼 수 있을까요? 1. 먼저 사용자의 머뭇거림이 같은 곳에서 번복적으로 캐치되어 UX 개선 프로젝트에 가담되었다면, 글자로써 명확하게 사용자에게 전달할 수 있는 서비스의 영역이 어디인지 살펴봅니다. 2. 1에서 고안하여 수립한 문구들은 사용자의 Flow Journey에 영향을 미친다는 것을 반드시 염두하고, 사용자가 듣고 싶은 언어와 문구로 텍스트를 설정합니다. 3. 여러 문구를 동등하게 테스트하고 솔직한 데이터로 검증하여 어떤 것이 가장 교감을 잘 이루었는지,  우리 사용자의 결에 맞는 어투를 찾아 전체적인 톤앤 매너를 정립해 나가게 됩니다.  ▲위의 3가지 단계를 이미 경험해본 쿠*이나 토* 등 UX라이팅이 잘 이루어진 몇몇의 Best 기업들은 ▼아래 Top 5도 늘상 인지하여 잘 정돈된 브랜드만의 고유 문구들로 UX라이팅의 영역을 넓혀간다고 합니다.  1. ‘어려운 말은 최대한 삼가하자’는 언어적 측면Simple, Basic, Essential. 글을 쉽게 표현하여 사용자의 편의 차원에서 전달하면, 그 글을 읽으면서 느끼는 호감적인 감정들이 기업에 그대로 전가된다고 합니다. 쉽고, 재미있고, 설득력있게.그 중 가장 유명한 예시는 아마 애플의 사례가 아닐까 싶네요. ‘데이터 삭제권’보다는 ‘당신의 지난 위치 기록은 그저 지나간 이야기일 뿐’, 이라고 바꿔 표현하여 쉽고  2. ‘사용자의 탐색이 끊어지지 않도록 정보의 오류를 줄이자’는 사용성 측면정보가 적당한 위치에, 예상하는 위치에 있는지, 글자 크기와 단락들이 정보 계층 구도로 잘 맞추어져 있는지, 그리고 그 단락들 간 배치한 여백들이 중요도를 잘 표현하고 있는지…에 따라 사용자는 읽기 싫은 정보, 읽고 싶은 정보를 구별한다고 해요. 가독성을 높이는 것이 어렵다면, 대충의 큰 개요는 파악할 수 있도록 단어 간의 그루핑을 신경써야 합니다.  3. '사용자 행동에 영향을 미치는 글자들을 조합하고 검증'하자 전환율 측면UX라이팅이 전환율을 높일 수 있다는 건 기정사실. 사용자가 얻고 싶은 가치를 문장으로 발굴하는 과정에서 사용자는 어떤 상황에 처해있는지, 이루고자 하는 목적은 무엇인지, 제품이 UX와 잘 맞아 떨어지는지를 파악하고자 한다면, 뷰저블의 a/b테스트의 UX Writing 기능으로 테스트 > 검증★을 반복해보세요. 글자들이 불러온 사용자 데이터로 UX라이팅에 대한 의사결정을 내릴 수 있습니다.  -  ★뷰저블의 A/B Test - UX Writing은 무엇이고, 또 어떻게 테스트할 수 있을까요?뷰저블의 A/B Test - UX Writing기능은, a와 b 중 어떤 텍스트가 고객 언어로써 효용성이 높은지 빠르게 검증할 수 있는 도구 입니다. 뿐만 아니라 그 단어가 왜 선호되는지의 이유를 과정으로 확인하여 우리의 이해를 돕는 것은 물론, 누구에게나 납득 가능한 가시적인 분석 자료로 증명이 가능한데요. 저희 뷰저블에서 직접 A/B Test를 진행한 사례를 통해 자세하게 설명 드릴게요!   의도│ 사용자가 1:1문의하기 전에 먼저 가이드(Documentation)을 클릭하는 것을 유도하기 위해서는 어떠한 문구가 보다 효과적일지 직접 A/B Test를 해보겠습니다.   가설│ 사용자에게 친절한 톤으로 안내를 드리면 Documentation을 클릭하는 사용자가 더 많아질 것이다.  [A]직관적인 안내문과 영어 CTA (GO)[B]친절한 안내문과 한글 CTA 각 안내문과 CTA에 대하여 A/B Test를 진행해 보겠습니다.  증명│클릭 히트맵으로 보니 A페이지의 전환 CTA를 클릭한 비율이 더 높은 것을 확인할 수 있습니다.Tip) 해당 페이지에 방문한 PV가 약간씩은 상이하므로, Click PV Rate를 위주로 분석해 보세요! 결론│ 히트맵을 함께 살펴보니, 가설이 틀렸다는 것을 확인할 수 있었습니다. 고객이 어려움을 맞닥뜨린 순간에 보다 친근한 톤으로 안내를 드리면 유입이 높아질 것이라 생각했는데...직곽적인 텍스트가 사용자의 참여를 보다 높게 이끌어내는 것을 확인하였습니다.  만약 A/B Testing 과정 없이 그저 "예상"으로만 안내 문구를 변경했다면, 오히려 사용자가 Documentation을 직접 확인하는 경우가 더 낮아졌을테고, 어쩌면 문의 답변을 기다리느라 좋지 못한 사용자 경험을 겪었을 수도 있겠네요!  (뷰저블은 1:1문의 수가 더 늘어났을 거고요!)뷰저블에서는 누구나, 쉽게 몇번의 클릭만으로도 이와 같은 테스트를 진행할 수 있기 때문에 개발팀 리소스 없이도 즉각적인 검증이 가능하다는 특징! 이제는 뷰저블을 통해 "감"이 아닌 직접 테스트와 검증을 통해 UX Writing을 개선해보세요! :) ►지금 즉시 이용해보러 가세요! (링크)  - (그리고 바로 아까 위의 글이랑 이어서)4. ‘사용자가 온라인 서비스 환경에 익숙해지도록 동일한 경험을 제공하자’는 일관성 측면회사가 늘상 유지해야하는 일관성의 기준과 체계를 만드는 것이 중요해졌습니다. 용어, 단어 하나가 어긋나면 서비스의 불신으로 이어질 수도 있습니다. 요즈음에는 일관성을 관리하려고 조직내 UX팀을 신설하여 사내 콘텐츠 체크 리스트도 작성하고, 기획자들 간 발생하는 갭을 줄이기 위해서 스타일 가이드도 만들고 있다네요.  ‘사용자와 교감을 이루어 호감도를 높이자’는 브랜드 측면텍스트에 재미나 위트를 장착하여 대화하는 느낌으로 교류를 이어가다 보면 없던 감정도 마구마구 생기구 교감이 이루어지겠죠…♥? 토스도 Humanized 라이팅을 참 잘하는 기업이라고 예를 드셨습니다. 고객과 서비스 인터페이스가 만나는 지점에서 사용자의 감정을 이해하고 공감하는 것이 그 무엇보다 중요하겠습니다.  Q&A+ 그리고 이춘희 대표님의 세션에서 영감 받으신 어느 한 분이 문뜩 떠올려 주신 좋았던 질문  Q. "글꼴이나 폰트 크기의 차이로 사용자의 탐색을 도와 정보 계층 구조를 명확히 하자” 라 하셨는데요,정보가 적당한 구도에 있는지 판단하는 그 과정에서 UX디자이너 vs UX라이터 간 충돌하기 마련인데... 어떻게 사이좋게 우애롭게 결과물을 낼 수 있을까요?" ▼ A. 스퀸트 테스트 [Squint 동사: 눈을 가늘게 찡그리고 보다]”를 시도해보면 좋습니다. 이마와 안면 근육에 힘 빡 주고 눈을 찡그리듯 모니터를 응시했을 때, 중요한 정보는 눈에 들어올테고, 그렇지 않은 정보는 흐릿하게 보일건데요. 우리가 전달하려는 핵심 정보가 제대로 전달되는지 Quick & Easy로 Instatnt하게 Check할 수 있는 가장 Simple한 절차라 말씀드리겠습니다.잠재 사용자들에게 직접 테스트를 받아도 좋지만, 조직 내 다양한 직무자들 간 여러 번 시도해보길 권합니다. 테스트 결과는 보편적이기 때문에, 반박할 여지가 줄어 직무 간 의견 차이를 좁힐 수 있을테니까요. 그렇게 날카롭고 뾰족한 정보로 사용자들이 벨류를 얻어갈 수 있도록 결과물을 점차 다듬어 가는 겁니다.    이상입니다! -  -