[Day 10] 왜 기업들은 프로덕트 디자이너를 찾을까? 직무 이해와 UI 구성 요소까지

안녕하세요 여러분, 송2입니다.
 
벌써 부트캠프 10일 차 기록을 작성하게 되었습니다. 드디어 두 자릿수에 진입했네요!
 
사실을 당일 배운 내용을 당일에 정리해서 올릴고 싶지만, 수업이 끝난 뒤 복습도 하고 블로그 초안작성 후에 다듬고 하다 보니 생각보다 업로드가 늦어지고 있지만, 그래도 하루하루 배운 내용을 놓치지 않기 위해 꾸준히 기록을 남겨보도록 하겠습니다. 파이팅!
 

'헨젤과 그레텔'이라는 동화를 한 번씩은 들어보셨을 것입니다. 동화에는 과자로 만든 집이 등장합니다. 어릴 때는 그저 맛있겠다고 생각했는데, 지금 생각해 보면 만들 때 많은 고민이 필요했을 것 같습니다. 한 종류의 과자로만 만드는 것이 아니라 벽이 될 과자, 지붕이 될 과자, 장식이 될 과자 등 각자의 역할에 맞는 재료를 선택해야 했을 테니까요.
 
게다가 마녀도무작정 과자를 붙여서 집을 만든 것이 아니라 헨젤과 그레텔을 유인하기 위해 어떤 모습이어야 하는지, 어떤 재료를 사용해야 더 눈길을 끌 수 있을지 나름의 목적을 가지고 과자집을 만들었을 것입니다. 
 
10일 차 수업을 듣고 나니 문득 이런 생각이 들었습니다. 만약 과자의 집이 하나의 서비스라면, 마녀는 프로덕트 디자이너에 가깝지 않았을까 하고 말입니다. 과자의 집을 이루는 여러 종류의 과자들이 각각의 역할을 가지고 있었던 것처럼, 서비스 화면 역시 버튼, 메뉴, 입력창, 카드와 같은 다양한 UI 요소들이 모여 각자의 역할을 수행하고 있었습니다. 
 
오늘은 프로덕트 디자이너라는 직무를 이해하고, 기업들이 왜 프로덕트 디자이너를 찾는지, 그리고 서비스를 구성하는 다양한 UI요소들에 대해 알아보겠습니다!
 

---

■ 1. 왜 기업들은 프로덕트 디자이너를 찾을까?

1.1 화면을 만드는 사람에서, 서비스를 만드는 사람으로

개인적으로 디자이너 직무의 변화를 생각해 보면 컴퓨터 중심의 '웹 시대'와 모바일 중심의 앱 시대, 그리고 서비스 중심 시대로 나눌 수 있을 것 같습니다. 
 

① 웹 시대 → 웹 디자이너

• 과거 : 홈페이지나 웹사이트 제작이 중요했던 시기. PC 사용 시간이 압도적으로 높았던 시기.
• 정보를 효과적으로 전달하고 시각적으로 보기 좋은 화면을 만드는 것이 중요.

 

② 앱 시대→ UI·UX 디자이너

• 스마트폰이 보급되면서 사용자는 정보를 보는 것을 넘어 서비스를 직접 이용
• 자연스럽게 인터페이스를 설계하는 UI와 사용자 경험을 설계하는 UX의 중요성이 커짐

 

③ 서비스 중심 시대 → 프로덕트 디자이너

• 경쟁이 치열해진 최근에는 단순히 화면을 만드는 것만으로는 부족.
• 사용자의 문제를 발견하고, 서비스를 개선하며, 비즈니스 목표까지 함께 고려하는 역할이 중요.

사라진 것이 아니라 확장된 것

이렇게 보면 프로덕트 디자이너가 기존 직무를 대체한 것처럼 보일 수 있을 것 같습니다. 하지만 저는 기존 직무가 사라진 것이 아니라, 시대의 변화에 따라 디자이너의 역할 범위가 점점 넓어지고 세분화된 것이라고 생각합니다.
 
실제로 기업에 따라서는 프로덕트 디자이너 조직과 별개로 Ui디자인 조직이나 UX 디자인 조직을 운영하기도 합니다. 따라서 프로덕트 디자이너가 기존 직무를 대체했다기보다는 시대의 변화에 따라 역할이 확장되고 세분화되었다고 이해하는 것이 좋지 않을까요?

 

1.2 프로덕트 디자이너에게 필요한 역량

① 문제해결 : 문제를 발견하고 해결하는 능력

