프론트 개발자에게 사용자 경험이란?

개발자의 입장에서 사용자 경험을 얘기해보고자 한다.

현재 사용자 중심에서 생각할 수 있는 프론트엔드 개발자의 수요가 많다.

기업은 고객으로부터의 지속적인 피드백을 기반으로 제품 및 경험을 만든다. 기업은 더 나은 사용자 경험을 제공하기 위해 앞으로도 지속적으로 투자할 것이며, 조직은 사용자 경험을 공유하며 발전시키는 책임을 지게 되는 것이다.

보통은 UX 디자이너의 결과를 따른다. 그러나 필자는 프론트엔드 개발자가 UX 디자이너의 역할을 담당하는 프로젝트를 꽤 많이 봤다. 사용자 경험은 실제로 Javascript를 보완한다. 물론 코드 레벨에서의 개선으로 사용자 경험을 개선할 수 있고 여기서 멈출 수 있지만, 코드 레벨을 넘어섰을때 새로운 도전이 될 수 있으며, Javascript는 사용자를 위한 목적이 아니라 도구로서 활용되어야한다.

이 글을 읽는 구독자들이 일하게 될 팀에는 UX 디자이너가 충분할 수 있다. 이 글은 프론트개발자들에게 UX 디자이너가 되어야 한다고 말하지 않는다. 여러분이 언젠가 만날 훌륭한 디자이너와 그룹이 아닌 팀으로 협력하기를 바라는 글이다. 그렇기에 참여하는 프로젝트를 성공적으로 만들고 싶다면 최소한 UX의 기본에 관심을 가져야 한다. 성공한 프로젝트는 우연히 만들어지지 않는다.

사용자를 위한 제품

우리의 사용자가 어떤 그룹에 속할까?

조직은 무엇을, 누구를 위해 만들어야 하는지 알고 있어야 한다.

자주 묻고, 자주 테스트하고, 반복해야 한다. 사용자들이 해결하고자 하는 문제는 무엇인가? 사용자의 목표는 무엇인가? 사용자는 무엇에 대해 걱정하는가? 20대 남성인가? 또는 노인인가? 학생인가? 아니면 공무원인가? 사용자들은 언제 서비스에 방문할까? 가장 먼저 해결해야할 것은 무엇일까? 어떻게 더 나은 경험을 제공할까? 다음 목표는 무엇일까?

사용자들이 문제를 해결하는 데 도움을 주기 위해 그들로부터 정말로 얻어야 하는 최소한의 정보는 무엇인지? 사용자가 서비스 내에서 편안함을 느끼도록 해야 한다.

각 질문들은 새로운 방향을 제시하고, 우리는 제시된 방향을 자세히 살펴보아야한다. 사용자가 만족하는 제품을 만드는데 분명 도움이 될 것이다.

사용성

좋은 제품은 명확하고, 사회적 통념을 활용하여 적시에 적절한 인터페이스를 제공하는 것이다. 프론트엔드 개발자는 단순히 제품을 동작하게 하는 Javascript 작성자가 아니다. 일관된 시각적 계층 구조 유지와 시각적 노이즈를 제거하고, 사용자에게 제공되는 알림, 입력 라벨을 작성하는 것은 제품 사용성에 중요한 역할을 한다.

사용자는 페이지 탐색하여 정보를 찾을 수 있고 적절한 제목, 폰트 사이즈, 알맞는 버튼, 유의미한 라벨 등을 사용하여 사용하기 쉽도록 만들어야 한다. 만약 개발자가 사용자의 행동에 잘못된 영향을 미치는 행위(eg. 복사 붙여넣기 시에 copyright 포함)는 사용자에게 짜증을 불러일으킬 수 있고, 알림의 경우엔 사용자가 사용하는 언어로 제공해야 한다. 사용자에게 유익한 정보를 제공하자

네비게이션이 과부하 되지 않고 사용자에게 필요한 정보들인지 확인한다. 사이트가 복잡한 경우 탐색 경로를 지표로 사용하여 사용자의 위치를 나타낼 수도 있다. 탐색 경로는 페이지 상단에 있고 > 기호를 사이에 두며 마지막 요소를 강조 표시하는 경우가 일반적이다.

메뉴는 사용자에게 표시되면 햄버거바 뒤에 숨겨져 있을 때보다 사용자와 상호작용은 훨씬 크게 작용한다. 메뉴 항목 수와 단계를 강조하지 말자. 사용자는 한 번에 모든 것을 볼 필요는 없다. 사용자가 플로우에 따라 적절한 수준에 있고, 정말로 필요한 순간에 다음 항목을 표시하도록 한다.

