2025_1_9 목요일
📝 Lastday I Did
화요일에는 UX집중반에서의 우리팀이 맡은 '카카오 페이'에 대한 정의한 문제를솔루션 단계로 넘어와서 연결성을 확인하고 아이디어를 발산하는 시간을 가졌다.
어제 수요일은 감기로 인해 학습을 진행하지 못했다😷
💫 Today I Did
→ 아이콘 제작하는 방법과 글래스모피즘과 글래스모피즘의 아이콘제작하는 UI스터디를 진행했고
UX집중반은 드디어 솔루션과정을 모두 마무리 했다.🙆♂️
👩💻 UI Study
아이콘 만들기
아이콘을 제작할때의 프레임은 보통 24px*24px로 제작되고, 그리드는 1px그리드를 사용한다.
Keyline은 형태에 따라 정사각형, 원형, 직사각형(가로,세로)로 나뉜다.
Keyline과 그리드를 통해 만들 아이콘이다!
Union과 펜툴을 사용하여 제작했다
글래스모피즘 Glass(유리) + Morphism(형태)
유리의 특성을 사용하는 스타일
오브젝트에 반투명하거나 투명한 느낌을 줘서 유리에 비친 것처럼 만드는 디자인 스타일
시각적 깊이와 입체감을 추가 하기 위해서 반투명, 블러, 노이즈 등을 넣어서 레이어를 겹겹이 쌓인 형태
오늘 실습으로 만들어본 글래스모피즘 아이콘이다.
블러효과와 그라디언트를 주로 사용하고, 투명도를 조절하여 투명한 느낌을 주려 했다.
글래스모피즘이 확실히 예쁜 것도 있지만, 시각적으로 깊이가 느껴져서
나의 나만의 느낌이지만 작은 화면이지만 크게 느껴지는 것 같다!
📊 UX집중반
이전 문제정의 파트에서 우리팀이 정의한 문제는
" 카카오 페이 앱과 카카오톡에서 제공하는 카카오 페이 서비스와 차별점이 없어,
사용자는 카카오 페이 앱 설치의 필요성을 느끼지 못한다. "
그리고 지난번 발산했던 아이디어 중 가장 핵심기능인 간편결제를 택 했고,
우선순위 기준으로 가장 순위가 높은 '간편결제 플로우 개선하기'를 선택했다!
그리고 선택한 솔루션의 구체적인 목표를 지정했다
솔루션을 와이어프레임으로 만들었다
(화면을 캡쳐한 이미지를 재활용(?)하여 만들었다)
각각 라이트모드와 다크모드로 나누어 제작했다
그리고 솔루션이 '간편결제 플로우 개선하기' 였기 때문에 As is - To be 플로우를 비교했다.
그리고 최종적으로 우리의 솔루션이 어떤 기대효과를 가지고 올지로 마무리했다!
이로써 3주간의 '카카오 페이'앱의 UX집중반 과정이 마무리됬고,
다음주 UX집중반에서는 투표를 통해 우수케이스를 선발하고, 선발된 우수케이스 팀은 발표를 준비해야한다🥹
(사실 우리팀은 우수케이스에 선정되지 않길 바라고 있다....발표준비까지는 너무 힘들기 때무네...🥲)
⭐️ 느낀점
오늘은 유튜브를 통해 아이콘을 만드는 법과 글래스 모피즘을 배웠다. 너무 재밌었다....
개발을 하다가 UI를 하니 너무 재미있어 죽겠고 천국에 있는 것 같았다.. 나는 코딩보다는 디자인사람인 것 같다
내일도 이렇게 유튜브를 통해 UI관련 영상을 찾아보고,
피그마에 있는 머테리얼 가이드 에셋을 쪼개서 네이밍과 구조를 클로닝을 통해 파악해 볼 예정이다!
집중반은 드디어 3주간의 개고생이 드디어 끝이 났다...
아주 크게 느낀점은 역시 대기업은 대기업이구나...였다.. 내가 감히 건드릴 수 없는... 완벽함...
3주간 정말 힘들었고, 매순간 순간 눈앞에 벽이 있는 느낌이였다.
그래도 정말 대단하다고 느낀건 포기하지않았고, 결국 또 해냈다는 것이다...!
그것도 꽤나 만족스럽게 해냈다 ㅠㅜ🥹
정말 우리 집중반 팀원들이 너무 고생많았고, 그 만큼 좋은 결과를 만들어내서 너무 뿌듯하다!!
(하지만 우수케이스로 선정되서 또 발표준비를 해야하는 일은 없길 바란다...🥲)
'[내배캠] 프로덕트 디자인 트랙 > [내배캠] TIL : Today I Learned' 카테고리의 다른 글
[TIL] D+59 / 최종프로젝트 - 아이디어 발산 (0) | 2025.01.13 |
---|---|
[TIL] D+58 / UI스터디-버튼, 네비게이션 바 클로닝 / UX집중반-솔루션(피드백) (2) | 2025.01.10 |
[TIL] D+55 / UX집중반 - 솔루션(아이디어 발산) (1) | 2025.01.07 |
[TIL] D+54 / React입문 / React - state, 컴포넌트 및 랜더링, DOM과 Virtual DOM (0) | 2025.01.06 |
[TIL] D+53 / React입문 / React - 프로젝트, 컴포넌트와 JSX, props (4) | 2025.01.03 |