• 사용자가 겪는 불편함을 찾아내고 더 나은 해결방법을 고민하는 역량
• 정확한 정의, 가설 설정, 반복적 시도와 개선
• 예시) 배달 앱에서 주문 완료 직전 이탈률이 높다면 단순히 디자인을 바꾸는 것이 아니라 사용자가 어느 단계에서 불편함을 느끼는지를 분석하고 개선방안을 찾는 과정

 

② 사용자 중심 사고 : 사용자 입장에서 생각하는 능력

• 서비스를 만드는 사람의 시선이 아닌 사용하는 사람의 시선으로 바라보는 태도
• 예시) 키오스크를 설계할 때 디지털 기기에 익숙하지 않은 사용자도 쉽게 사용할 수 있도록 버튼 크기를 키우도 단계를 단순화하는 것

 

③ 심미성 : 보기 좋고 매력적인 디자인을 만드는 것

• 서비스의 첫인상을 결정하고 브랜드 이미지를 전달하는 역량
• 같은 기능이라도 더 깔끔한 레이아웃과 세련된 색상으로 구성된 보기 좋은 화면이 사용자에게 긍정적인 인상을 줄 수 있음.
• 예시) 같은 금융 서비스라도 깔끔하고 신뢰감 있는 디자인을 적용하면 사용자가 더 안정감을 느낄 수 있음.

 

④ 기능성과 실용성 : 사용하기 편리한 서비스를 설계하는 능력

• 사용자가 별도의 설명 없이도 자연스럽게 사용할 수 있도록 직관적인 흐름과 조작의 편의성을 고려하는 역량
• 직관적인 흐름, 조작의 편의성, 단순함의 미학
• 예시) 결제 버튼을 착기 위해 여러 화면을 이동하는 것이 아니라, 사용자가 자연스럽게 다음 행동을 할 수 있도록 화면 흐름을 설계하는 것

 

⑤ 커뮤니케이션 : 다양한 직군과 원활하게 협업하는 능력

• 기획자, 개발자 등 다양한 직군과 의견을 조율하며 함께 서비스를 만드는 역량
• 의도설명, 피드백 수용, 공감대 형성
• 예시) 디자인 의도를 개발자에게 명확하게 전달하고, 개발 과정에서 발생하는 문제를 함께 해결하기

참고하면 좋을 만한 자료 : https://www.figma.com/resource-library/design-basics/

 

1.3 JD 분석 : 채용공고를 보면 기업이 원하는 사람이 보인다 

• JD란? 기업이 어떤 사람을 원하는지, 어떤 일을 하게 될지, 어떤 역량이 필요한지 설명해 놓은 문서로 '채용공고', '직무기술서'를 뜻함

▶ JD는 어떻게 분석해야 할까?

① 반복적으로 등장하는 키워드 찾기

• 채용 공고를 5~10개 정보 보면 반복되는 단어들이 있음
• 프로덕트 디자이너 채용공고 예시 : 사용자 중심사고, 문제 해결 능력, 협업 능력, 커뮤니케이션, 데이터 기반 의사결정 → 기업들이 공통적으로 원하는 역량임을 알 수 있음

 

② 어떤 문제를 해결할 사람을 찾는지 본다

• A 기업 : 신규 서비스 구축, MVP 구축, 빠른 실험
• B 기업 : 기존 서비스 개선, 데이터 분석, 사용자 경험 개선
• 둘 다 프로덕트 디자이너를 뽑지만 원하는 사람이 다름.

 

③ 필수 역량과 우대 역량 분리

• 필수 역량  : 지금 당장 필요한 역량
• 우대 역량  : 앞으로 준비하면 좋을 역량, 향후 업계가 원하는 방향 파악 가능

 

▶ JD분석 똑똑하게 활용하기

• 공통 역량 기반의 기본 이력서 및 포트폴리오 구성
• 지원 기업에 맞 세부 내용 수립
• AI 활용 시 JD분석 및 이력서 작성 시간 단축 가능

---

■ 2. 서비스 화면을 이루는 다양한 UI 요소들

2.1 탐색 & 이동 UI

사용자가 "현재 어디에 있는지, 다음에는 어디로 이동할 수 있는지" 이해하도록 도와주는 Ui요소
 

브레드크럼(Breadcrumb)

브레드크럼 예시

텐바이텐 브레드크럼

쿠팡 브레드크럼

• 사용자가 현재 위치까지 이동한 경로를 보여주는 UI
• 복잡한 사이트에서도 현재 위치를 쉽게 파악 가능

 

페이지네이션(Pagination)

페이지네이션 예시

쿠팡 후기 페이지네이션

