[내일배움캠프] Day 16 - 피그마 인터렉션

---

 

[수업 목표]

• 프로토타이핑을 통해 디자인에 활용할 수 있는 피그마 인터랙션을 만들 수 있어요
• 실제 서비스들의 인터랙션을 피그마에서 유사하게 구현해보며 원리를 이해할 수 있어요

---

🔹 1. 컴포넌트 인터렉션이란?

컴포넌트(요소)들이 서로 상호작용하는 방식

 프로토타이핑 도구(Figma, Adobe XD, ProtoPie 등)에서는 사용자 행동에 따라 버튼, 탭, 토글 같은 UI 요소가 반응하도록 설정할 수 있음

 

📌 활용 예시

• ✅ 버튼 클릭 시 → 팝업 창 열기 또는 페이지 이동
• ✅ 탭 전환 → 다른 콘텐츠 표시
• ✅ 토글 스위치 → 다크모드 On/Off 전환

💡 Tip: 컴포넌트를 재사용 가능한 형태로 만들어 두면 인터렉션 설정을 반복하지 않아도 됨, 유지보수가 쉬워지고 디자인 작업이 훨씬 효율적

 

🔹 2. 오버레이 프로토타입이란?

현재 화면 위에 새로운 콘텐츠를 레이어 형태로 표시하는 기능

기존 페이지를 바꾸지 않고 모달 창, 툴팁, 드롭다운 메뉴처럼 부가 정보를 직관적으로 보여줄 때 유용

 

📌 활용 예시

• ✅ 로그인 모달 창 → 로그인 폼이 오버레이로 표시
• ✅ 이미지 확대 보기 → 큰 이미지 뷰어 제공
• ✅ 툴팁 안내 → 특정 요소에 마우스를 올리면 설명 표시

🌟 오버레이 프로토타입의 장점

• 맥락 유지: 사용자가 다른 페이지로 이동할 필요가 없음
• 간결한 인터페이스: 화면이 깔끔하고 직관적

 

🔹 3. 드래그 프로토타입이란?

사용자의 드래그 동작을 시뮬레이션하는 기능

손가락이나 마우스로 화면 속 요소를 끌어서 이동하거나 특정 동작을 실행할 때 사용

 

📌 활용 예시

• ✅ 슬라이더 조작 → 볼륨 또는 밝기 조절
• ✅ 카드 정렬 → Trello 스타일의 카드 드래그 앤 드롭
• ✅ 갤러리 이미지 슬라이드 → 좌우 드래그로 이미지 전환

🔑 드래그 인터렉션이 효과적인 경우

• 사용자 자유도가 중요한 경우 (예: 파일 정리, 맞춤형 UI)
• 직관적 조작 방식이 필요한 경우 (예: 슬라이더, 드롭다운)

 

🎁 정리: 좋은 프로토타입의 핵심은 인터렉션!

컴포넌트 인터렉션, 오버레이 프로토타입, 드래그 프로토타입은 프로토타입의 디테일을 높여 사용자 경험을 개선하는 강력한 도구임

적절히 조합하고 상황에 맞게 활용하면 훨씬 더 생동감 있고 몰입도 높은 인터페이스를 만들 수 있음

 

---

📝 숙제 : 인터랙션 프로토타입 만들기 (진행중)

✔️ 아래 프로토타입을 만들어 주세요.

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

접었다 펼다 할 수 있는 리스트를 어코디언이라고 불러요. 접을 수 있기 때문에 폴더블(foldable)이나 콜랩서블(collapsible)이라고 부르는 경우도 있어요.

접었을 때와 펴졌을 때를 각각 디자인한 후, 컴포넌트 배리언츠의 인터랙션으로 묶어서 스마트 애니메이트로 연결해 주세요.

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

버튼 외의 다른 UI는 화면 캡처로 대체하거나 와이어프레임으로 해주셔도 괜찮아요. 완벽하게 디자인을 동일하게 하는 건 어렵기 때문에, 인터랙션의 형태나 과정이 최대한 유사하도록 노력해 보세요.

힌트

💡 버튼을 누르고 있으면 배경색이 연해지고, 손을 떼면 아이콘만 있는 버튼으로 모양이 변하면서 보조 메뉴가 열려요.

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

드래그만 구현하고 다른 UI는 화면 캡처로 대체하거나 와이어프레임으로 해주셔도 괜찮아요. 완벽하게 디자인을 동일하게 하는 건 어렵기 때문에, 인터랙션의 형태나 과정이 최대한 유사하도록 노력해 보세요.

바텀 탭과 FAB는 만들지 않으셔도 돼요

힌트

3주차 숙제를 더 발전시켜 보세요

💡 메인 화면에서 핸들을 드래그하면 살짝 올라오고, 한번 더 드래그하면 배경이 어두워지면서 바텀시트가 완전히 다 올라와요

작업 중인 과제 캡쳐해봄

 

---

 

컴포넌트 배치만 하면 되는데 목이랑 어깨가 너무 아프다 거북목 4기 인듯 😩

3주차 과제랑 이어져서 참 다행인 듯

나머지 과제도 얼른 해야지...

클론 디자인 무서운 놈...