본문 바로가기

UXUI/강의학습일지

(30)
[강의학습일지] UX기획 및 리서치 1주차 숙제 - 데이터 기반 UX 개선 사례 데이터를 기반으로 UX를 개선한 사례 3개4강 데이터 기반 UX 트렌드에서 살펴본 예시를 참조하여 문제 정의 - 가설 수립 - 해결 방법 - 검증 과정 - 결과를 조사해보세요.1. 토스 킥보드 서비스 독이 되는 레퍼런스 활용법매혹적이지만 독이 될 수 있는 레퍼런스. 어떻게 활용하는 것이 좋을까요?toss.tech 2. 알다 홈 화면/ 대출 서비스  알다 앱 디자인 리뉴얼 이야기 (3)홈 개편으로 어떻게 문제를 해결할 수 있을까?aldadesign.medium.com 3. 배달의 민족 로그인  가입은 쉽게, 로그인은 실패 없이! 휴대폰번호로 계속하기 | 우아한형제들 기술블로그회원 가입을 하려다 귀찮아서 포기한 적 있으신가요? 로그인 비밀번호를 잊어버려서 답답한 적 있으신가요? 배민에는 이메일, 카카오, 네..
[강의학습일지] UX 기획 및 리서치 1주차 강의 UX/UI 개념 이해UX (User experience, 사용자 경험) 디지털 뿐만 아니라 오프라인에서의 경험 또한 포괄하는 개념모든 감각을 활용하는 다양한 경험을 고려유저가 제품이나 서비스와 상호작용하는 과정에서 얻는 모든 경험유저의 관점에서 유저의 문제를 해결하는 것에 집중UI (User Interface, 사용자 인터페이스) UI가 UX에 포함되는 개념 중 하나라고 보는 시각도 존재유저가 최종적으로 제품이나 서비스를 사용할 때 맞닿는 시각적 구성 요소시각 언어의 규칙을 만드는 것에 집중최근에는 UX, UI 디자인을 모두 아우르는 UX/UI 디자이너 및 프로덕트 직군이 늘어남포트폴리오 제작 시 나의 강점이 잘 드러나도록 구성하기UX/UI 디자인 프로세스 : 더블 다이아몬드 모형 1. 발견(Discov..
[강의학습일지] Figma 활용법(2) 3주차 강의 프로토타입 실제 제품을 만들지 않고 아이디어를 테스트해 볼 수 있는 것Lo-fi(Low/High): 전체 흐름을 빠르게 맞춰볼 수 있는 수준. 와이어프레임. 피그마는 Lo-fi를 만드는데 특화됨Hi-fi(High Fidelity): 실제 제품과 거의 같거나 유사한 수준(사용자 대상으로 사용성 테스트, 제품 피드백 수집 가능)프로토타입을 만들거나 사용해 테스트하는것을 프로토타이핑이라고 함프리뷰 모드: Shift+Space문장으로 이해하면 편함: ~하면(조건,트리거) 어떻게(애니메이션) ~한다(액션) 1) 핫스팟(Hot Spot): 프로토타입을 시작하는 지점인터랙션(Interaction)에서 +를 클릭해도 OK 2) 커넥션(Connection): 화면을 서로 이어주는 연결선  3) 종착점(Destinatio..
[강의학습일지] Figma 활용법(2) 2주차 강의 다양한 환경에서의 UI 차이  UI는 기능과 목적이 중요하다 = UI 차이가 있다 = 목적에 차이가 있다 = UX에도 차이가 있다앱과 웹 둘 다 서비스를 하는 곳 비교해 보기주소입력해서 접근할 수 있는 화면들이 어떤 화면들인 가?거기에 사용자가 접근했을 때사용자를 어떻게 뒤로 돌려보낼지(ex. 잘못된 요청)오류처럼 받아들일 수이는 화면에 갈 수 없도록 대비하기 뒤로 가면 안 되는 화면에 뒤로 가기 접근하는 경우결제가 뒤로 가거나, 취소가 여러 번 돼서 서버에 문제가 되는 등 뒤로 가면 안 되는 화면 보호장치를 개발팀과 논의하기디자인 목적: 사용자가 더 편하고 수월하게 목적을 빠르게 달성할 수 있는 방향으로 수렴함웹이라고 반드시 메뉴가 상단, 앱이라고 하단이 아님! 디자인 목적을 생각해보기. 사용자가 편하..
[강의학습일지] Figma 활용법(2) 1주차 강의 컨테이너 컴포넌트 컴포넌트의 분류 6가지 중 하나합성 컴포넌트 (Compound Component)ex) 버튼은 이미 컴포넌트이지만 +폰트, 컬러, 여백 등등 만들어 다시 컴포넌트를 만듦팝업과 모달 팝업(Pop-up)일반적인 팝업의 뜻과 UI관점의 팝업은 다름 (회사/사람마다 부르는 이름이 다름)일반적 팝업: 현재 화면+새로운 화면모달(Modal)이름X, UI의 속성(팝업, 토스트, 바텀시트, 다이얼로그, 사이드바 등)어두운 화면: 뒤쪽의 화면이 멈추고 조작할 수 없음을 안내새로 떠있는 화면에만 시선을 집중시킴라이트박스(Lightbox) =스크림(Scrim), 딤드(Dimmed), 딤레이어(Dim Layer), 오버레이(Overlay)모달 UI를 사용할 때 어둡고 반투명한 층원래 있던 화면을 잠그고 사용..
[강의학습일지] Figma 활용법(1) 4주차 강의 컴포넌트 모양보다 기능이 중요함 (모양보다 무엇을 하는지 정의에 집중!)Action : 사용자가 중요한 행동을 수행할 때 (ex. 버튼)Input : 사용자의 입력을 받을 때 (ex. 텍스트 필드)Information : 사용자에게 서비스의 상태나 안내 사항을 전달할 때Container : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트Navigation : 사용자가 페이지를 이동할 때Control : 사용자가 설정이나 값을 수정할 때컴포넌트 1. 의사상태 버튼의 기본값에 (~했을) 때 (~)이 변하는 것Hover (마우스가 올라갔을 때)Pressed (눌렀을 때)Active VisitedLinkFocusCheckedDisabled컴포넌트 2. 마스터 컴포넌트와 인스턴스 원본: 마스터 컴포넌트..
[강의학습일지] UXUI 디자인 입문 6주차 숙제 - 레퍼런스 분석하기: 카카오톡 1. 화면 구조 분석카카오톡에서 5개의 메인 탭 화면이 각각 어떠한 구조로 되어있는지 나눠보세요.1. 친구 탭(메인) 2. 채팅 탭 3. 오픈채팅 탭 4. 쇼핑 탭 5. 더보기 탭 2. 디자인 원칙 기반 분석좋은 사례 2개와 나쁜 사례 2개, 총 4개의 사례를 찾아서 디자인 원칙에 근거하여 작성해 보세요.좋은사례시각적 위계중요한 부분에 큰 글씨, 튀는 배경색으로 대비감을 줘서 눈에 띄게 만들었다.근접성의 원리카테고리마다 여백을 줘서 별개의 그룹처럼 보인다.나쁜 사례균형양쪽이 대칭으로 맞으면 안정적이고, 비대칭이면 역동적이고 신선한 느낌이다.첫번째 캐러셀 카드는 옆으로 Swipe 할 수 있어 대칭이 맞지 않는다.두번째 카테고리 메뉴는 캐러셀 형태가 아님에도 불구하고 양쪽 대칭이 맞지 않고 오른쪽으로 치우쳐..
[강의학습일지] UXUI 디자인 입문 6주차 강의 레퍼런스 분석여러 가지 사례를 분류해 생각해 보고 도움이 될만한 부분을 찾아보는 과정얻고 싶은 정보-다양한 사례수집-세부적 요소로 나눠서 살펴보기좋은 점, 나쁜 점, 이유를 찾고 분석해서 인사이트를 정리해서 좋은 디자인을 구분할 수 있다.1. 화면구조 분석화면을 구성하는 요소를 나누는 방법    - 예), 파운데이션 → 엘리먼트 → 모듈 → 페이지 파운데이션: 더 이상 세부 속성으로 쪼개지지 않는 가장 기본이 되는 요소     - 예) 색상, 폰트, 아이콘 등엘리먼트: 파운데이션이 모여서 만드는 요소     - 예) 버튼, 뱃지, 탭 등모듈: 엘리먼트가 모여서 만드는 요소     - 예) 리스트, 캐러셀, 내비게이션 등페이지: 모듈이 모여서 만드는 최종 화면     - 예) 홈, 마이페이지, 장바구니, ..
[강의학습일지] UXUI 디자인 입문 5주차 숙제 - 디자인 원칙의 실제 사례 찾아보기 1. 게슈탈트 심리학에서 3가지를 골라 실제 사례를 찾아보세요.1. 유사성의 원리 - 메가박스 앱버튼이 같은 크기, 모양, 색상으로 나열되어 있어 유사한 속성을 가진다.예매 화면: 추천 영화(민트색), 자주 가는 영화관(보라색) 버튼 같은 크기/모양/색상극장 선택 화면: 전체지역, 상세지역의 크기/모양/색상2. 페쇄성의 원리 - 신세계쇼핑 앱일부가 끊어져 있거나 이어져있지 않아도 완벽한 형태로 인식할 수 있다.이미지의 일부가 잘려있어도 옆으로 계속해서 요소들이 이어질 것이라는 것 추측할 수 있다.홈 화면: 배너의 일부가 잘려있어도 가로로 콘텐츠가 이어져있음홈 화면 배너 버튼을 클릭하면 세로로 콘텐츠가 나열되어 있는데, 아래가 잘려있어도 밑으로 요소가 이어져있다는 것을 추측할 수 있음3. 공통성의 원리 -..
[강의학습일지] UXUI 디자인 입문 5주차 강의 인지심리학인간이 어떻게 보고 생각하고 행동하는가? 디자인 원칙을 기반으로 디자인을 하면 자연스러운 행동 유도→사용성 높은 제품 제작에 용이게슈탈트 심리학특정요소를 판단할 때 속한 그룹에 영향을 받음 (사용자가 제품을 경험하는 데 영향을 끼침)제품을 이용하면서 사용자는 의식적으로 통일성, 연속성, 유사성을 기대함 1. 유사성의 원리 (형태를 지각할 때 형태, 크기, 입체, 방향, 색 등 시각적으로 비슷한 요소는 관계가 있을 것이다)모양크기색상2. 근접성의 원리 (가까운 것끼리 관계가 있을 것이다)별개의 그룹으로 보이고 싶다면 여백을 두기 (카테고리화)3. 폐쇄성의 원리  (공백이 있는 부분을 추측할 수 있다)일부가 잘려있어도 이어져있을 것이라고 추측할 수 있음4. 연속성의 원리 (연속적인 선 요소가 이어지..

반응형