Share
Sign In
FE 성장 고민 해결
프론트엔드 개발자를 위한 UX 기본 개념 10가지: 맛집 찾기 앱을 예시로
PEC
👍

프론트엔드 개발자로서 사용자 경험(UX)에 대한 이해는 매우 중요합니다. 사용자와 직접 상호작용하는 인터페이스를 구축하는 역할을 맡고 있기 때문에, UX를 잘 이해하면 더 나은 제품을 만들 수 있습니다. 이번 포스팅에서는 프론트엔드 개발자가 알아야 할 UX 기본 개념을 맛집 찾기 앱을 예시로 들어 설명하겠습니다. 이 포스팅을 통해 UX의 10가지 핵심 개념을 이해하고, 이를 실제 프로젝트에 적용하는 방법을 배울 수 있습니다. 김철수씨가 사용하는 맛집 앱을 예시로 함께 자세히 살펴볼까요?
1. 사용자 조사 (User Research)
사용자 조사는 제품이나 서비스를 사용하는 실제 사용자들의 필요와 행동을 이해하기 위한 과정입니다. 이를 통해 사용자의 요구사항을 파악하고, 제품 개발에 반영할 수 있습니다.
사용자 인터뷰
사용자의 생각과 경험을 직접 듣는 방법입니다. 심층 인터뷰를 통해 사용자의 목표, 동기, 문제점을 이해할 수 있습니다.
예시: "김철수는 주말에 친구들과 외식을 할 때 새로운 맛집을 찾기 위해 앱을 사용합니다. 그는 리뷰와 평점을 중요하게 생각합니다."
사용자 인터뷰를 통해 실제 사용자의 요구사항을 파악하면, 불필요한 기능 구현을 줄이고 사용자에게 필요한 기능에 집중할 수 있습니다.
설문조사
다수의 사용자로부터 데이터를 수집하는 방법입니다. 특정 질문에 대한 응답을 통해 사용자들의 일반적인 경향을 파악할 수 있습니다.
예시: "사용자들이 가장 중요하게 생각하는 기능은 리뷰, 평점, 위치 기반 검색입니다."
설문조사를 통해 사용자들이 중요하게 생각하는 기능을 우선적으로 개발할 수 있어, 사용자 만족도를 높일 수 있습니다.
사용자 테스트
사용자가 제품을 사용하는 과정을 관찰하여 문제점을 파악합니다. 실제 사용 환경에서의 사용성을 테스트하여 개선점을 도출합니다.
예시: "사용자들이 특정 기능을 찾기 어려워하는지, 검색 결과가 만족스러운지 확인합니다."
사용자 테스트를 통해 발견된 문제점을 조기에 수정하여, 출시 후 발생할 수 있는 사용자 불만을 줄일 수 있습니다.
2. 페르소나 (Persona)
페르소나는 사용자 조사를 기반으로 만들어진 가상의 대표 사용자입니다. 페르소나는 제품 개발 과정에서 사용자 중심의 결정을 내리는 데 도움을 줍니다.
예시: "30대 직장인 김철수는 주말에 친구들과 외식을 즐기며, 새로운 맛집을 찾기 위해 리뷰와 평점을 중요하게 생각합니다. 그는 빠르고 간편한 검색 기능을 원합니다."
페르소나를 통해 개발자는 특정 사용자 그룹의 요구와 기대를 더 잘 이해할 수 있어, 사용자 맞춤형 기능을 개발할 수 있습니다.
3. 사용자 여정 지도 (User Journey Map)
사용자 여정 지도는 사용자가 제품을 사용하는 과정을 시각적으로 나타낸 것입니다. 이를 통해 사용자가 겪는 문제점과 감정 변화를 이해할 수 있습니다.
단계
인식, 탐색, 선택, 방문, 리뷰 작성 등 사용자가 제품을 사용하는 주요 단계를 나열합니다.
예시: 인식 → 탐색 → 선택 → 방문 → 리뷰 작성
포인트
각 단계에서 사용자가 겪는 문제와 감정을 기록하여, 개선할 부분을 도출합니다.
예시: 각 단계에서 김철수가 겪는 문제와 감정
인식: "주말에 친구들과 외식을 계획하며 맛집을 찾고 싶어함."
탐색: "앱을 열어 검색 기능을 사용하여 맛집을 찾음."
선택: "리뷰와 평점을 보고 맛집을 선택함."
방문: "맛집을 방문하여 식사를 즐김."
리뷰 작성: "앱에 리뷰를 작성하여 다른 사용자들과 공유함."
사용자 여정 지도를 통해 사용자가 겪는 문제를 사전에 파악하고, 이를 해결하기 위한 기능을 개발할 수 있습니다. 또한, 사용자 경험을 전체적으로 개선할 수 있습니다.
4. 정보 구조 (Information Architecture)

