세균무기가 알려주는 서비스 기획의 모든 것(4-2)
뛰어난 제품을 만들기 위해 서비스 기획자 및 PM/PO가 알아야 할 가이
4-6. 기타 서비스 구현에 필요한 요소
마이크로카피(microcopy)
웹과 모바일 서비스의 UI에 포함되어 사용자의 행동을 유도하거나 사용성의 향상, 브랜딩과 차별성 강화, 긍정적인 사용자 경험을 제공하기 위해 작성한 단어 또는 문구 등의 메시지를 일컫는다.
좋은 마이크로카피의 조건: 올바르게 쓰기
* 맞춤법 검사기: 다음, 네이버, 부산대, 국립국어원
명확하고 이해하기 쉬운 글
토스와 카카오뱅크가 전통 금융권과 달리 20, 30대 고객이 많은 이유 중 하나는 어려운 금융 용어를 MZ세대도 쉽게 이해할 수 있게 표현했기 때문이다.
1) 고객의 행동을 구체적이고 직관적으로 표현
페이지나 메뉴 이름, 버튼, 팝업 창 등을 표현할 때에는 대괄호([])를 사용한다.
'클릭하세요, 터치하세요' -> '눌러주세요, 선택하세요'
2) 쉬운 용어 표현
사흘간 -> 3일간
3) 법률, 의료, 행정, 금융, 회계 등 이해하기 어려운 전문 용어의 사용 자제
익일, 익월, 당월 -> 다음날, 다음 달, 이번 달
매수하기, 매도하기 -> 구매하기, 판매하기
4) 어려운 한자어나 한자식 표현 자제
우선적으로 -> 우선으로, 먼저
5) 이해하기 어려운 외래어 사용 자제
드래그 앤 드랍 ⇢ 끌어다 놓기
싱크 ⇢ 동기화
체크 ⇢ 선택
more ⇢ 더보기
go to top ⇢ 맨 위로
FAQ ⇢ 자주 묻는 질문
help ⇢ 도움말
간결하고 가독성이 좋은 글
1) 문장을 짧고 간결하게 표현
'정말, 참, 매우, 성공적으로' 등의 부사어나 '처리, 적용, 완료' 등 서술어에 덧붙이는 표현은 가급적 사용하지 않는다.
2) 두괄식으로 표현한다.
일정한 형식과 일관성이 있는 글
1) 톤 앤 매너 유지
ex) ~해요와 ~합니다 섞지 않기
젊은 층 타깃: 친근하고 유머러스한
금융이나 법률 서비스: 전문적이고 신뢰감 있게
2) 표현 및 형식, 용어 통일
제품이나 버튼 내 텍스트에는 마침표를 찍지 않는다.
입력 상자 안의 입력 폼 힌트 메시지 및 유효성 메시지의 문구도 일관된 형식에 맞춰 작성한다.
ex) 정확한 이메일을 입력해 주시기 바랍니다. ⇢ 이메일을 입력해 주세요.
용어는 하나로 통일해서 사용한다. ex) 성함, 성명 ⇢ 이름
숫자, 단위 등의 표현 형식을 통일한다.
시간 표기를 통일해서 쓴다. 단, 국가별로 날짜와 시간을 다르게 표기하므로 이 점은 고려해야 한다.
사람 이름이나 닉네임 뒤에 '님'을 쓸 때는 '세균무기 님'처럼 띄어 쓰지만 '회원님, 고객님'처럼 명사 뒤 접미사로 사용된 경우에는 붙여 쓴다.
쌍점(:)을 사용할 경우, 앞은 붙여 쓰고 뒤는 한 칸 띄어 쓴다. 단, 시간을 표시할 때는 앞뒤 모두 붙여서 쓴다.
기호 앞 뒤에 빈칸을 두지 않는다. ex) 축구 & 야구 베스트 10 ⇢ 축구&야구 베스트 10
사칙 연산을 나타내는 수학 기호를 쓸 때는 숫자와 기호 사이에 빈칸을 넣는다.
단, 나누기 기호 대신 빗금을 사용할 때는 기호 앞뒤에 빈칸을 두지 않는다.
곱하기 기호는 소문자 x로 표기하며 별표(*)를 사용하지 않는다.
공감력과 감수성이 높은 글
1) 긍정적인 표현 사용
'안 된다, 불가하다, 제한된다' 등의 부정적 표현은 권유나 긍정적인 표현으로 바꾼다.
ex) 비밀번호가 틀렸습니다. ⇢ 비밀번호가 일치하지 않습니다.
2) 필수약관 미동의시 사용이 불가합니다. ⇢ 필수약관은 반드시 동의가 필요합니다.
- 혐오나 차별이 느껴지거나 존중하지 않는 표현은 쓰지 않는다.
- 역사나 문화, 종교, 언어 등 지역적 특수성을 고려한다.
- 정치, 지역, 성별 이슈 등 논란이 발생할 표현은 삼가야 한다.
최근 UX 라이터를 중심으로 CTA 버튼의 전환율을 높이기 위해 설명 문구나 버튼명을 자극적으로 표현하거나 컨펌쉐이밍이라는 다크패턴을 사용하는 경우가 있다.
컨펌쉐이밍: 불안감, 수치심, 걱정, 본인의 판단 능력에 대한 불신을 불러일으키는 문구를 사용해서 사용자가 원치 않는 선택을 하도록 종용하는 다크패턴의 한 유형.
기획자에게 있어 좋은 사용자 경험과 높은 전환율은 트레이드오프의 대상이 아니다.
나만의 마이크로카피 작성 팁
1) 버튼 내 텍스트에는 마침표를 찍지 않기
마침표를 찍으면 버튼명이 왼쪽으로 쏠려 보여 안정적인 느낌이 사라지므로 의도적으로 마침표를 찍지 않는다. 버튼과 태그는 HTML 태그가 다르다.
2) 의도된 틀린 맞춤법의 사용
일반 카피 라이팅, 테크니컬 라이팅과 UX 라이팅이 다른 이유는 단말기나 해상도, UI 등의 환경이나 제약 사항 때문에 '더 보기' 대신 '더보기'를 사용하는 것과 같이 의도적으로 맞춤법에 맞지 않게 붙여 쓰거나 텍스트 대신 아이콘 등을 사용한다는 점이다.
또한, 사용자에게 익숙한 표현이지만 맞춤법에 맞지 않는 경우에 맞춤법의 옳고 그름을 떠나 사용자들이 해당 단어나 문장을 의식하는 순간 사용자의 이용 흐름이 끊길 수 있기 때문에 의도적으로 맞춤법을 틀리게 사용하기도 한다. ex) 최댓값, 최솟값, 섬네일, 콘퍼런스 ⇢ 최대값, 최소값, 썸네일, 컨퍼런스
UX 라이팅은 사용자의 경험을 최우선으로 고려한 글쓰기이기 때문에 맞춤법에만 집중하기보다는 사용자의 이해와 사용성을 높이는 데 더 중점을 두어야 한다.
3) 영문 대소문자의 사용
문장의 경우: Sign up for a free trial today and see how our product can help you.
구의 경우: Amazon Prime
페이지 제목이나 강조가 필요한 경우: CHECK YOUR CREDIT
4) 절대적인 규칙은 없다
[1] 글자 길이의 처리: 줄 바꿈 처리
줄 바꿈 처리를 하는 경우, 행이 늘어남에 따라 콘텐츠를 표시하는 영역의 높이가 늘어날 수 있기 때문에 UI가 깨지지 않도록 마크업이나 UI 설계 시 주의해야 한다.
디지털 접근성을 지원하기 위해 폰트 사이즈를 고정하지 않고 가변 폰트를 지원하는 경우에는 사용자가 단말기에서 글꼴 크기를 '매우 크게'로 수정할 수 있다. 그러면, 폰트가 커지면서 문장의 길이도 늘어나 줄 바꿈 처리가 된다.
이때 스크롤 처리를 하지 않았다면 콘텐츠가 잘려서 볼 수 없는 문제가 발생할 수 있다.
따라서, 모바일 앱의 모든 화면에는 스크롤 처리가 필요하다.
스크롤 처리를 할 때 버튼을 화면 바닥에 붙여 띄워 놓은 화면이 있다면, 콘텐츠 영역 하단에 해당 버튼의 높이만큼 마진값을 추가해 줘야 한다.
앱 바 메뉴명이나 버튼 내 텍스트와 같이 줄 바꿈이나 말 줄임 처리가 불가능할 때는 디자인 아이콘이나 픽토그램 등의 직관적인 이미지로 처리하곤 한다. ex) 글로벌 서비스
이 외에도 텍스트를 표시하는 영역의 넓이에 따라 스크립트를 통해 자동으로 폰트 사이즈를 가변 처리하거나 표시 방법을 변경하기도 하고, 그라데이션 처리를 하는 등 다양한 방법을 사용하여 글자를 처리한다.
엔터키를 사용한 수동 줄 바꿈 시 주의사항
'word-break:keep-all'과 같은 줄 바꿈 속성이 있고, 개발자가 이러한 속성으로 줄 바꿈 처리를 하고 있으니 제발 엔터 키를 이용한 수동 줄 바꿈은 하지 말자.
[동적 생성]
클라이언트 화면이 사용자의 입력이나 관리자를 통한 운영자의 입력에 따라 실시간으로 변화하거나 생성되는 것.
클라이언트를 기획할 때 자주 변경될 가능성이 큰 요소는 동적 생성을 고려해서 기획해야 한다.
동적 생성을 지원하면, 사용자에게 보다 나은 사용자 경험 제공, 서비스의 유지 보수 쉬움
[모션]
기획자는 자주 사용하는 모션이나 전환 효과의 명칭을 숙지하는 것이 중요하다.
전환효과(transition pattern): 구글의 머티리얼 디자인 가이드에서 사용하는 표현으로, 화면이 전환될 때 애니메이션을 적용하는 기능. 전환 효과를 통해 자연스럽고 부드러운 화면 전환 표현
모션의 정확한 명칭을 알고 해당 모션명을 기획서에 명시해 주는 것이 좋다.
그리고, iOS와 안드로이드 디자인 가이드가 조금 다르기는 하지만, 모션의 액션을 수정할 필요가 있기 때문에 모션의 지속 시간인 듀레이션(필자는 playtime이라는 표현 선호)과 시간이 지남에 따라 속도가 빨라지거나 느려지는 이징 효과 정도는 알고 있으면 좋다.
* 다양한 전환 효과가 있으니 다음 링크에서 자세히 살펴보기를 바란다.
[쿠키와 세션, 그리고 캐시]
HTTP 인터넷 통신은 사용자의 인풋에 의해 클라이언트가 서버에 요청을 보내면 서버가 클라이언트의 요청에 맞는 응답을 보내고 연결을 끊는 비연결 지향이라는 특성이 있다.
그리고 비연결 지향이라는 특성 때문에 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며, 서버에서 변경되는 상태 정보를 실시간으로 반영하지 않는다는 특성이 있다.
이처럼 실시간 통신을 하지 않기 때문에 사용자는 데이터와 배터리의 사용량을 줄일 수 있고, 서비스를 제공하는 기업에서는 불필요한 트래픽을 줄임으로써 사용자와 기업 모두 리소스를 낭비하지 않는다는 장점이 있다.
하지만, 이런 특성으로 인해 한 페이지에서 로그인한 후 다른 페이지로 이동하게 되면 해당 사용자가 이전 페이지에서 로그인한 사용자인지 알 수가 없다. 웹페이지는 개별 URL을 가진 독립된 페이지다.
따라서, 어떤 페이지에서 로그인했다고 하더라도 다른 페이지로 이동하고 나면 로그인 여부는 물론이거니와 어떤 계정이 로그인했는지를 알 수가 없다. 이러한 문제를 해결하고, 해당 계정의 로그인 상태를 유지하기 위해 쿠키와 세션이라는 기술을 사용한다.
인터넷 통신의 특성으로 인해 시세 변동을 실시간 보여줘야 하는 주가 창과 같이 실시간 정보의 제공이 중요한 기능을 개발할 때는 HTTP 인터넷 통신을 사용하지 않고, 웹소켓(web socket) 통신을 사용하여 데이터를 주고받는다.
웹소켓 통신은 실시간으로 데이터를 주고받기 때문에 데이터 소모가 많아 보통 매우 작은 데이터를 주고받으며, 배터리 소모가 커 단말기가 빠르게 뜨거워지는 것을 확인할 수 있다. 따라서, 쇼핑 앱에서 변경된 가격이나 재고 수량을 실시간으로 반영하기 위해 웹소켓 통신을 사용하지 않는다.
보통 기획자나 개발자가 쿠키와 쿠키 스토리지를 모두 쿠키라고 표현한다.
쿠키 스토리지: 브라우저를 설치할 때 컴퓨터의 하드디스크에 쿠키를 저장하기 위해 할당된 저장 공간.
쿠키: 웹사이트에 방문했을 때 해당 서비스를 제공하는 서버에서 생성하여 사용자 단말기의 쿠키 스토리지에 저장되는 작은 데이터 파일. 이 데이터 파일은 이름, 값, 도메인, 유효기간 등의 정보를 담고 있는 키와 값으로 구성된다. 사용자의 단말기에 저장되기 때문에 보안이 취약해 민감한 데이터를 저장하지 않는다.
쿠키 스토리지는 해당 쿠키를 생성한 서버에서만 열람할 수 있고, 사용자가 브라우저 설정 화면이나 개발자 도구에서 삭제할 수 있다. 기획자는 쿠키와 쿠키 스토리지를 활용하여 자동 로그인 기능이나 팝업에서 '오늘 하루 열지 않기', 사용자가 원하는 스타일의 레이아웃 설정값을 유지하는 기능을 제공할 수 있다.
세션은 세션아이디라는 표현으로 더 자주 쓰인다. 쿠키와 동일하게 쿠키 스토리지에 저장된다.
쿠키처럼 세션 역시 유효기간이 존재하여 기간이 만료되면 자동으로 로그아웃 되고, 다시 로그인을 통해 세션 아이디를 발급받아야 한다. 따라서, 기획자는 세션 유지 기간을 정해야 한다.
토큰(JWT, Jason Web Token)이란, 로그인을 유지하기 위한 세션이 웹 기술. 네이버, 카카오와 같이 다수의 도메인 서비스를 가지고 있는 기업에서 사용자의 통합 ID를 지원하거나 타사에 [네이버 아이디로 로그인하기]나 [카카오 계정으로 로그인하기]와 같이 싱글 로그인(SSO, Single Sign-On) 기능을 제공하기 위해 등장한 대체 기술.
세션 아이디는 발급한 서버만이 열람할 수 있지만, 토큰은 네이버와 카카오와 같이 SSO를 제공하는 회사의 서버가 SSO를 적용하려는 회사의 서버에 열어볼 수 있는 임시 키를 제공하여 타사에서도 네이버 계정이나 카카오 계정으로 로그인을 할 수 있도록 지원한다. 대신 보안을 위해 사용자의 ID와 권한을 짧은 문자열로 저장한 유효기간이 짧은 액세스 토큰과 액세스 토큰을 재발급하는 데 사용되는 유효기간이 긴 리프레시 토큰을 구분하여 발급하고 있다. 그에 따라 액세스 토큰이 해킹당한 경우에는 리프레시 토큰을 사용하여 새로운 액세스 토큰을 요청해 재발급하며 보안을 강화하고 있다. 최근에는 세션보다 토큰을 많이 사용하는 추세다.
캐시 스토리지는 쿠키 스토리지처럼 브라우저를 설치할 때 컴퓨터의 하드디스크에 이미지나 CSS, JS 파일 등을 저장하기 위해 할당된 저장 공간으로, 보통 캐시라고 부른다. 재방문했을 때 해당 파일을 서버에서 다시 다운로드하지 않고, 캐시 스토리지에 저장된 파일을 사용한다. 이를 통해 사용자는 데이터 소모량을 줄이고 빠른 페이지 로딩 속도를 경험할 수 있으며, 기업은 트래픽을 줄일 수 있다. 캐시 스토리지에는 파일이 파일명과 파일 경로 형태로 저장된다.
4-7. IA 작성 및 Flow 설계
IA는 해당 프로젝트에 참여하는 구성원들이 어떤 화면과 기능을 가진 서비스를 개발해야 하는지 전체적인 구조를 빠르고 쉽게 이해할 수 있도록 돕기 위해 작성한다.
필자는 IA를 2가지 형식으로 작성한다.
하나는 프로덕트 팀을 비롯하여 비즈니스 직군도 서비스의 전체적인 구조를 빠르고 쉽게 이해할 수 있도록 도형으로 작성한 형태.
다른 하나는 프로덕트 매니지먼트를 위해 메뉴와 화면, UI와 프로세스, 기능, 팝업과 메일 폼 등 개발에 필요한 사항을 구체적으로 명시하고 이를 페이지 코드와 함께 테이블 형태로 정리한 형태다
웹 서비스의 IA라고 하면, 7장 검색 엔진 최적화(SEO, Search Engine Optimization)를 학습할 때 다루는 사이트맵과 혼동하는 경우가 있다.
사이트 맵은 도메인 내에 구성된 URL 단위의 페이지를 페이지 간의 관계, 즉 위계에 따라 정리한 목록으로, 검색 엔진이 웹사이트를 크롤링하고 색인화하는 데 도움을 주기 위해 개발자가 사이트맵 생성 도구를 사용해 XML이나 HTML 형식으로 작성하는 파일이다. 따라서 IA와는 다르다.
XML(eXtensible Markup Language)은 HTML과 같이 텍스트 기반의 마크업 언어다. HTML이 웹페이지를 생성하는 데 사용되는 언어라면, XML은 데이터를 저장하고 교환하는 데 사용하는 언어다. XML은 태그를 사용하여 데이터의 요소를 정의하고 요소의 속성을 지정하는데, 웹사이트의 URL과 제목, 설명, 갱신 날짜 등을 포함한 사이트맵이 XML로 작성된다.
2가지 유형의 IA 중 어떤 IA가 더 중요한지 묻는다면 테이블 형태로 작성한 후자의 IA라고 답할 것이다.
기획서를 작성하는 시점에서 미래에 등장할 화면이나 장표의 페이지 코드를 알 수 없다.
때문에 대략적인 코드를 작성하며 기획서를 작성하게 되고, 기획서 초안이 완성되어 검토를 진행할 때 코드 체계를 다시 정리 및 반영하게 되는데, 이때 테이블 형태의 IA를 작성하게 된다.
IA를 제대로 작성하면, 해당 서비스가 몇 개의 페이지 또는 화면으로 구성되고, 몇 개의 모달 팝업이나 메일 폼이 필요한지 정확히 파악할 수 있으며, 작업자가 빠르게 페이지를 찾을 수 있다.
프로덕트 매니지먼트를 위해 칸반 보드에 이슈를 등록하는 기준이 되기도 하고, 각 이슈에 우선순위를 결정하기 위해 ICE 스코어를 부여하거나 작업 시간을 산정하기 위해 스토리 포인트를 부여하는 데 활용되기도 한다.
웹 서비스는 링크를 이용해 페이지에서 페이지로 다이렉트로 이동하기 때문에 서비스의 구조를 설계하거나 이해하는 것이 어렵지 않다. 따라서, 사용자에게 제공하는 사이트맵이나 페이지 내비게이션도 단순하고 굳이 도형으로 표현한 IA를 작성할 필요가 있을까 싶기도 하다.
하지만, 모바일 앱을 기획할 때는 웹페이지와 달리 전환 효과를 표현하기 위해 화면과 화면이 스택 형태로 층을 쌓게 되고 스택을 고려하며 버튼 클릭에 따른 화면의 이동 경로를 처리해야 하기 때문에 이를 이해하고 기획하는 데 IA가 큰 도움이 된다.
스택은 화면이 순서대로 저장되어 관리되는 공간으로, 마지막으로 실행한 화면이 스택의 최상단에 저장되고 먼저 실행한 화면이 스택의 하단에 저장되는 방식으로 관리한다. 이 스택 기능을 통해 화면 전환 시 이전 화면이 배경에 깔려 있는 효과를 제공할 수 있다.
모바일 앱은 웹사이트와 달리 페이지에서 페이지로 다이렉트로 이동하는 것이 아니라 화면 위에 화면이 얹히며 층을 쌓아간다.