• 콘텐츠를 여러 페이지로 나누어 보여주는 UI
• 많은 정보를 한 번에 보여주지 않고 단계적으로 탐색할 수 있도록 도와줌.

 

인피니티 스크롤(Infinite Scroll)

핀터레스트

• 사용자가 화면을 아래로 내리면 새로운 콘텐츠가 계속 로드되는 방식.
• 끊김 없이 콘텐츠를 탐색 가능.

 

메뉴(Menu)

• 서비스 내 주요 기능이나 페이지로 이동할 수 있도록 도와주는 UI
• 예시) 네비게이션 바(Navigation Bar), 햄버거 메뉴(Hambuger Menu), 탭 메뉴(Tab Menu)

 

2.2 입력 & 선택 UI

사용자가 정보를 입력하거나 원하는 항목을 선택할 수 있도록 도와주는 Ui 요소
 

검색 필드(Search Field)

검색필드 UI 예시

네이버 검색필드

• 원하는 정보를 빠르게 찾을 수 있도록 검색어를 입력하는 UI
• 예시) 네이버 검색창, 쇼핑몰 상품 검색

 

버튼(Button)

버튼 UI 예시

네이버 로그인 버튼

 

• 사용자의 행동을 실행하도록 유도하는 UI
• 예시) 로그인, 회원가입, 결제하기

 

인풋 필드(Input Field)

인풋필드 예시

네이버 로그인 인풋필드

• 사용자가 직접 정보를 입력하는 UI
• 예시) 아이디 입력, 비밀번호 입력, 이메일 입력

 

체크박스(Checkbox)

좌 : 체크박스 Ui 얘시 / 우 : 쿠팡 메뉴 체크박스

• 여러 개의 항목을 중복 선택 할 수 있는 UI
• 예시) 관심 분야 선택, 이용 약관 동의

 

라디오박스(Radio Button)

좌 : 라이오박스 UI 예시 / 우 : 쿠팡 수량선택 라디오박스

쿠팡 메뉴 체크박스

• 여러 항목 중 하나만 선택할 수 있는 UI
• 예시) 성별 선택, 배송 방법 선택

 

토글 / 스위치(Togle / Switch)

• 기능의 ON/OFF 상태를 변경하는 UI
• 예시) 다크 모드 설정, 알림 설정

 

칩스(Chips)

칩스 UI 예시

카카오웹툰 카테고리 템스

 

• 선택된 항목이나 카테고리를 간단하게 표시하는 UI
• 예시) 카테고리 분류

 

선택 / 드롭다운 (Select / Dropdown)

선택, 드롭다운 UI 예시

텐바이텐 상풍 옵션 선택, 드롭다운

• 여러 옵션 중 원하는 항목을 선택할 수 있는 UI
• 예시) #디자인, #개발, #마케팅

 

2.3 콘텐츠 & 정보 표시 UI

사용자에게 정보를 전달하거나 콘텐츠를 보기 쉽게 구성하기 위한 UI 요소
 

아코디언(Accordion)

아코디언 UI 예시

올리브영 FAQ 아코디언 UI

• 필요한 내용만 펼쳐서 볼 수 있도록 구성한 UI
• 예시) FAQ, 설정 메뉴

 

캐러셀(Carousel)

우 : 캐러셀 UI 예시 / 우 : 올리브영 캐러셀 컨텐츠

• 여러 콘텐츠를 좌우로 넘기며 볼 수 있는 UI
• 예시) 쇼핑몰 배너, 추천 상품 영역

 

카드(Card)

• 관련된 정보를 하나의 영역으로 묶어 보여주는 UI
• 예시) 상품 카드, 뉴스 카드, 게시글 카드

 

리스트 / 테이블(List / Table)

• 여러 정보를 일정한 형식으로 정리하여 보여주는 UI
• 예시) 주문 내역, 회원 목록, 상품 목록

 

아이콘(Icon)

• 기능이나 의미를 시각적으로 표현하는 UI 요소
• 예시) 검색 아이콘, 설정 아이콘, 홈 아이콘

 

프로필 / 아바타(Profile / Avatar)

프로필/아바타 UI 예시

• 사용자를 식별하기 위해 사용하는 이미지 또는 정보
• 예시) 카카오톡 프로필 사진, 구글 계정 프로필 이미지

 

2.4 상태, 피드백 & 오버레이 UI

사용자의 행동 결과를 알려주거나, 현재 상태를 전달하기 위해 사용하는 UI 요소
 

배지(Badge)