모바일은 데스크탑의 작은 버전?

웹과 웹뷰에서의 레이아웃을 결정할 수 있는 프로젝트를 진행한다고 생각해 보자. 준비된 시안이 없고 디자인 프레임워크 컴포넌트로 작업을 진행하라는 요청을 받았다. 이 경우 모바일을 먼저 시작하면 도움 된다. 사용자에게 중요한 컴포넌트 및 인터렉션에 집중할 수 있을 것이다.

프로토타입, 와이어 프레임 또는 최소한의 스케치를 먼저 제작할 수도 있다. 여러 프로토타이핑 도구들의 도움을 받을 수 있지만 가장 쉬운 것은 펜과 종이이다. 우리는 디자이너가 아니지만 프로토타입 작업을 해야 하는 경우 적재적소에 알맞는 컴포넌트를 사용할 준비해야한다. 백지와 같은 상태로 마크업을 진행하지 말자.

모바일은 모바일에 맞는 컴포넌트를 제공했을 때 편안함을 줄 수 있다. 폼을 만든다면 웹의 Input 대신 Stepper, Slider, Radio group, Switcher로 대체한다.

모바일은 터치가 우선시 되어야 한다. 보통 한 손에 엄지손가락으로 수평과 수직 이동을 하고 이는 가장 편리한 영역이 화면 하단에 있음을 의미한다.

모바일은 갤러리, 카메라, 자이로센서, 마이크 또는 위치와 같이 내장된 다양한 기능을 활용하여 사용자 경험을 향상시킬 수 있다.

최근 모바일 퍼스트 서비스가 늘어난 만큼 모바일이 시장에 차지하는 비중은 크기에 충분히 깊게 공부할 만한 가치가 있다.

코드를 통한 결과는 최선인지 확인

필요한 정보가 아니라면 사용자가 처음 방문할 때 정보를 묻지 않도록 하자. 안경 가게가 아니라면 사용자의 첫 방문에 시력을 묻지 않는 것과 같다. 안경 가게를 만들더라도 우리가 제공할 수 있는 범위에 대해 최대한 정보를 제공하고 사용자가 디자인, 교정도구 등을 먼저 사용할 수 있도록 기획한다.

많은 제품의 첫 번째 난관은 회원가입의 벽이다. 사용자를 위한 제품을 개발하였다면 사용자에게 입력 값을 요구하기 전에 사용자가 제품을 둘러볼 수 있도록 기회를 주어야 한다. 사용자가 우리가 개발한 것을 사용하기 원한다면 사용자에게 서비스를 이용할 수 있도록 해야 한다.

다음은 점진적 향상과 우아한 저하이다. 점진적 향상은 비디오 태그를 지원하지 않는 브라우저가 있지만, 우리는 비디오 태그를 지원하는 브라우저에서 개발하였을때 비디오 태그 안에 이미지태그를 넣어 이미지를 보여줄 수 있다. 또는 앵커태그를 넣어 동영상 링크를 첨부해둘 수도 있다. HTML은 에러에 둔하기 때문에 지원하지 않는 태그는 무시된다. 우아한 성능 저하는 먼저 기능이 없는 페이지를 만들고 이후에 기능을 지원하는 환경에서 더 나은 기능을 제공할 수 있도록 제공하는 것이다.

이미지가 최적화되었는지 확인하고, 코드를 프로덕션으로 내보낼 때 minify 된 버전을 사용하자. 그리고 다양한 환경(eg. 3G등)에서 테스트하여 다양한 상황에서도 사용할 수 있도록 하자

애니메이션으로 가득 찬 화면의 시대는 끝

좋은 사용자 경험은 사용성과 목적을 기반으로 한다. 우리가 만든 서비스는 게임이 아니다.

물론 복잡한 애니메이션을 다룰 수 있다는 점은 장점이다. 하지만 서비스에 기술을 자랑하기 위해 애니메이션을 도입하지는 말자. 뽐내고 싶다면 Codepen에 포트폴리오로… 애니메이션은 의미가 있을 때만 사용하자.

사용자 경험에 대한 고찰은 여기까지다. 본인이 개발자라고 몰라도 되는 것이 아니다. 타직군을 이해하는 것에서부터 커뮤니케이션의 시작이다.