2025_1_10 금요일
📝 Lastday I Did
이콘 제작하는 방법과 글래스모피즘과 글래스모피즘의 아이콘제작하는 UI스터디를 진행했고,
UX집중반은 드디어 솔루션과정을 모두 마무리 했다.
💫 Today I Did
→ 피그마에 있는 Material Design Kit의 버튼, 네비게이션 바를 가지고와서 클론닝을 했다.
UX집중반에서는 이번주차 진행한 솔루션에 대해 피드백을 받았다.🙆♂️
👩💻 UI Study
버튼 만들기
우리 팀원분이 가르쳐 주신 방법인데, 피그마에있는 Material Design Kit의 컴포넌트를 가지고와서
뜯어보면서 클로닝하면 구조나 네이밍에 대해 이해할 수 있다고 말씀해주셔서 그방법으로 스터디를 진행했다!
이렇게 에셋에 들어가면 머테리얼 디자인 키트를 선택해서 여러 컴포넌트들을 가지고 올 수 있다!
여러 버튼의 형식들이 있지만 오늘은 Filled, Outlined 스타일을 클로닝 해봤다.
내가 따라서 만들어본 버튼들이다
왼쪽에서부터 Enabled, Hover, Foused, Pressed, Disalbled 상태이고
각각 아이콘이 있는 버전과 없는 버전으로 제작했다.
컴포넌트들이 상태가 있는 경우(버튼이나 입력필드 등)에
Focussed와 Enabled가 어떻게 각각 어떤 상태로 사용되고 구분되는지 잘 모르겠어서 우리 gpt선생님께 물어봤다!
예시 상황 - 태블릿에서 그림 그리기 앱
• Focused (포커스됨):그림 그리기 앱에 여러 도구(붓, 지우개, 색상 선택)가 있어요.지금 붓을 선택했다면, "붓"이 포커스된 상태예요. 그래서 손으로 그리면 붓 도구가 작동해요.만약 지우개를 선택하면, 이제 "지우개"가 포커스된 상태가 되겠죠?
• Enabled (활성화됨):그림 그리기 도구는 "활성화된 상태"여야 사용 가능해요.만약 부모님이 설정에서 "그리기 기능을 잠금" 해놨다면, 아무리 눌러도 작동하지 않아요. 이게 비활성화 상태예요.
이 예시를 보니 정확하게 어떤 구분점을 가지고 있는지 파악할 수 있었다.
이해한 내용을 정리해보자면,
Focussed는 어떤 것을 이미 선택해서 사용할 수 있는 상태가 되었을때의 컴포넌트 상태!
Enabled는 Focussed이전에 컨포넌트를 선택이 가능한 상태를 보여주는 것이다.
즉 Enabled인 상태의 컴포넌트를 선택하면 Focussed 상태가 되는 것이다.
물론 그 과정에서 Hover나 Pressed상태를 거치겠지만,
Enabled → Focussed 순서라는 것!!
Navigation bar
1. 아이콘 만들기
이번에 만들어 볼 네비게이션 바!
그리고 그전에 사용한 아이콘을 만들어 봤다.(Place아이콘은 어제 만들어 둔게 있어서 그걸 사용하기로 하고 나머지 3개만)
2. Navigation item 구조 분석
만들어볼 네비게이션바의 네비게이션 아이템의 구조와 적용된 베리언츠들이다!
Nav item안쪽을 보면 '소문자-소문자' 네이밍을 사용하고 있다.
구조를 보면 Nav item 컴포넌트 구조를 보면 icon-container과 label-text가 있고,
icon-container안에 state-layer안에 아이콘이 있는걸 볼 수 있다.
state-layer은 말그대로 상태값을 적용한 건데 가장 오른쪽에 있는 State(Enabled, Hover, Focussed, Pressed)에 따른 구분을 이 state-layer에 적용한다는 말이다.
Nav-item 컴포넌트의 각 state별로 가지고 왔는데 자세히 보면 색상의 차이가 있는 걸 볼 수 있다.
이런 색상의 차이를 Enable은 디폴트 값이라 state-container에는 적용이 안되어있고,
Hover의 state-container에는 이렇게 들어가 있는 것을 볼 수 있다!
생각도 못했는데 이런 방식으로 state를 표시하는 container를 구분한다면
구조적으로 엄청 정교해지고 그 만큼 큰 프로젝트에 협업 시 아주 용이 할 것 같다!!
Nav-item은 총 2개의 베리언츠(State, Selected)와 4개의 프로퍼티(Label, Label text, Badge, Icon)으로 짜여져있다.
그중 state는 위에 나와있는대로고 Selected와 Badge의 값을 가지고 왔다.
왼쪽은 Material Design kit고 오른쪽은 내가 클로닝한 전체 베리언츠와 프로퍼티!
📊 UX집중반
피드백 내용을 정리해보자면,
문제가 서비스 정체성에 대한 문제라서 아주 어려웠지만 아주 잘 풀었다.
첫 번째 장표에서 어떤 방향을 고민했는지 잘보여진다.
전체적인 서비스 정체성에 대한 문제인 만큼 전체적인 문제일 수 있는데 우선순위가 아주 중요했는데,
우선순위를 잘 좁혀가면서 정했고, 우선순위가 잘 보인다.
그리고 우선순위를 선정하면서 서비스의 목적성에 대한 근거를 개선의 근거로 든 점 좋았다.
하지만 와이어프레임 장표는 타이틀이 플로우라고 되어있어서 수정이 필요하다(이거 우리가 고쳤어야했는데 까먹었다...)
플로우를 As is-To be로 보여주는 것이 확실히 전과의 차이를 구체적으로 볼 수 있어 좋다.
아쉬운 점은 기대효과에서 장표에 있는 내용은 기대효과에 대한 내용보다는 솔루션에 대한 근거이고, 목적 가치에 대한 내용이다.
그래서 기대효과를 장표를 따로 둘 필요없이 전후 플로우를 보여주는 것 자체가 기대효과가 될 수 있을 것같다
그리고 장표가 다소 길어서 포폴에 넣게 되면 장표를 합치고 아이디어 발산 장표는 생략할 필요가 있어보인다.
전체적으로 정말 좋은 평가를 해주셔서 너무 뿌듯하지만,
한편으로는 걱정이 된다..
다음주에 혹시라도 발표를 준비해야 될 까봐...(다음주에는 제발 최종 플젝에만 몰입하고 싶어요 ㅠㅜㅠ)
그래도 우리가 열심히한 만큼 좋은 평가를 받아서 너무나 기분이 좋고,
팀원들에게도 너무 감사하다💕
⭐️ 느낀점
오늘은 머테리얼 디자인 키트를 뜯어보면서 클로닝을 하는게 정말 많이 도움이 된다는 것을 느꼈다.
이 방법을 추천해준 팀원분께 너무 감사할 지경 🥹
오늘은 시간관계상 네비게이션바를 완성하지는 못했지만 아이템을 만들어뒀으니,
주말에 혼자 네비게이션바를 만들어 볼 예정이다.
이 스터디는 앞으로 최종프로젝트가 진행되기 때문에 학습시간에 할 수는 없겠지만,
주말을 이용하여 꾸준히 연습한다면 정말 큰 도움이 될것이라 생각하고 앞으로도 열심히 하쟈~~~
'[내배캠] 프로덕트 디자인 트랙 > [내배캠] TIL : Today I Learned' 카테고리의 다른 글
| [TIL] D+60 / 최종프로젝트(MVP) - 아이디어 발산(2) (0) | 2025.01.14 |
|---|---|
| [TIL] D+59 / 최종프로젝트 - 아이디어 발산 (0) | 2025.01.13 |
| [TIL] D+57 / UI스터디-아이콘 만들기, 글래스모피즘 / UX집중반-솔루션(완료) (0) | 2025.01.09 |
| [TIL] D+55 / UX집중반 - 솔루션(아이디어 발산) (1) | 2025.01.07 |
| [TIL] D+54 / React입문 / React - state, 컴포넌트 및 랜더링, DOM과 Virtual DOM (0) | 2025.01.06 |
