Happiness!

팝업: 화면 위에 새로운 화면을 띄우는 것 1. 기존 브라우저 위에 독립적인 브라우저를 갖는 것 (새로운 레이어가 올라가는 것) 2. 브라우저 옵션에서 컨트롤 할 수 있는 것 모달: 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것 1. 브라우저 위에 브라우저를 띄울 수 있는 것 (대부분 부모-자식 관계) 2. 브라우저 옵션과 관계 없이 띄울 수 있는 것 3. Dim처리가 있어 부모 페이지는 사용할 수 없는 것 ❗️주의. 모달(Modal)은 UI의 이름이 아니라, UI를 분류하는 기준 중 하나 모달에는 시작(모달을 진입하게 하는 컴포넌트)과 끝(Cancel, Send, Save, OK, X etc.)이 존재한다. 따라서, 모달(자식)에 진입한 사용자는 서비스 흐름에서 벗어나, 모달 내..

모달의 정의 - 모달은 사용자가 행동을 취하기 전까지 뒤에 가려진 화면을 조작할 수 없는 것을 뜻함 - 즉, 사용자가 원래 쓰고 있던 화면을 잠가버리고, 사용자가 모달 UI 내부의 어떤 액션을 하기 전까진 풀어주지 않음 - 모달(Modal)이라는 건 UI의 이름이 아니라, UI를 분류하는 기준 중 하나 라이트 박스의 정의 - 모달 UI에서 반투명한 층을 라이트박스(Lightbox)라고 함 - 모달 UI를 사용할 때는 일반적으로 ‘뒤에 가려진 화면은 사용할 수 없다’는 걸 보여주기 위해 반투명한 층을 만들어 줌 - 스크림(Scrim; 천 또는 장막), 딤드(Dimmed; 흐려진), 딤레이어(Dim Layer), 오버레이(Overlay) 등으로도 불림 레이어 팝업의 정의 - 레이어 팝업은 새로운 창을 띄우는..

💡 디자인씽킹 사용자에 대한 이해를 기반으로 문제를 찾고 제품을 만들어 검증하는 프로세스 논리적으로 제품을 만들 수 있도록 도와주는 프레임워크 중 하나 디자인씽킹은 5단계로 구성 1. 공감하기 Empathy 인터뷰나 관찰 등의 다양한 방법으로 사용자와 공감대를 맞추고, 그들의 경험을 완전히 이해하기 위한 노력을 하는 단계 공감지도 (Empathy Map) : 6개의 도표를 채우며 사용자의 숨겨진 어려움과 욕구를 유추할 수 있도록 도와주는 시각화 도구 (참고) https://www.toolo.org/sub/tool_detail.php?idx=15 2. 문제 정의하기 Define 공감으로 얻은 정보를 해석해 사용자가 불편함을 느끼는 지점을 발견하는 단계 공감으로 얻은 정보를 해석해 사용자가 불편함을 느끼는 ..

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..

오늘은 내일(금)까지 있을 과제 제출을 위해 앱 서비스 분석을 했다. 이번주 강의는 전반적으로 현장에서 쓰이는 실무 지식이나 서비스 기획에서도 유용한 내용이 있어서 유익했다. 딱 1주차에 맞는 강의라고 느껴졌다. 스파르타 교육 커리큘럼이 전반적으로 피드백이 잘 반영돼서 잘 운영되는 것 같다. (수강생의 열정과 에너지도 그만큼 따라가면 최고의 시너지!)

1주차는 직접 피그마 툴을 다뤄 보는 시간이었다. 기본적인 베리언트 설정을 배웠는데, 나아가 프로토타이핑을 더 써보고 싶어서 유튜브의 도움을 받았다. 프로토타입은 피그마로 코딩 없이도 애니메이션을 구현할 수 있어 실무에서도 매우 유용하다. 컴포넌트 텍스트 > 프레임 씌우기 > 컴포넌트 베리언트 설정 상단 탭 메뉴 좌우 스크롤 스크롤을 하고싶은 contents > 프레임 씌우기 > 프로토타입에서 수평 스크롤 설정 (주의) 스크롤을 하고싶은 contents들은 묶인 Frame size보다 좌우 폭이 길어야 스크롤링이 된다 콘텐츠 영역 상하 스크롤 스크롤을 하고싶은 contents > 프레임 씌우기 > 프로토타입에서 수직 스크롤 설정 (주의) 스크롤을 하고싶은 contents들은 묶인 Frame size보다 ..

오늘 작업한 결과물 레이이아웃, 컴포넌트, 베리언트, 프로토타이핑 적용한 클론 디자인 2주차 지나고 나서 새롭게 시작될 강의들이 기대된다

더보기 오늘은 피그마 집중하는 날!! 컴포넌트 만들어서 클론 디자인 적용해보는데 아직 손에 안 익어서 좀 더디다. 그래도 꽤 재밌다! 도움 받은 피그마 강의 1. 베리언트 https://youtu.be/PW7nV3L8vCg?si=PyUlUJtEx4IIAiRw 베리언트 2. 프로토타입 https://youtu.be/t5G87A3t2CM?si=ybMciBE2_okkb9KT