정보 구조는 콘텐츠와 정보를 조직하고 구조화하는 방법입니다. 이는 사용자가 필요한 정보를 쉽게 찾을 수 있도록 도와줍니다.
사이트 맵
웹사이트의 페이지 구조를 나타냅니다. 페이지 간의 관계와 계층 구조를 시각적으로 표현합니다.
예시: 홈 → 검색 → 검색 결과 → 맛집 상세 페이지 → 리뷰 작성
내비게이션
사용자가 사이트 내에서 이동할 수 있는 경로를 설계합니다. 메뉴, 링크, 검색 기능 등을 포함합니다.
예시: 하단 내비게이션 바에 홈, 검색, 즐겨찾기, 프로필 탭을 배치합니다.
정보 구조를 잘 설계하면 사용자가 필요한 정보를 쉽게 찾을 수 있어, 사용자 만족도가 높아집니다. 또한, 개발자는 명확한 구조를 바탕으로 효율적으로 작업할 수 있습니다. (좋은 설계를 하면 네이밍을 수월하게 하는데 도움이 됩니다.)
5. 와이어프레임 (Wireframe)

와이어프레임은 페이지의 레이아웃과 요소 배치를 나타내는 저충실도 디자인입니다. 이는 기능과 콘텐츠의 배치를 계획하는 데 사용됩니다.
저충실도 와이어프레임
기본적인 레이아웃과 기능만을 나타냅니다. 디테일한 디자인 요소는 생략하고, 주요 기능과 구조에 집중합니다.
예시: 홈 화면에 검색 바, 인기 맛집 리스트, 추천 맛집 섹션을 배치합니다.
고충실도 와이어프레임
더 많은 디테일과 상호작용을 포함합니다. 실제 디자인에 가까운 형태로, 사용자 테스트에 활용할 수 있습니다.
예시: 검색 결과 페이지에 필터 옵션, 평점, 거리 정보를 추가합니다.
와이어프레임을 통해 개발자는 초기 단계에서 레이아웃과 기능을 명확히 이해하고, 이를 바탕으로 효율적으로 개발할 수 있습니다. 또한, 디자인 변경이 필요한 경우에도 빠르게 수정할 수 있습니다.
6. 프로토타입 (Prototype)

프로토타입은 제품의 초기 버전으로, 실제 사용자가 상호작용할 수 있는 형태로 만들어집니다. 이는 사용자 테스트를 통해 피드백을 받을 수 있는 중요한 도구입니다.
인터랙티브 프로토타입
클릭, 스크롤 등 실제 상호작용이 가능한 프로토타입입니다. 사용자가 실제로 제품을 사용하는 것처럼 테스트할 수 있습니다.
예시: 사용자가 검색 바에 키워드를 입력하고, 검색 결과를 클릭하여 맛집 상세 페이지로 이동할 수 있도록 합니다.
프로토타입을 통해 개발자는 사용자 피드백을 조기에 받을 수 있어, 제품 출시 전에 문제점을 수정할 수 있습니다. 또한, 개발 과정에서 발생할 수 있는 리스크를 줄일 수 있습니다.
7. 사용성 테스트 (Usability Testing)

사용성 테스트는 사용자가 제품을 사용하는 과정을 관찰하여 문제점을 파악하는 방법입니다. 이를 통해 사용자의 실제 경험을 이해하고 개선할 수 있습니다.
태스크 기반 테스트
사용자가 특정 태스크를 수행하는 과정을 관찰합니다. 예를 들어, 특정 기능을 찾거나 사용해보는 과정을 테스트합니다.
예시: "김철수가 '이탈리안 레스토랑'을 검색하고, 리뷰를 읽고, 맛집을 선택하는 과정을 관찰합니다."
A/B 테스트
두 가지 버전의 디자인을 비교하여 더 나은 것을 선택합니다. 사용자 반응을 비교하여 최적의 디자인을 선택합니다.
예시: "검색 결과 페이지의 레이아웃을 두 가지 버전으로 만들어, 어떤 버전이 더 사용하기 편리한지 테스트합니다."
사용성 테스트를 통해 개발자는 사용자 관점에서 제품의 문제점을 파악하고, 이를 개선할 수 있습니다. 이는 사용자 만족도를 높이고, 제품의 성공 가능성을 높입니다.
8. 접근성 (Accessibility)

