웹서비스 기획자가 챙겨야 할
9가지 디테일
서비스 기획자로서 웹서비스를 기획할 때, 큰 그림을 그리는 것만큼 중요한 것이 디테일을 놓치지 않는 것이다. 이번 글에서는 웹서비스 기획 시 당연하게 챙겨야 할 9가지 디테일을 간략히 소개하고자 한다. 이러한 소소하게 고려해야 할 요소들을 잘 챙기면, 사용자 경험을 크게 향상시킬 수 있다.
1. 반응형 디자인
반응형 디자인은 다양한 기기와 화면 크기에 맞춰 웹사이트가 자동으로 최적화되는 디자인이다. 반응형 디자인을 고려하지 않으면, 모바일 사용자나 태블릿 사용자가 불편을 겪을 수 있기 때문에 디자이너가 작업함에 있어 더 좋은 방향을 선택할 수 있도록 함께 충분히 논의하고 결정해야 한다.
반응형 vs. 적응형: 반응형 디자인을 많이 고려하지만, 때에 따라 적응형 디자인을 고려하는 게 더 적합하다. 적응형 디자인은 특정 화면 크기에 맞춰 개별적인 레이아웃을 제공하는 방식이다. 디자이너와 함께 그리드 픽셀 최소폭 등 기준을 설정하고, 두 디자인 중 하나를 결정해야 한다.
2. 접근성
접근성은 장애가 있는 사용자를 포함한 모든 사용자가 웹사이트를 쉽게 이용할 수 있도록 하는 것이다. 솔직히 이런 부분까지 고려하지 않는 서비스가 많지만 도메인 중에 헬스케어, 금융 관련 서비스라면 시니어나 금융사기 방지, 장애가 있는 유저 등을 고려해 약자들을 위한 접근성도 늘 마음 한편에 고려해야 한다고 생각한다. (사실 모든 서비스가 그런 부분을 인지해야 한다고 생각함)
명확한 폰트와 색상 대비: 텍스트가 배경과 충분한 대비를 이루어 누구나 쉽게 읽을 수 있도록 한다. 기획자는 디자인 시안에서 폰트와 색상 대비를 확인하고 조정하도록 지시해야 한다. 디자이너들은 서칭해 보면 명도, 채도에 대해 유저를 위한 기준 및 측정하는 툴도 찾을 수 있을 것이다.
접근성 테스트: 다양한 사용자 그룹을 대상으로 접근성 테스트를 실시하고, 피드백을 바탕으로 개선점을 도출한다.
(선택사항) 키보드 내비게이션 또는 대체 텍스트(alt text): 도메인에 따라 혹시 장애가 있거나 사회적 약자가 사용하는 서비스일 경우 키보드만으로 웹사이트를 탐색할 수 있게 하거나, 이미지를 설명하는 텍스트를 추가해 스크린 리더가 이미지를 설명할 수 있도록 한다.
3. 페이지 로딩 속도
페이지 로딩 속도는 사용자 경험에 큰 영향을 미친다. 로딩 속도가 느리면 사용자는 사이트를 떠날 확률이 높아지기 때문에 수동이든, 도구를 써서든 페이지 로딩 속도를 체크해야 한다. 페이지 로딩 시간이 3초를 넘어간다면 개발자, 디자이너에게 최적화 방안을 요청해야 한다.(코드 혹은 이미지 최적화 등)
페이지 로딩 시간 측정: 페이지 로딩 시간이 3초를 넘기면 사용자가 이탈할 가능성이 높아진다. 다양한 도구(Google PageSpeed Insights 등)를 사용해 현재 페이지 로딩 시간을 측정하고 분석한다.
이미지 최적화 요청: 서비스의 퀄리티를 유지하면서도 필요한 경우 이미지를 최적화할 수 있도록 디자이너에게 요청한다. 처음부터 이미지를 다운그레이드하는 것이 아닌, 필요시 최적화를 고려한다.
캐싱 전략 수립: 자주 사용하는 리소스를 캐싱하여 로딩 속도를 개선하는 방안을 개발자와 협력하여 마련한다. 기획자는 캐싱 전략의 필요성을 이해하고, 개발자와 함께 효과적인 캐싱 방법을 논의한다.
4. 사용자 피드백
사용자 피드백은 웹서비스의 품질을 높이는 데 중요한 요소다. 기획자는 초기 기획 단계에서부터 사용자 피드백을 받을 수 있는 체계를 준비하고, 이를 통해 서비스를 지속적으로 발전시킬 수 있다.
피드백 폼: 간단한 피드백 폼을 통해 사용자의 의견을 수집한다.
사용자 설문조사: 특정 기능이나 서비스에 대한 설문조사를 실시한다. 기획 단계에서 가설을 세우고, 이를 검증하기 위한 설문조사를 미리 준비한다.
직접 인터뷰: 주요 사용자와 직접 인터뷰를 진행해 심층적인 피드백을 얻는다. 기획 중간중간에 사용자의 의견을 반영하여 UX를 개선하고, 기획 방향을 보완한다.
5. 오류 처리
오류가 발생했을 때 사용자가 이해하기 쉽게 오류 메시지를 제공하는 것이 중요하다. 잘못된 접근인지, 서버 오류인지, 그렇다면 어떤 동작을 하거나 얼마나 기다려야 하는지 등 명확히 알려주는 화면을 준비해야 한다.
오류 메시지 기획: 사용자에게 친절하고 명확한 오류 메시지를 제공하는 화면을 기획한다. 오류코드는 개발자들이 볼 수 있도록 하고, 사용자에게는 명확하고 이해하기 쉬운 메시지를 제공한다.
UX Writing: 적절한 경고/안내 문구를 사용하여 사용자가 오류 상황에서도 스트레스를 덜 받고 문제를 이해할 수 있도록 한다.
안내 화면: 오류 상황에서 사용자가 어떻게 해야 하는지, 언제 다시 시도할 수 있는지 등을 안내하는 화면을 준비한다.
6. UX 고려 사항
화면 전환 시 UX를 고려하지 않으면 사용자가 불편함을 느낄 수 있다. 뒤로 가기를 했을 때의 동작, 팝업과 모달 사용 여부, 페이지네이션과 무한스크롤 등의 요소를 신중히 결정해야 한다. 이러한 요소를 고려할 때는 개발자와 웹페이지 로딩 속도 등 기능 관련 논의를, 디자이너와 UX관련 논의를 하며 결정해야 한다.
뒤로 가기 동작: 뒤로 가기를 했을 때 사용자가 어디로 이동할지 명확하게 설정한다.
팝업 vs. 모달: 팝업과 모달 중 어느 것을 사용할지 결정하고, dim처리 여부를 고려한다.
페이지네이션 vs. 무한스크롤: 페이지네이션과 무한스크롤 중 어느 방식을 사용할지 결정한다. 무한스크롤을 사용할 경우, 상위 화면으로 돌아가는 방법을 마련한다.
화면 이동과 뷰 차이: 웹서비스가 실행되는 OS에 따라 화면 이동과 뷰 차이를 고려해야 한다.
7. SEO(검색 엔진 최적화)
SEO는 웹사이트가 검색 엔진 결과에서 상위에 노출되도록 최적화하는 작업이다. SEO를 고려하면 더 많은 사용자가 웹사이트를 찾을 수 있다.
메타 태그(Meta tag): 적절한 타이틀 태그와 디스크립션 태그를 작성해 검색 엔진 결과와 브라우저 탭에 노출되도록 한다. 타이틀 태그는 60자 이내로 작성하고, 디스크립션 태그는 150자 이내로 검색 결과에서 웹페이지에 대한 간략한 설명을 확인할 수 있도록 해 준다.
키워드 사용: 주요 키워드를 페이지 콘텐츠에 자연스럽게 포함시켜 검색으로 이어질 확률을 높인다.
링크 구조: 내부 링크와 외부 링크를 적절히 사용해 검색 엔진이 웹사이트를 쉽게 탐색할 수 있도록 한다.
오픈 그래프(Open Graph) 태그: 웹링크 공유 시 나타나는 대표 이미지와 설명을 설정해 SNS에서의 노출 효과를 높인다. 오픈 그래프 이미지와 텍스트를 지정하여 공유할 때 콘텐츠가 잘 나타나도록 한다.
파비콘: 디자이너에게 파비콘을 요청하여 사이트의 완성도를 높인다.
8. 데이터 분석
데이터 분석은 사용자의 행동을 이해하고, 웹서비스를 개선하는 데 중요한 도구다. 분석 데이터를 통해 사용자의 니즈를 파악하고, 이를 반영해 서비스를 최적화할 수 있다.
웹 로그 분석: Google Analytics와 같은 도구를 사용해 웹사이트 방문 데이터를 분석한다.
사용자 행동 분석: 히트맵이나 세션 녹화 도구를 사용하거나 혹은 페이지 이동경로를 분석해 사용자의 행동을 분석한다.
A/B 테스트: 여러 버전의 페이지를 테스트해 어떤 버전이 더 효과적인지 분석한다.
9. 인터랙션 디자인
인터랙션 디자인은 사용자와 웹사이트 간의 상호작용을 설계하는 것이다. 인터랙션 디자인을 잘 고려하면 사용자가 웹사이트를 더 직관적으로 사용할 수 있기 때문에 디자이너와 충분히 고민해보아야 한다.
애니메이션과 전환 효과: 클릭, 호버 등의 동작에 반응하는 애니메이션과 전환 효과를 추가해 사용자 경험을 개선할 수 있도록 툴팁, 디자인 등 디자이너와 상의하여 반영할 수 있다.
피드백 제공: 사용자 동작에 대한 즉각적인 피드백을 제공해 사용자가 현재 상태를 쉽게 이해할 수 있도록 한다. 이때, 스낵바, alert/confirm팝업, 버튼 색상변경, 배지, 로딩 애니메이션 등 다양한 UI요소가 고려되어야 하기 때문에 디자이너와 충분한 고민이 필요하다.
일관된 인터랙션 패턴: 일관된 인터랙션 패턴을 사용해 사용자가 웹사이트를 쉽게 이해하고 사용할 수 있도록 한다.
터치 제스처 고려: 모바일 기기에서 사용자가 웹서비스에 접근할 때 터치 제스처를 고려해 사용자 경험을 향상시킨다. 필수적이진 않지만 별도의 앱이 없는 경우, 웹에서도 모바일 사용성을 고려해야 하기 때문에 언급했다.
마무리하며
웹서비스를 기획할 때 고려해야 할 중요한 디테일들을 잘 챙기면, 사용자 경험을 크게 향상시킬 수 있다. 이번에 소개한 반응형 디자인, 접근성, 페이지 로딩 속도, 사용자 피드백, 오류 처리, UX 고려 사항, SEO, 데이터 분석, 인터랙션 디자인 등의 요소를 잘 고려해 더 나은 웹서비스를 기획하길 바란다. 추후 각 항목에 대해 가능하면 디테일하게 다뤄보겠다.
