나만의 앱 만들기
모듈 2 / 4

UI 컴포넌트

10개 챌린지 · ~80

내비게이션, 탭, 모달처럼 앱에 재사용되는 UI 컴포넌트를 만들어 봅니다.

0% 완료0 / 10
쉬움
#7

버튼 그룹

'좋아요 👍', '댓글 💬', '공유 🔗' 세 버튼을 가로로 나란히 배치해 보세요.

쉬움
#8

내비게이션 바

로고와 메뉴가 있는 상단 내비게이션 바를 만들어 보세요. '제품' 메뉴에 마우스를 올리면 하위 메뉴가 나타나요.

쉬움
#9

카드 그리드

이모지와 제목·설명이 있는 카드 4개를 2×2 격자로 배치해 보세요 (📚 학습, 🏆 도전, 📈 성장, 🤝 커뮤니티).

쉬움
#10

가격표 카드

'Pro' 요금제 카드를 만들어 보세요 — 요금 '₩9,900/월', 혜택 3가지 목록, 그리고 '구독하기' 버튼.

쉬움
#11

히어로 섹션

큰 제목 '말로 만드는 웹', 소개 문구, '무료로 시작하기' 버튼, 그리고 큰 이모지 🎨가 있는 히어로 섹션을 만들어 보세요.

쉬움
#12

좋아요 버튼

하트 버튼을 만들고, 누를 때마다 좋아요 숫자가 1씩 올라가게 해보세요.

보통
#13

탭 전환

'소개', '기능', '후기' 세 개의 탭을 만들고, 탭을 누르면 아래 내용이 바뀌게 해보세요.

보통
#14

FAQ 아코디언

자주 묻는 질문 3개를 만들고, 질문을 누르면 답변이 펼쳐지게 해보세요.

보통
#15

모달 창

'열기' 버튼을 누르면 어두운 배경과 함께 팝업 창이 뜨고, '닫기'나 바깥을 누르면 사라지는 모달을 만들어 보세요.

보통
#16

토글 스위치

'알림 OFF' 상태의 스위치를 만들고, 누르면 'ON'으로 바뀌며 색과 손잡이 위치가 변하게 해보세요.