UX/UI 부트캠프 15일차 TI

2025.02.12

컴포넌트 인터랙션

오버레이 프로토타입

드래그 프로토타입

---

하루 계획

---

디자인 카타

• 저는 B를 선택했습니다.
• A는 이 앱을 처음 사용해서 기능이 익숙하지 않은 사람에게 쓰기 적합한 방식이라고 생각합니다. 하지만 지금 보이는 앱은 결제와 관련된 앱인 것으로 보이는데, 은행이나, 페이 등은 비슷한 기능을 가진 경우가 많다고 생각합니다. 그래서 이미 비슷한 앱을 사용해본 사용자에게는 일일이 X를 누르는 것이 번거롭게 느껴질 수도 있겠다는 생각을 하였습니다.
• B는 사람들이 이미 비슷한 앱을 많이 사용해본 경우에 사용하기 좋다고 생각했습니다. 간단한 핵심 메시지나 아이콘, 일러스트를 제공하면서 이 앱을 사용하면 어떤 이점이 있는지, 어떤 가치가 있는지 사용자에게 각인시킬 수 있다고 생각합니다. 일일이 X를 누르지 않아도 시작하기 버튼 하나만 누르면 되기에 앱을 시작하기 더 편하다고 생각합니다.

---

3주차 과제

네이버 지도 앱 클론 디자인

아직 클론 디자인 하는게 익숙하지 않아서 오래걸릴 줄 알았는데 1~2시간 만에 완성했다.

---

4주차

1. 컴포넌트 인터랙션

피그마에서 프로토타입을 사용해서 컴포넌트 자체에 시각적 피드백을 구현할 수 있다.

 

버튼을 누르고 있을 때 상태 변형

트리거 - While Pressing

액션 - Change to

 

2. 오버레이 프로토타입

다이얼로그처럼 오버레이 속성을 가진 UI들은 프로토타입에서 오버레이를 활용해 만들 수 있다.

프로토타입 대신 다이얼로그가 보이는 화면 디자인이 자체가 필요한 경우도 있다.

 

다이얼로그

트리거 - On Top

액션 - Open Overlay

Close when clicking outside , Background 체크

 

3. 드래그 프로토타입

드래그하는 방향에 따라 프레임 전환이 발생하는 기능이다.

드래그 방향에 따라 다른 화면이 나오도록 할 수 있다.

이미지 슬라이드나 캐러셀, 회전등의 인터랙션을 만들 때 좋다.

트리거 - On drag

애니메이션 - Push 

 

4주차 과제 - 인터랙션 프로토타입 만들기

과제1. 접었다 폈다 할 수 있는 어코디언을 만들어 주세요.

한 개로 하는 건 어려울 것 같아서 두 개의 화면으로 나눠서 과제를 진행해보았다.

원래라면 저렇게 드롭다운 버튼이면 다른 것들 위에 쌓이도록 하는데

예시로 보여준 자료에서는 드롭다운 버튼을 누르면 다른 리스트들도 아래로 밀려나는 것을 볼 수 있었다.

 

 

과제2. 당근 앱 홈 화면에 있는 글쓰기 버튼의 인터랙션을 프로토타입으로 만들어 주세요.

사실 굳이 글쓰기 버튼을 누르는 화면을 2개 만들 필요는 없었는데 

강의에서 액션 Change to라는 기능이 있는 지 까먹고 만들어버렸다. 😂

그래서 내일 시간이 된다면 수정할 계획이다.

 

과제3. 네이버 지도 앱의 바텀시트 드래그를 프로토타입으로 만들어 주세요.

3주차 때 만들었던 클론 디자인을 가져와서 진행하였다.

첫 번째 화면에서 두 번째 화면으로 갈 때는 문제가 없는데 세 번째 화면에서 좀 부자연스럽게 화면이 이동하였다.

문제가 뭔지 모르겠어서 내일 튜터님에게 물어볼 생각이다.

 

https://www.figma.com/proto/tpmyY9BVaFpS8w6lrGqTgN/Untitled?page-id=25%3A277&node-id=26-215&p=f&viewport=109%2C-1093%2C0.68&t=vSzdibBLoiC05Uq6-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=26%3A215&show-proto-sidebar=1

Figma

---

회고

오늘 하루는 처음 목표로 했던 것보다 더 많이 진행해서 피그마 심화 강의를 과제까지 다 끝낼 수 있었다. 

그래서 여유가 좀 생기는 줄 알았는데 매니저님이 내주신 예제를 주셔서 .. 🥺 그리 여유롭진 못할 것 같다.

심지어 내일 저녁에 새로운 개인 과제도 준다고 하셔서 조금 슬프다..ㅎㅎ

그래도 오늘 하루 열심히 한 것 같아서 뿌듯했고 내일도 열심히 해야겠다는 생각이 들었다.

---

내일 할 일

예제 만들어보기

피그마 강의 복습

튜터님께 질문