[Week 5] 학습일지 (2)
🏡 5주차 TO DO LIST 🏡
📄 과제: 그룹 프로젝트
☑︎ 유저 리서치 결과
☑︎ 선택한 앱의 AS-IS
☑︎ 벤치마킹한 서비스 - 인당 3개 이상의 서비스를 벤치마킹
☑︎ 퍼소나(2개)
☑︎ 고객 여정 지도
☑︎ 4)번의 퍼소나와 5)번의 고객 여정 지도를 통해 현재 서비스를 보았을 때 해결해야 할 문제를 정의
📹 강의: UIUX 디자인 툴(Adobe XD)
☑︎ Chapter 8. 컴포넌트 가이드라인 실습
☑︎ Chapter 9. 쇼핑몰 실무 실습
□ Chapter 10. 공유와 협업
📹 강의: UI 디자인 기초 강의
□ Chapter 1. 디자인 기초(1-1~1-5)
□ Chapter 1. 디자인 기초(1-5~1-10)
□ Chapter 2. 인터페이스 디자인 기초
📚 레퍼런스
☑︎ 5주차 레퍼런스 분석
기어코 밀렸습니다.. 거두절미하고 얼른 작성해봅시다 🤣
다행히 미리 작성했던 학습일지가 임시저장 되어있어서
과거의 내가 쓴 일지에 덧붙여서 적어보려고 한다..!
📝 학습일지
📍 9-1 스플래시
- 스플래시: 로딩 페이지와 헷갈릴 수 있지만, 로딩페이지는 데이터의 로딩 화면을 보여주는 것이고 스플래시 스크린은 앱의 브랜드를 사용자에게 노출하는 것
🌟 아이콘들을 화면 밖으로 내보내서 중간에 만나는 인터랙션을 만들고자 할 때, 아이콘들을 아트보드에 1픽셀이라도 걸쳐놔야 해당 아트보드의 요소임을 알 수 있음!
🌟 프로토타입 연결할 때, "시간" 트리거는 아트보드와 아트보드 연결 시에만 사용할 수 있음!
📍 9-2 회원가입
https://fonts.google.com/icons
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
fonts.google.com
- 햄버거 도형 같은 선 도형을 만들 때, 1px 사각형 도형을 사용해야 하는 이유는 선을 이용해서 도형을 만들면 크기를 키울 때 선 굵기 변동 없이 크기만 커지는데 1px 도형을 이용해서 만든 햄버거 메뉴는 도형의 크기가 커짐에 따라 굵기도 같이 굵어져서 다양한 크기에 적용이 가능하다.
📍 9-3 튜토리얼
LottieFiles: Download Free lightweight animations for website & apps.
Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship Lottie animations in no time!
lottiefiles.com
- 에어비앤비에서 개발한 오픈소스 모바일 라이브러리(.Json)
- 벡터 형식으로 제공, 확대 축소 용이 및 낮은 용량
📍 9-4 메인페이지 |
- 아이콘들의 경우 48x48 크기의 투명 가이드를 만들어서 아이콘 위치 조정에 용이하도록 한다.
📍 9-5 메인페이지 ||
- 프로토타입 설정 시, ☑︎ 스크롤 위치 유지 해야 스크롤 할 때 위치가 고정된다.
- 플로우 이름 설정 (Intro~Membership~Main 등) 이유: 플로우가 많아질 때를 대비하여 각 파트를 끊어서 구분하기 위함