• 새로운 정보나 상태를 강조하기 위해 사용하는 UI
• 예시) 알림 숫자 표시, NEW 배지, 할인 표시

 

툴팁(Tooltip)

튤팁 UI 예시

티스토리 글작성에서 보이는 튤팁

• 특정 요소에 마우스를 올리거나 클릭했을 때 추가 설명을 제공하는 UI
• 예시) 아이콘 설명, 기능 안내 문구

 

토스트 / 스낵바(Toast / Snackbar)

• 작업 결과를 짧은 시간 동안 화면에 표시하는 UI
• 예시) "저장되었습니다", "장바구니에 추가되었습니다."

 

모달 / 다이얼로그(Modal / Dialog)

• 사용자의 확인이나 선택이 필요할 때 화면 위에 표시되는 UI
• 예시) 삭제 확인 창, 로그아웃 확인 창

 

로더 / 스피너(Loader / Spinner)

• 데이터를 불러오거나 처리 중임을 알려주는 UI
• 예시) 페이지 로딩 화면, 결제 처리 중 화면

 

프로그레스 바(Progress Bar)

• 작업 진행 상황을 시각적으로 보여주는 UI
• 예시) 파일 업로드 진행률, 회원가입 단계 표시

 

빈 상태(Empty State)

텐바이텐 장바구니 빈화면

• 표시할 데이터가 없을 때 사용자에게 현재 상태를 알려주는 UI
• 예시) 장바구니가 비어있습니다, 등록된 게시물이 없습니다, 검색 결과가 없습니다.

 

2.5 패턴 & 심화 UI

여러 UI 요소를 조합하거나 특정 상황에서 활용하는 고급 UI 패턴
 

폼(Form)

좌 : 폼 UI 예시 / 좌 : 텐바이텐 회원입 폼

• 사용자가 정보를 입력하고 제출할 수 있도록 구성된 UI
• 여러 개의 입력 필드와 버튼이 함께 사용
• 예시) 회원가입, 로그인, 문의하기

 

피커(Picker)

좌:피커 UI 사례 / 우: 여기어때 날짜피커

• 여러 옵션 중 원하는 값을 선택할 수 있는 UI
• 예시) 날짜 선택, 시간 선택, 색상 선택

 

슬라이더(Slider)

• 막대를 좌우로 움직여 값을 조절하는 UI
• 예시) 음량 조절, 밝기 조절, 가격 범위 설정

 

스태퍼(Stepper)

• 여러 단계로 구성된 작업의 현재 진행 상황을 보여주는 UI
• 예시) 회원가입 단계, 결제 단계, 배송 조회 단계

 

플로팅 액션 버튼(Floating Action Button, FAB)

좌 : 플로팅 액션 버튼 ui 예시 / 우 : 알라미 플로팅 애견 버튼 예신

• 화면 위에 고정되어 주요 기능을 빠르게 실행할 수 있도록 돕는 버튼
• 예시) 이메일 작성 버튼, 새 게시글 작성 버튼, 채팅 시작 버튼

 
 
사실 부트캠프를 시작하기 전까지 프로덕트 디자이너를 단순히 앱이나 앱화면을 만드는 디자이너 아닌가?라고 생각한 적이 있습니다. 하지만 부트캠프를 시작하고 수업을 들으며 프로덕트 디자이너는 단순히 화면을 디자인하는 것이 아니라 사용자의 문제를 발견하고 해결하며, 서비스의 성장과 비즈니스 목표까지 함께 고민하는 디자이너라는 것을  배워가고 있습니다. 
 
또한 너무나 당연하게 지나쳤던 화면들에 다양한 UI요소들이 적용되어 있고, 당연하게 사용하던 버튼, 메뉴, 카드, 모달 등이 각각의 목적과 역할을 가지고 있다는 점도 새롭게 느껴졌습니다. 
 
솔직히 말하자면 아직 낯선 용어랑 개념들이 많지만, 지속적으로 작업을 하다 보면 익숙해지겠죠? 앞으로는 서비스를 사용할 때도 단순히 사용자의 입장이 아니라 왜 이른 기능과 UI가 필요했을지 한 번 더 생각해 보는 습관을 가져봐야겠습니다. 
 
오늘은 개념적 설명이 많아서 글에 밀도가 조오오오금 더 있습니다. 그렇지만 다 너무나 중요한 내용들이라 뺄 수 없었어요. 여러분도 꼼꼼하게 읽어보시고 만들어도 보시고 그냥 사용하던 화면에 어떤 요소들이 있는지 찾아보는 공부도 하셨으면 좋겠습니다.
 
다음 포스팅에서 만나요~!!!