- Zeigarnik Effect
- process flow
- 넛지효과
- 모달의 개념
- 피그마 프로토타이핑
- 스파르타코팅 UXUI
- UX Psychology
- Jakob’s Law
- mental model
- 모바일 버튼 크기
- 프레임 이해
- UXUI개선
- Mental model discordance
- 제이콥의 법칙
- 근접성의 법칙
- Doherty threshold
- DataDriven
- 밀러의 법칙
- 유저페르소나
- 피그마 플러그인
- UX개선사례
- 고객여정지도
- Fitts’s law
- UXUI리뷰
- IKEA Effect
- 피그마단축키
- UXUI부트캠프
- 5whys
- Goal-Gradient Effect
- 공통영역의 법칙
목록분류 전체보기 (39)
Happiness!
![](http://img.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/M3l6Q/btsDp9yiDuo/NkYJzZEMEGL2gIXukCgoKk/img.png)
팝업: 화면 위에 새로운 화면을 띄우는 것 1. 기존 브라우저 위에 독립적인 브라우저를 갖는 것 (새로운 레이어가 올라가는 것) 2. 브라우저 옵션에서 컨트롤 할 수 있는 것 모달: 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것 1. 브라우저 위에 브라우저를 띄울 수 있는 것 (대부분 부모-자식 관계) 2. 브라우저 옵션과 관계 없이 띄울 수 있는 것 3. Dim처리가 있어 부모 페이지는 사용할 수 없는 것 ❗️주의. 모달(Modal)은 UI의 이름이 아니라, UI를 분류하는 기준 중 하나 모달에는 시작(모달을 진입하게 하는 컴포넌트)과 끝(Cancel, Send, Save, OK, X etc.)이 존재한다. 따라서, 모달(자식)에 진입한 사용자는 서비스 흐름에서 벗어나, 모달 내..
![](http://img.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/35Fb2/btsDlCga1Ec/SA2JGcJhB2N73LZQDBfK31/img.png)
모달의 정의 - 모달은 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것을 뜻함 - 즉, 사용자가 원래 쓰고 있던 화면을 잠가버리고, 사용자가 모달 UI 내부의 어떤 액션을 하기 전까진 풀어주지 않음 - 모달(Modal)이라는 건 UI의 이름이 아니라, UI를 분류하는 기준 중 하나 라이트 박스의 정의 - 모달 UI에서 반투명한 층을 라이트박스(Lightbox)라고 함 - 모달 UI를 사용할 때는 일반적으로 ‘뒤에 가려진 화면은 사용할 수 없다’는 걸 보여주기 위해 반투명한 층을 만들어 줌 - 스크림(Scrim; 천 또는 장막), 딤드(Dimmed; 흐려진), 딤레이어(Dim Layer), 오버레이(Overlay) 등으로도 불림 레이어 팝업의 정의 - 레이어 팝업은 새로운 창을 띄우는..
![](http://img.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bpEByX/btsDhVN72TF/feYZKSwyKKDkecCfftxYXk/img.png)
💡 디자인씽킹 사용자에 대한 이해를 기반으로 문제를 찾고 제품을 만들어 검증하는 프로세스 논리적으로 제품을 만들 수 있도록 도와주는 프레임워크 중 하나 디자인씽킹은 5단계로 구성 1. 공감하기 Empathy 인터뷰나 관찰 등의 다양한 방법으로 사용자와 공감대를 맞추고, 그들의 경험을 완전히 이해하기 위한 노력을 하는 단계 공감지도 (Empathy Map) : 6개의 도표를 채우며 사용자의 숨겨진 어려움과 욕구를 유추할 수 있도록 도와주는 시각화 도구 (참고) https://www.toolo.org/sub/tool_detail.php?idx=15 2. 문제 정의하기 Define 공감으로 얻은 정보를 해석해 사용자가 불편함을 느끼는 지점을 발견하는 단계 공감으로 얻은 정보를 해석해 사용자가 불편함을 느끼는 ..
![](http://img.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/5N8FS/btsC0XYD6bG/RLkughIqnkJNYKUeGzy2fk/img.png)
1. 플러그인 플러그인이란 피그마 자체 기능으로 지원하지 않는 기능을 실행하게 해주는 일종의 확장 프로그램 1-1. Material Design Icons 머터리얼 디자인 아이콘 플러그인을 활용해서 원하는 아이콘을 사용 https://www.figma.com/community/plugin/740272380439725040/Material-Design-Icons Material Design Icons | Figma Community Instant easy access to the entire Material Design Icons library: 35,000+ icons in PNG and SVG at your fingertips. Search icons by name or scroll through th..
![](http://img.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cAnhB4/btsCK63BWZE/8Jh6pEqDV4xCneaSDOkC60/img.png)
오늘은 내일(금)까지 있을 과제 제출을 위해 앱 서비스 분석을 했다. 이번주 강의는 전반적으로 현장에서 쓰이는 실무 지식이나 서비스 기획에서도 유용한 내용이 있어서 유익했다. 딱 1주차에 맞는 강의라고 느껴졌다. 스파르타 교육 커리큘럼이 전반적으로 피드백이 잘 반영돼서 잘 운영되는 것 같다. (수강생의 열정과 에너지도 그만큼 따라가면 최고의 시너지!)
![](http://img.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/uzonQ/btsCAhScy3Z/GMokui2xdWmLYhI4SX5exK/img.png)
1주차는 직접 피그마 툴을 다뤄 보는 시간이었다. 기본적인 베리언트 설정을 배웠는데, 나아가 프로토타이핑을 더 써보고 싶어서 유튜브의 도움을 받았다. 프로토타입은 피그마로 코딩 없이도 애니메이션을 구현할 수 있어 실무에서도 매우 유용하다. 컴포넌트 텍스트 > 프레임 씌우기 > 컴포넌트 베리언트 설정 상단 탭 메뉴 좌우 스크롤 스크롤을 하고싶은 contents > 프레임 씌우기 > 프로토타입에서 수평 스크롤 설정 (주의) 스크롤을 하고싶은 contents들은 묶인 Frame size보다 좌우 폭이 길어야 스크롤링이 된다 콘텐츠 영역 상하 스크롤 스크롤을 하고싶은 contents > 프레임 씌우기 > 프로토타입에서 수직 스크롤 설정 (주의) 스크롤을 하고싶은 contents들은 묶인 Frame size보다 ..
![](http://img.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bLwXmk/btsCj0QWyEc/Wih4COTk5uEw5vP0sTK2Kk/img.png)
오늘 작업한 결과물 레이이아웃, 컴포넌트, 베리언트, 프로토타이핑 적용한 클론 디자인 2주차 지나고 나서 새롭게 시작될 강의들이 기대된다