접근성은 모든 사용자가 제품을 쉽게 사용할 수 있도록 하는 것입니다. 이는 장애가 있는 사용자도 포함됩니다.
WCAG 가이드라인
웹 콘텐츠 접근성 지침을 따릅니다. 시각, 청각, 운동 장애가 있는 사용자도 쉽게 접근할 수 있도록 설계합니다.
예시: "텍스트 대비를 높이고, 이미지에 대체 텍스트를 추가하여 시각 장애가 있는 사용자도 쉽게 사용할 수 있도록 합니다."
키보드 내비게이션
키보드만으로도 모든 기능을 사용할 수 있도록 합니다. 마우스를 사용하지 못하는 사용자도 쉽게 사용할 수 있도록 합니다.
예시: "탭 키를 사용하여 검색 바, 검색 결과, 맛집 상세 페이지로 이동할 수 있도록 합니다."
접근성을 고려한 개발은 더 많은 사용자에게 제품을 제공할 수 있게 하며, 법적 요구사항을 충족시킵니다. 이는 사용자 기반을 넓히고, 브랜드 이미지를 향상시킵니다.
9. 시각적 디자인 (Visual Design)
시각적 디자인은 색상, 타이포그래피, 아이콘 등 시각적 요소를 통해 사용자 경험을 향상시키는 것입니다.
일관성
모든 페이지에서 일관된 디자인을 유지합니다. 색상, 폰트, 버튼 스타일 등을 통일하여 사용자에게 일관된 경험을 제공합니다
예시: "일관된 색상 팔레트와 타이포그래피를 사용하여 앱 전체에 통일감을 줍니다."
가독성
텍스트가 쉽게 읽히도록 디자인합니다. 적절한 폰트 크기, 줄 간격, 대비를 사용하여 가독성을 높입니다.
예시: "적절한 폰트 크기와 줄 간격을 사용하여 리뷰와 설명 텍스트가 쉽게 읽히도록 합니다."
시각적 디자인을 통해 사용자는 더 직관적이고 즐거운 경험을 할 수 있습니다. 이는 사용자 만족도를 높이고, 제품의 사용성을 향상시킵니다.
10. 피드백 루프 (Feedback Loop)
피드백 루프는 사용자로부터 피드백을 받고 이를 반영하여 제품을 개선하는 과정입니다. 이는 지속적인 개선을 가능하게 합니다.
사용자 피드백 수집
설문조사, 리뷰, 사용자 테스트 등을 통해 피드백을 수집합니다. 사용자 경험에 대한 다양한 의견을 모읍니다.
예시: "앱 내에서 사용자에게 피드백을 요청하는 팝업을 띄워, 사용 경험에 대한 의견을 수집합니다."
반영 및 개선
수집된 피드백을 바탕으로 제품을 개선합니다. 사용자 요구사항을 반영하여 지속적으로 제품을 업데이트합니다.
예시: "사용자들이 검색 결과 필터 기능이 부족하다고 피드백을 주었을 때, 필터 옵션을 추가하여 개선합니다."
피드백 루프를 통해 개발자는 사용자 요구사항을 지속적으로 반영하여 제품을 개선할 수 있습니다. 이는 사용자 만족도를 높이고, 제품의 품질을 지속적으로 향상시킵니다.
글을 맺으며
프론트엔드 개발자가 UX를 이해하고 적용하는 것은 사용자 중심의 제품을 개발하는 데 큰 도움이 됩니다. 이번 포스팅에서는 맛집 찾기 앱을 예시로 들어 UX의 기본 개념을 설명했습니다. 사용자 조사, 페르소나, 사용자 여정 지도, 정보 구조, 와이어프레임, 프로토타입, 사용성 테스트, 접근성, 시각적 디자인, 피드백 루프 등 각 개념을 실제 사례에 적용하여 설명하였습니다. 이러한 개념들을 이해하고 실제 프로젝트에 적용하면, 더 나은 사용자 경험을 제공하는 제품을 개발할 수 있을 것입니다. 앞으로도 지속적으로 UX에 대해 공부하고, 사용자 중심의 개발을 실천해 나간다면 더욱 가파른 성장을 경험하실 것입니다.
Subscribe to 'pec'
Welcome to 'pec'!
By subscribing to my site, you'll be the first to receive notifications and emails about the latest updates, including new posts.
Join SlashPage and subscribe to 'pec'!
Subscribe
👍
개발 방법론이 진화할수록 UX 는 더 중요해진다?!
프론트엔드 개발 분야에서 사용자 경험(UX)의 중요성은 누구나 인정하는 사실입니다. 최근 들어 이 중요성이 기능 중심의 개발 방법론, 특히 Feature Sliced Design(FSD)의 등장과 함께 새로운 차원에서 재조명되고 있습니다. 이러한 변화는 기능 중심 개발의 뿌리인 Feature Driven Development(FDD)에서 시작되어, 현대의 프론트엔드 개발 트렌드와 사용자 요구의 빠른 변화에 대응하기 위해 FSD로 진화하였습니다. FDD의 기본 원칙이 현대적인 웹 및 모바일 애플리케이션 개발의 요구 사항에 맞춰 발전하면서, FSD는 프론트엔드 개발에서의 구조화된 코드 조직과 모듈화를 강조하게 되었습니다. 이 글에서는 기능 중심의 개발이 왜 주목받고 있는지, 그리고 이것이 UX에 어떤 긍정적인 영향을 미치는지에 대해, 개발 방법론과 연관하여 살펴보려합니다. FSD 와 FDD Feature Sliced Design (FSD)와 Feature Driven Development (FDD)는 모두 소프트웨어 개발 방법론으로, 기능 중심의 접근 방식을 공유합니다. 그러나 두 방법론은 출발점과 적용 범위, 그리고 목표에 있어서 다소 차이를 보입니다. Feature Driven Development (FDD) 출현 시기: FDD는 1990년대 후반에 개발되었습니다. 주요 초점: FDD는 대규모 팀에서 대규모 프로젝트를 효율적으로 관리하고 실행하기 위한 방법론입니다. 핵심 원칙: FDD는 프로젝트를 기능 단위로 분해하고, 이 기능들을 짧은 반복 주기로 개발하는 것을 강조합니다. 이 방법론은 모델링, 기능 목록 작성, 기능별 계획 및 빌드, 그리고 정기적인 진행 보고 등 5단계 프로세스로 구성됩니다. 목표: FDD의 목표는 개발 프로세스를 구조화하여 생산성을 높이고, 대규모 프로젝트에서도 효과적인 협업과 진행 상황의 명확한 추적을 가능하게 하는 것입니다. Feature Sliced Design (FSD) 출현 시기: FSD는 더 최근의 개념으로, 웹 및 모바일 개발 프로젝트에 특히 적합한 설계 방법론입니다. 주요 초점: FSD는 프론트엔드 개발에서의 구조화된 코드 조직과 모듈화를 강조합니다. 이 방법론은 애플리케이션을 기능별로 분할하여, 각 기능이 독립적으로 개발, 테스트, 배포될 수 있도록 합니다. 핵심 원칙: FSD는 기능별 분할, 재사용 가능한 컴포넌트의 개발, 그리고 유지 보수성과 확장성을 높이는 것을 목표로 합니다. 이를 통해 개발자는 더 빠르고 효율적으로 작업할 수 있으며, 코드 베이스를 쉽게 이해하고 수정할 수 있습니다. 목표: FSD의 목표는 프론트엔드 개발 프로젝트에서의 코드 조직화와 모듈화를 통해 유지 보수성, 확장성, 그리고 협업의 용이성을 증진시키는 것입니다. 이러한 차이점이 존재함과 동시에, FSD는 FDD 와 밀접한 연관성을 가지고 있습니다. FSD와 FDD는 기능 중심의 개발을 공통적으로 추구한다는 점에서 연관성이 있습니다. 두 방법론 모두 프로젝트를 더 작은 기능 단위로 분해하여 관리하고 개발하는 것을 중요하게 여깁니다. 그러나 FDD는 프로젝트 관리와 개발 프로세스에 더 초점을 맞춘 반면, FSD는 프론트엔드 개발의 구조화와 코드 조직에 더 많은 강조를 둡니다. 따라서, FSD는 FDD의 기능 중심 접근 방식을 프론트엔드 설계와 구현의 맥락으로 확장한 것으로 볼 수 있습니다. 이러한 확장은 FSD가 현대적인 프론트엔드 개발 요구 사항에 맞춰진 방법론으로 자리매김하게 했습니다. 더 나아가, FSD의 이러한 접근 방식은 Agile 개발 방법론의 핵심 가치와도 긴밀하게 연결되어 있습니다. Agile 방법론은 변화에 유연하게 대응하고, 고객의 지속적인 피드백을 통해 제품을 개선해 나가는 것을 목표로 하는데, FSD는 이러한 Agile 원칙을 프론트엔드 개발의 구조와 설계에 적용하여, 개발 프로세스의 효율성과 유연성을 높이는 데 기여합니다. 이제, Agile 개발 방법론의 네 가지 핵심 가치와 FSD가 어떻게 연결되는지 자세히 살펴보겠습니다. Agile 과 FSD Agile 개발 방법론의 네 가지 핵심 가치는 소프트웨어 개발의 유연성과 효율성을 높이는 데 중점을 둡니다. Feature Sliced Design (FSD)은 이러한 가치들을 프론트엔드 개발의 구조와 설계에 적용하여, Agile 방법론의 이점을 극대화합니다. 아래에서는 Agile의 4 가지 핵심 가치와 FSD의 구체적인 연결점을 자세히 설명하겠습니다. 개인과 상호 작용이 프로세스와 도구보다 중요합니다. FSD는 개발자 간의 효과적인 상호 작용을 촉진합니다. 기능별로 코드를 분할함으로써, 개발자들은 각자의 파트에 더 집중할 수 있고, 필요한 경우 다른 팀원과의 협업이 더욱 용이해집니다. 이는 Agile 가치인 팀원 간의 원활한 커뮤니케이션과 협업을 강화합니다.
❤️
1
FE 가 성장하기 위한 학습 주제들
프론트엔드 엔지니어는 다양한 주제를 학습하며 성장합니다. 각 주제는 크게 기술적 능력, 문제 해결 능력, 팀 내 협업, 그리고 지속적인 성장으로 나눌 수 있습니다. 이러한 학습 주제들은 서로 연관되어 있어서, 경력에 의해 명확하게 구분할 수 없습니다. 다만, 일반적으로는 아래의 성장 과정을 따라 각 주제를 학습합니다. 학습에 의한 성장 과정 각 주제별로 조금 더 자세하게 살펴보겠습니다. 기술적 능력의 향상 기본기의 숙달: HTML, CSS, JavaScript의 기본 개념을 완전히 이해하고, 이를 통해 반응형 웹사이트를 구축할 수 있어야 합니다. 프레임워크 및 라이브러리: React, Vue, Angular 등의 현대적인 프론트엔드 프레임워크나 라이브러리에 대한 이해와 활용 능력을 키워야 합니다. 상태 관리: 상태 관리 라이브러리(예: Redux, Vuex, Context API)의 사용법을 배우고, 언제 어떤 상태 관리 전략을 적용해야 하는지 이해해야 합니다. 빌드 도구와 워크플로우: Webpack, Babel, npm/yarn 등의 도구를 사용하여 개발 워크플로우를 최적화하는 방법을 배워야 합니다. 코드 품질: 코드 리뷰, 리팩토링, 유닛 테스팅(Jest, Mocha 등)을 통해 코드 품질을 유지하고 향상시키는 방법을 익혀야 합니다. 문제 해결 능력 디버깅: 개발자 도구를 활용하여 문제를 식별하고 해결하는 능력을 키워야 합니다. 알고리즘과 자료구조: 기본적인 알고리즘과 자료구조에 대한 이해를 바탕으로 효율적인 코드를 작성할 수 있어야 합니다. 성능 최적화: 웹사이트의 로딩 시간과 성능을 개선하기 위한 전략을 배우고 적용해야 합니다. 팀 내 협업 커뮤니케이션: 명확하고 효과적인 커뮤니케이션을 통해 아이디어를 공유하고, 팀원들과 협력해야 합니다. 버전 관리: Git과 같은 버전 관리 시스템을 사용하여 코드의 변경 사항을 관리하고, 팀과 협업할 수 있어야 합니다. 프로젝트 관리: JIRA, Trello 등의 프로젝트 관리 도구를 사용하여 작업을 추적하고, 마감 기한을 준수하는 방법을 배워야 합니다. 지속적인 성장 기술 트렌드: 프론트엔드 개발과 관련된 최신 기술 트렌드를 지속적으로 학습하고 적용해야 합니다. 네트워킹: 컨퍼런스, 워크샵, 온라인 포럼 등을 통해 다른 개발자들과 네트워킹을 하며 지식을 공유해야 합니다.
❤️
1