03/31(월) UX,UI 파트 시작, 용어
AI 서비스 기획 공부
오늘부터는 UX/UI 를 배우게 되었다!!!
비즈니스 기획이 끝나고
UX/UI를 그리고, 문서로 정리하는 과정을 배울 예정이다.
서비스를 기획하는 작은 경험들을 해왔었는데
매번 모호하기만 했던 것들이 교육을 통해 정립되고,
지식에 라벨링이 되고 있다는 느낌을 받는다.
이제 3월 알바도 끝이 났다.
이제는 기업 정리, 포트폴리오와 이력정리를 통해 나를 정리하면서
교육내용 복습할 수 있는 시간이 충분히 있단 거다.
잊지말자! 교육 받는 것도 좋지만, 난 세상에 나가 보기 위해 휴학을 결심했다는 사실을!!
PO
PM
서비스 기획
- UI 기획 (플로우)
- UI/UX 디자이너 (디자인 쪽에 초점)
1. 비즈니스 기획
2. UI/UX
3. 인공지능
고객과 기술의 연결점 : 서비스
서비스 -- 화면과 백오피스로 이루어짐
백오피스 화면을 통해서 비즈니스와 연결
화면을 통해서 고객과 연결
=> AI 기획자가 UI/UX를 이해해야 하는 이유
HMI
HCI
UI 용어 가이드
텍스트 - 글
이미지 - 사진, 일러스트 등
아이콘 - 시각적으로 표현한 이미지
버튼 - 사용자가 화면 제어(이벤트)할 수 있는 기본적 요소
중요도 및 상태에 따른 다른 GUI로 표현하여 사용자 이해 도움
드롭다운 메뉴(콤보박스) - 옵션 중 한 가지 선택할 때 사용하는 컴포넌트
*컴포넌트 - 재사용 가능한 가장 작은 단위
새그먼티드 - 내용 나눠 보여주고자 할 때, 정렬 할 때
라디오버튼 - 옵션 중 하나의 옵션 선택하도록 할 때 (하나 선택 시 이전 선택 해제)
체크박스 - 옵션 중 여러개의 옵션 선택하도록 할 때
토글 버튼(토글 스위치) - 상반 옵션 중 하나 선택하는 경우 (컬러감도 같이 바꿔주는 걸 추천)
레이블 - 정보의 종류나 입력 필드의 목적을 설명하는 텍스트 요소
입력 필드, 체크박스, 라디오 버튼 등의 요소와 함께 사용
인풋(텍스트 필드) - 텍스트 입력 가능
플레이스홀더 - 사용자가 텍스트 입력 시 입력할 수 있게 적절한 예시 알려주는
텍스트 입력하면 자동으로 사라지며 입력된 값 보여줌 (컴포넌트는 아님)
네비게이션 - 앱에서 페이지 간 이동이나 주요 기능에 접근하기 위한 상단 인터페이스 요소
GNB - 모든 페이지
LNB - 한정된 부분 보여주는 NB
SNB - 사이드에 있는 NB
FNB - FOOTER에 있는 NB
헤더 - 모든페이지에 공통, 웹 상단에 로고, 네비게이션, 액션 버튼 모아놓은 영역
푸터 - 모든 페이지에 공통, 하단에 로고 ~ 사이트맥, 필수 페이지 링크, 소셜 정보, 저작권 표기, 언어 설정 등 FNB 포함
브레드 크럼 - 사용자가 어느페이지에 접근했는지 알려주는 요소
아코디언 - (FAQ 같은 곳에 사용) 한 개 이상의 내용을 하나의 메뉴로 묶어서
정적 스켈레톤 화면 - 페이지 레이아웃 구상할 때, 사용자가 로딩이 빠르다고 생각하게 끔 함.
애니메이션 스켈레톤 화면 - 그라데이션이나 움직임 추가된 형태
프로그레스 바 - 진행 상태 표시하는 요소
형태는 다양
배지 - 상위요소의 상태, 개수 등 부가적 정보 나타내는 요소
플로팅 버튼 - 페이지에 고정적으로 노출시키는 요소 (페이지의 핵심 가치 중점적으로)
캐러셀 - 여러가지의 요소를 한 위치에서
페이지네이션 - 한정된 공간에서 여러 개의 페이지 보여줄 때 사용
로딩 시간 줄여줌 (초기 페이지 10개 정도만 보여줌)
무한 스크롤의 경우에도 페이지네이션 개념 적용된다. 한 스크롤에 한 페이지, 그 다음 스크롤 할 때 다음페이지 불러옴.
슬라이더 - 수치가 중요하지 않고, 느낌이 중요하면 그냥 슬라이더를 씀
스태퍼 - 간단 조작으로 숫자 입력 가능 (수량 추가 등), 사용자 행동을 강제 하기 위함 (숫자는 숫자로만 입력되게)
툴팁 - 도움말 버튼 (처음 온보딩 프로세스, 사이트 어떻게 사용하는지 알려주는)
토스트 메시지 - 서비스 이용에 필요한 정보를 일시적으로 제공하는 팝업
데이트 피커 - 연월일 날짜 입력받을 때
바텀 시트 - 이벤트 페이지,, 기존 내용과 함께 볼 수 있도록
모달 - 기존 페이지와 종속적 관계일 때 뒷 페이지에 추가적으로 입력받을 때 사용하게 됨.
팝업 - 페이지 위에 별도로 노출
*모달과 팝업은 사용자에게 좋지 않은 경험을 제공함.
**개발 관련 용어
프론트엔드 - 사용자에게 보여지는 부분 (고객+운영)
리액트= 모바일 특화 버전 (네이티브에 가까움, 문법 어려움)
플러터= 개발 속도 빠름.
(서비스의 타겟디바이스를 처음에 설정해야 하는데, 결정하게 되면 어떤 기술가진 개발자로 구성할지 결정할 수 있음)
백엔드 - 사용자에게 보여지지 않는 정보 처리와 관련된 부분
*백엔드는 서버, 프론트엔드는 브라우저, 어드민은 백오피스, 고객은 프론트오피스 인거죠?
네이티브 앱 - 모바일기기 최적화된 언어로 개발된 앱
자바, 코틀린, 스위프트, OBJECT-C 등
장점은 권한 모두 사용가능 ) 카메라, 갤러리, 전화 등 접근 권한 있음
웹 앱 - 브라우저에서 동작하게 만들어짐.
브라우저 권한만 사용 가능
*네이티브로 하면 IOS, 안드로이드 따로 만들어야 함.
*웹앱은 둘 다 가능
*이 개념을 알고 있으면 자문 받아서 어느 게 좋을지 판단하고, 예산설정할 때 좀 쉬워짐.
하이브리드 앱 - 두 가지 모두 사용하는 앱,
코르도바, 폰갭
껍데기는 네이티브, 실제 동작은 웹앱 (브라우저)
속도나 보안상의 문제로 최근에 사용 안 함
반응형 웹- 디바이스에 최적화되어있는 형태로 레이아웃 자체가 바뀜 (크기만 바뀌는 거 아님)
단점=네이티브앱 기능 하나도 사용 안 됨 (웹은 푸쉬 기능,, 안됨 사용자 리텐션 올릴 때 좋지 않음)
프론트 앤드 할 때 따로 앱, 웹 안만들어도 되어서 빨리 할 수 있음
설치하는 거 아님, 브라우저에서 URL 링크로 들어가야 함.
배포 - 빌드 완료된 서비스를 사용자에게 제공
개발-> 빌드->배포
개발 - 로컬에서 잘 돌아가는지
빌드 - 패키징, 실행가능한 형태로 만드는 것
QA - 제품 테스트 버그, 결함 시정하고 릴리즈 일자 조율
기획자와 연결 됨
기획자가 시나리오 설계한 것 기반으로 정상 시나리오 기준으로 잘 동작하는지 QA하는 것
기준은 기획자가 세우는 것이다.
어떤 것을 만들지에 따라서 결정할 수 있어야 함.
어떤 디바이스까지 서비스 할 건지 전략들도 세우게 됨
IA 정보구조도
상세기획서 - 서비스 관련 모든 내용 담은 산출물
와이어프레임 - 구조 잡기위한 목적, 전체적 레이아웃
(요구사항 정의 => 시나리오 => 와이어프레임 (종이, 칠판, 온라인 툴) + 디자인=프로토타입
플로우차트 - 서비스 플로우의 흐름을 순서도나 기호 사용해 도식적 표현한 다이어그램 (시나리오 도식화)
**업무 관련 용어
애자일 방법론
스크럼 - 우선순위 부여, 개발 주기 설정, 실제 동작할 결과 만들어내는
칸반 - 소규모 작업시 사용, 라이트한 애자일 실천 방법
스프린트 - 스크럼 이루어지는 개발 주기
프로덕트 백로그 - 요구사항 문서 (요구사항, 요청자, 시간, 요구 등)
스프린트 백로그
MVP - 비즈니스 모델에 대한 가설을 테스트 하는 것
OKR
AI 서비스는 로딩 속도가 느리기 때문에 그를 보완할 수 있는 컴포넌트들을 잘 사용해주는 게 중요하다는 것을 알겠음
앱
1. Bottom Navigation Bar / Tab Bar
2. App Bar
3. Status Bar (기기의 현재 상태, 시간, 현재 상태)
HTML
UX와 BX
GOOD UI PRINCIPLE
AI 신뢰도 형성을 위한 UX/BX 전략
신기술 => 하드웨어 발전 => 소프트웨어 발달
(기술 추세)
앱 -> 휴대폰 -> 앱서비스
AI -> GPU -> 서비스
=> 신기술
현재 모델 연구개발, 하드웨어 개발 정점
소프트웨어 각광을 받게 될 것 (현재 태동 단계)
나는 여기서 기획 진입자, 시대를 이어갈 수 있는 좋은 시점
GPT RAG는 보안상의 문제가 있으니까
LOCAL LLM 사용
성능이 낮음, 경량화 시킴
BASE MODEL 사전에 학습된 모델 사용
OPEN SOURCE로 배포됨
라마 = 페이스북이 만든 모델 + 파인튜닝 진행
*파인튜닝 = (EX. 한국어 탑재한 상태에서 부산 사투리 추가 학습)
(일반적 레그와 다름)
