오늘 한 일
- 개인과제 필수과제1 정리(지금 정리중이지만 다짐처럼..)
- 개인과제 필수과제 2 조금 건드려보기
오늘 겪었던 문제점
노가다의 늪..어피니티 다이어그램🤮
인터뷰 내용을 정리하는데 일단 배운 방식(어피니티 다이어그램)으로 정리하다보니 정보를 쪼개고, 그걸 분류하는 노가다(..)를 했는데 이게 맞나 싶긴했다. 그래도 조금씩 정리하면서 왜 이 방법을 쓰는지 알 것 같다. 예전에 인터브랜드랑 사명작업 할때에 한 방법이 어피니티 다이어그램이었구나.. 그때는 적합한 방법이 아니라고 생각했었는데 이번 UT에서는 좋은 해결책인 것 같다
오늘 배운 점
아..오늘 수업들 진짜 대박 좋았다ㅠㅠ
카타도 넘 좋고 특강도 짱..
디자인 카타
디자인 카타 할때마다 다시한번 같이 수업을 듣는 사람들이 정말 똑똑하다는걸 느낀다. 심지어 중간에 질문한 부분이 뒷쪽에 답이 딱..넘 완벽해.. 인상깊었던 것들 몇가지 추려보았다.
터치 제스쳐
터치 제스쳐는 많은 앱을 직접 직관적으로 사용해보며 감각을 익히고, 이것에 대해 정답이 없고 사용자 인지와 경험에 따라 다르기 때문에 정말 자료 찾기가 어려웠을텐데 정리가 정말 잘되었다.
- 틴더: 터치 제스쳐의 혁신적인 앱. 솔직히 너무 유명하고 너무 굉장해서 틴더와 좌/우 스와이프의 좋아요/나빠요가 뒤집혔을 때 사용성에 대해 나쁘다고 정의할 정도
- 인스타그램 좋아요 하트: 두번 터치를 눌렀을 때, 좋아요가 나오고,(리액션을 입력 시)에 터지는 뿅뿅 하트들. 유저 입장에서 기분 좋게 행동을 유도한다
- 사용성이 딱히 정의가 되기 어렵기 때문에, 온보딩 개념으로 Dimmed처리된 화면에 제스쳐를 위한 튜토리얼로 알려주는 경우도 있다.
인디케이터
인디케이터는 정말 중요함. 기다리는 과정에서 유저 이탈이 가장 많이 일어나기 때문
스켈레톤 화면은 요새 많이 활용하는 스타일의 인디케이터다.
- 다른 디자인과 달리, 스켈레톤을 활용 시 사용자는 어떤 것을 보겠다는 예상과 함께 확신을 갖게 된다.
- 스켈레톤도 8~10초 이상 걸리면 에러처럼 느껴지기 때문에, 그 때는 프로그레스 바+UX라이팅을 이용하는 것이 좋음
*12초 이상 걸리면, 남은 시간을 표시해주는 것이 사용자 입장에서는 이탈이 줄어들 수 있음.
AI툴이 많아질건데, 사용자의 선택보다 AI 러닝에 따라 노출되는 서비스가 많아질 경우, 앞으로 점점 스켈레톤, 로딩이 중요해질 것 같다. 이 AI가 나를 위해 어떤 노력을 하고 있는지 사용자는 전혀 알지 못하기 때문. 콘텐츠 리스트, 이커머스 리스트든 이 앱에서 어떤 것을 노출시켜줄지 예상되는데, 앱 내부에서 러닝을 통해 스켈레톤이 사용자 인지가 쉽고 적재적소에 활용하는 것이 좋다.
피그마 활용 특강(유튜브 뮤직을 기준으로)
한번 배우고 싶었던 피그마 활용 기초..나중에 영상도 다운받아서 간직할거다 진짜 짱.. 너무 유용해ㅠㅠ 인상깊었던 몇가지만 간단히 기록한다.
1.개발자 모드
클론 시 개발자 모드에서 스타일에 대한 값을 확인할 수 있다.
개발자모드를 보기 위한 단축키는 다음과 같다
- 맥: [opt] + [cmd] + [i]
- 윈도우: [F12]
- 사이즈를 잴 때에 바운딩박스의 사이즈 기준으로 잡는다
2. 유튜브뮤직을 예시로 한 이유
- 앱/웹에서 동일한 UI를 사용하고 있음
3. 스타일 가이드
- 컴포넌트 구상은 큰단위-> 작은단위로, 컴포넌트 제작은 작은 단위->큰 단위로
- Black/White도 활용한다면 가이드화 시켜야한다
- 투명도도 스타일가이드화한다
- 폰트명에 사이즈(수치)보다는, S/M/L등 사이즈로 기재하는 것이 좋다
- 아이콘은 모양대로 이름을 짓는 것이 좋다
- 아이콘의 사이즈는 Instance로 사용할 때에 조정한다
- 아이콘 컴포넌트 배포 전 체크사항
1)Constraints 스케일(scale)로 체크
2)Flatten Selection으로 뭉쳐줘야 함
3)Outlined해주기 (Stroke)
- 아이콘 시각보정의 경우, MDG안에 간단한 요소들이 들어있어서 그 규정만 지켜도 꽤 적당히 시각보정이 적용된다
3. 바 디자인 시 패딩에 대해
터치영역을 위해 패딩을 주는 것이 좋음
4. 오토레이아웃 vs 컨스트레인츠
- 오토 레이아웃: 부모 요소가 오토레이아웃일 때에, 자식요소는 리사이즈 옵션으로 한다
- 컨스트레인츠: 부모요소가 프레임일 경우에는, 자식 요소를 컨스트레인츠로 한다
5. 토큰이란?
토큰이란, 네이밍한 이 정의값들의 덩어리.
최종적으로는 컴포넌트 토큰이라는 개념이 있어서, 상속을 받아 넘겨 받는다..는 개념으로 봐주면 되겠다