[10/17_To Do]
- UXUI 입문 - Chepther 1. UXUI 개념
- UXUI 입문 - Chepther 3. 실무 프로세스
- UXUI 입문 - Chepther 4. 디자인 툴
UXUI 입문 - Chapter 1. UXUI 개념
UI(User Interface) 디자인
- 화면의 전체적인 구조와 시각적인 요소들을 디자인하는 것
UX(User eXperience) 디자인
- 사용자가 어떤 제품이나 서비스를 이용하면서 느끼는 총체적인 경험
- 제품에서 어떠한 감정을 불러일으키거나 특정한 경험을 할 수 있도록 이끄는 것
관련 용어들
- HCI(Human Computer Interaction) : 인간과 컴퓨터 간의 상호작용에 대해 연구
- CX(Customer eXperience) : 브랜드를 통해 고객이 경험하는 느낌이나 인상
- BX(Brand eXperience) : 브랜드가 갖는 전반적인 인식, 떠오르는 감정 등
UI 디자이너
- 시각적인 요소를 활용하여 화면 간의 관계와 인터페이스의 구성을 디자인
- GUI 디자이너라고 부르기도 함
UX 디자이너
- 유저 리서치와 테스트, 정보 구조 설계, 페르소나와 유저 시나리오 작성 등 사용자 분석 데이터 활용
프로덕트 디자이너
- UI와 UX를 포함하여 제품 전반의 경험을 디자인
- 사용자가 경험하는 제품의 시작과 끝 모두를 담당, 반복적인 개선을 통해 제품을 고도화
JD의 분석) 스타트업
- 스타트업은 대부분 프로덕트 디자이너가 전반적인 UXUI를 모두 담당
- 정량, 정석적 데이터를 수집과 검증
- 논리적으로 표현하고 설득하는 논리적인 커뮤니케이션
JD 분석) 대기업
- 대기업은 비지니스 규모가 매우 커 UX 디자이너와 UI 디자이너를 나눔
- UI 디자이너) 공통 디자인 시스템 구축, 심미성 고려
- UX 디자이너) 기획 및 설계
디자인 가이드라인
- 일관된 디자인을 위해 디자인을 할 때 지켜야 할 원칙과 규칙을 제안하는 것
디자인 가이드라인의 장점
- 기업) 브랜드 아이덴티티를 강력하게 유지, 디자이너 간의 결과물 수준을 상향 평준화
- 디자이너) 미리 정의된 컴포넌트를 재사용하면서 효율적인 업무
- 사용자) 일관된 사용자의 경험
➀ 애플의 Human Interface Guidelines(HIG, 히그) 🔗 링크
- 애플 생태계 내 플랫폼간의 흐름을이 끊김 없이 이어질 수 있는 경험 제공
- 앱 인터페이스를 일관되고 직관적으로 제작, 사용자 경험을 향상 시키는 역할
- 앱스토어에 등록하는 모든 어플리케이션은 HIG를 지켜야 함
➁ 구글의 Material Design 🔗 링크
- 다양한 Android 기기에서 공통으로 적용할 수 있는 일관된 디자인 가이드라인
- 애플과 달리 구글은 안드로이드 OS를 오픈소스로 제공, 다양한 기기의 사양에도 동일한 유저 경험을 만드는 역할
[실습] 내가 자주 쓰는 서비스 뜯어보기
자주 사용하는 마켓컬리 서비스의 UI를 살펴보았다.
마켓컬리는 얼마 전 뷰티컬리 서비스를 런칭하였는데, Top App Bar를 통해 마켓컬리와 뷰티컬리 화면을 이동할 수 있게 제작하였다.
이렇게 화면을 전환해주는 버튼을 Material Design에서 찾아본 결과, Segmented button이라는 것을 알게 되었다.
Segmented button(분할 버튼)
- 세분화된 버튼은 사람들이 옵션을 선택하고 보기를 전환하거나 요소를 정리하는데 도움을 준다.
- 사용성을 보장하기 위해 세그먼트 내에 최대 패딩을 설정하는 것이 좋다.
- 버튼의 윤곽선이나 표면은 배경과 최소 3:1의 대비를 가져야한다.
마켓컬리의 Segmented button 분석
👍 좋은 점
- 마켓컬리의 Segmented button은 Top App Bar안에 속해있는 개체로써 화면 스크롤에도 항상 화면 상단에 위치해있어 탭 전환에 용이하다.
- 대비가 확실하고 Primary 컬러를 활용하여 사용자의 눈에 쉽게 띈다.
⚠️ 아쉬운 점
- 버튼의 크기가 작은편이라고 느껴졌다. 특히 세로의 길이가 짧아 작은 영역을 정확히 터치하려는 노력이 필요하다.
- Top App Bard에서 Segmented Button을 꺼내와 밑에 좀 더 큰 영역으로 배치하는 등의 개선 시도를 해볼 수 있을 것 같다.
UXUI 입문 - Chapter 3. 실무 프로세스
제품팀
목적조직
- 특정한 목적을 달성하기 위해 여러 직무가 모인 팀
- 스쿼드나 사일로라고 부르기도 함
- 다양한 직무 사람들이 모여 빠르고 효율적으로 제품과 기능을 제작
기능조직
- 유사한 직무끼리 구성된 팀
- 주로 챕터라고 부르며 기획팀, 디자인팀, 개발팀 등이 여기에 속한다
- 비슷한 일을 하는 사람들끼리 모여있기 때문에 전문 분야에 대해 깊게 논의할 수 있음
매트릭스 조직
- 구성원이 기능조직과 목적조직에 교차된 형태로 소속된 구성
- 프로덕트 디자이너의 경우 기능조직인 디자인팀에 속하며 동시에 목적조직인 스쿼드에 속할 수 있음
- 속도를 빠르게 가져가는 목적조직 형태로 일하면서, 기능조직으로 전문성으로 보완할 수 있는 장점을 가진 조직
린스타트업
- 빠르게 제품을 테스트하고 그 결과를 다시 제품에 반영하는 운영 방식
- 불확실성이 높은 스타트업에서 제품을 효과적으로 개발하기 위해 고안된 전략
- 적은 리소스로 빠르게 시장에서 검증해 나가는 방식
애자일
- 제품을 만드는 방법론 중 하나
- 일정한 주기로 빠르게 제품을 배포해 사용자의 피드백을 받고 요구사항을 수정해 나가는 과정을 반복
- 1-4주의 스프린트 단위로 제품을 개발, 테스트하고 피드백을 받아 개선해나가는 과정 반복
애자일 용어
- 스프린트 : 집중된 태스크를 완료하는 짧은 기간동안의 업무 주기
- 스크럼 : 스프린트 안에서 목표를 정하고 우선순위에 따라 제품을 개발하는 방식
- 이터레이션 : 짧은 주기의 스프린트를 이어나가며 반복하는 것
실무 디자인 프로세스 과정
프로덕트 스펙 문서
- 팀원 모두가 같은 생각을 갖고 제품을 만들 수 있도록 가이드하는 역할
- 기획 배경과 솔루션 기능, 요구사항, 실현 계획 등을 담는다
- 가능한 한 기획, 디자인, 개발에 필요한 모든 내용을 적는 것이 좋음
- *계속해서 문서를 업데이트 하는게 중요
- 기획 배경 & 문제 정의
- *솔루션 설명(디자이너의 역할 중요) : 페르소나, 사용자 시나리오, 기능별 주요 특징과 요구사항, 최종 시안 작성
- 실험 설계
- *예상 일정(스프린트 일정 주기 계획 중요)
핸드오프 가이드 예시
디자인 피드백 요청에 포함하면 좋은 것
- 디자인 배경 설명
- 솔루션의 의도
- 필수 리뷰어 선정
- 참고 문서(프로덕트 스펙 문서)
- 피드백 기한 지정
실무 프로세스 1. 협업하기
PM(Product Manager)
- 제품의 전략을 세우고, 우선순위를 결정해 실행하는 사람
- 실무 중심으로 프로젝트를 관리
PO(Product Owner)
- 제품에 대한 오너십을 갖고 제품이 시장에 잘 전달될 수 있도록 관리하는 사람
- 제품 전반의 로드맵을 그리고 제품을 관리
엔지니어
- 프론트엔드 엔지니어 : 눈에 보이는 영역의 기능을 구현
- 백엔드 엔지니어 : 제품에 필요한 정보를 저장하거나 전송, 관리하는 영역을 담당
- QA 엔지니어 : QA(제품 퀄리티) 테스트를 계획, 진행하고 제품 전반적인 품질을 높이는 역할
- 데이터 애널리스트 : 수집, 분석을 통해 인사이트를 제공하는 사람
UX/UI 직무
BX(Brand eXperience) 디자이너 : 브랜드 경험과 관련된 전반적인 디자인을 하는 사람
UX writer : 제품 내의 문구를 담당하는 사람
실무 프로세스 2. 실험 문화
실험이란?
- 제품의 개선이 실제로 사용자에게 더 나은 경험으로 이어지는지 데이터로 검증하는 것
A/B 테스트
- A안: 원안, 대조군(control) vs B안: 개선안, 실험군(treatment)
- 두 가지 이상의 버전을 각각 다른 사용자에게 보여주고 성과를 측정하는 실험
- 테스트 변수(A안과 B안의 차이점)은 하나로 규정하는게 좋음
실험을 위한 제품 분석 도구
- 앰플리튜드 🔗링크
- 제품 안에서 일어나는 특정 행동에 이벤트를 심어두면 해당 행동이 일어났을 때를 기록해 데이터를 쌓고 보여주는 서비스(유료)
- 구글 애널리틱스(GA4) 🔗링크
- 마케팅 플랫폼과의 연계성이 좋음(무료, 일부 유료)
실무 프로세스 3. 디자인 QA
QA(Quality Assurance)
- 제품이 출시되기 전에 기능을 테스트하는 것
- 제품이 기획한 대로 구현이 되었는지, 회사에서 생각하는 품질 기준에 충족이 되었는지 확인하는 과정
QA의 목적
- 사용자가 제품을 이용할 수 없을 만큼의 치명적인 결함은 없는지 확인
- 조직 전체에서 기대하는 수준의 품질을 갖춰졌는지 확인
- 특수한 상황에서 예상하지 못한 대로 동작하지는 않는지 확인
- 전반적인 UX가 사용하기 편리한지 확인
QA 문서
- 체크리스트(CL) : 예/아니오 혹은 Pass/Fail로 답변할 수 있는 확인 성격의 항목 목록
- 테스트 시나리오(TS) : 기획한 기능이 제대로 동작하는지 사용자가 기능을 사용하면서 경험하게 되는 모든 과정을 상세히 기록
- 테스트 케이스(TC) : 특정 조건에서 요구 사항을 충족하는지 확인하기 위해 여러가지 케이스를 작성한 문서
디자인 QA
- 디자인 화면과 개발된 화면을 비교하며 다른 부분을 팀원들과 공유, 수정 진행
- 잘못 개발된 화면과, 원래의 디자인 화면을 기획 의도와 함께 전달
- 지라나 트렐로같은 프로젝트 관리 툴을 사용하면 이슈를 업무 티켓 형태로 전달 할 수 있음
- 배포 일정이 촉박한 경우 이슈별 중요도를 표시하여 전달하면 좀 더 효율적인 진행 가능
[실습] 테스트케이스 작성 + 디자인QA로 발견한 이슈 공유하기
1️⃣ 뱅크샐러드의 회원가입 과정 테스트케이스 작성하기
| 화면 | 조건 | 테스트 케이스 | 입력 값 | 기댓값 | 테스트 환경 |
| 이름, 주민번호 입력 | 정상 | 텍스트 필드에 정상 값 입력 | 이름: '김시현' 주민등록번호 앞 7자리: '001022 4' |
휴대폰번호 입력칸으로 이동 | iOS |
| 통신사 선택 | 정상 | 통신사 리스트 팝업으로 등장, 선택. 전화번호 입력 | '알뜰폰(KT)' 항목 선택 | 인증 요청 화면으로 이동 | iOS |
| 인증 요청 | 정상 | 인증 요청 버튼 클릭 | 버튼 클릭 | 인증번호 입력 화면으로 이동 | iOS |
| 약관 동의 | 정상 | 모두 동의하기 버튼으로 모든 항목 체크 or 각각의 항목 체크 | 체크 리스트 체크 | 인증번호 입력 화면으로 이동 | iOS |
| 인증번호 입력 | 정상 | 인증요청번호 입력 | '000000' | 회원가입 완료 화면으로 이동 | iOS |
| 잠금해제 비밀번호 입력 | 정상 | 4자리 비밀번호 입력, 비밀번호 생성 | '0000' | 회원가입 완료 화면으로 이동 | iOS |
2️⃣ 디자인 QA로 발견한 이슈 공유하기
| Fail | 기대결과 |
| 휴대폰 본인인증 화면에서 이름 텍스트 길어지면 텍스트필드 바깥으로 텍스트가 넘어가는 오류가 있습니다. | 텍스트가 텍스트필드 길이보다 길어질 경우 말줄임표를 사용하여 텍스트필드 바깥으로 넘치지 않게 설정해주시고, 삭제 아이콘을 넣어 전체 텍스트를 지울 수 있도록 해주세요. |
UXUI 입문 - Chapter 4. 디자인 툴
비트맵 이미지(.jpeg .jpg .png .gif)
- 픽셀 하나하나가 이미지를 이루는 요소이기 때문에 벡터보다 정교하게 이미지를 표현할 수 있음
- 이미지 안의 픽셀 수가 많을수록 품질이 좋아지지만, 용량도 함께 커짐
- 이미지의 크기를 편집하면 원본 이미지의 픽셀 수가 변해 손상이 생김
벡터 이미지(.svg .eps .ai)
- 그래픽을 수학적인 함수 공식으로 표현해 이미지를 줄이거나 키워도 손상이 생기지 않음
- 좌표가 적힌 텍스트 파일로 저장되기 때문에 용량이 매우 적음
- 색 표현에 한계가 있어 사진 같은 이미지 그래픽의 섬세한 작업은 어려움
- 복잡한 이미지를 벡터로 만들면 파일 용량이 매우 커짐
- 호환성에 문제가 생길 수 있음
인터페이스 디자인 툴
피그마 / 스케치 / XD
- 벡터 방식을 기반으로 함
- Lo-fi 프로토타이핑이 가능
- dev mode를 통한 그래픽 → 코드 변환
피그마
- 클라우드 기반으로 인터넷이 가능한 곳 어디서든 파일을 열고, 편집 가능
- 멀티 플랫폼 지원으로 툴을 설치하지 않아도 브라우저로 사용 가능
프로토타이핑 툴
피그마 프로토타이핑 / 프로토파이 / 프레이머
- 화면의 움직임이나 인터랙션을 구현할 수 있도록 도와주는 툴
- 인터랙션 : 사용자가 제품을 사용하면서 반응을 주고받는 것
프로토타입이 중요한 이유 : 인터랙션 디자인을 테스트하기 위해
- 디자인된 화면은 정지된 화면이기 때문에 실제 사용자가 제품을 이용하는 과정을 담지 못함
- UX는 정지된 화면이 아니라 서로 소통하는 인터랙션 과정에서 생겨나는 경험
- 사용자가 어려움 없이 제품을 경험할 수 있는지 프로토타입으로 테스트하는게 중요
1️⃣ 피그마 프로토타이핑
- 피그마 자체에서 만든 화면을 가지고 간단하게 Lo-fi 인터랙션을 만들어볼 수 있음
- 단순한 동작을 시연할 때 좋다
2️⃣ 프로토파이
- 코딩 없이 실제 제품과 비슷한 수준의 프로토타입을 만들 수 있음
- 눈에 보이는 GUI를 클릭해서 작업할 수 있어 코드가 어려운 디자이너도 편리하게 사용 가능
- Hi-fi 수준의 기능 구현 가능. 키패드로 텍스트를 입력하는 등의 행동도 가능
- Conditions(조건부 트리거) 기능으로 높은 수준의 구현 가능
3️⃣ 프레이머
- 코드 기반으로 실제 제품과 가장 유사한 수준으로 프로토타입 제작 가능
- 인터페이스 디자인 툴의 기능 제공
- 프로토타이핑을 실제 제품으로 배포까지 가능
- 코드를 다루는게 익숙하면서 혼자 디자인과 개발까지 진행하고자 할 때 사용
'2025 내일배움캠프' 카테고리의 다른 글
| UI 디자인 실무 컴포넌트와 프로토타입 (0) | 2025.10.21 |
|---|---|
| UI 디자인 실무 설계와 정보 구조 (0) | 2025.10.20 |
| 음식 배달 시장 문제 아이디어 구체화, 와이어프레임 제작하기 (2) | 2025.10.16 |
| A-E-I-O-U 프레임 분석 (0) | 2025.10.15 |
| 음식 배달 시장을 타깃으로 아이디어 도출하기 (0) | 2025.10.14 |