미니 앱
11개 챌린지~90분배운 컴포넌트를 모아 계산기, 타이머, 할 일 같은 작은 앱을 완성합니다.
카운터 앱
옅은 남보라에서 흰빛으로 번지는 그라데이션 배경 한가운데에 모서리가 크게 둥글고 그림자가 넓게 퍼진 흰색 카드가 하나 놓여 있고, 카드 안의 내용은 모두 가운데로 정렬되어 있습니다. 카드 위쪽에는 오늘 마신 물을 센다는 뜻이 담긴 굵은 진회색 제목 한 줄이 있고, 그 바로 아래에 오늘의 목표 잔 수를 알려 주는 아주 흐린 회색 작은 글씨 한 줄이 있습니다. 그 아래에는 카드에서 가장 큰 요소인 남보라색 숫자가 아주 굵고 큼직하게 놓이고, 숫자 바로 뒤에 같은 색·같은 크기로 잔 단위가 붙어 한 덩어리처럼 보이며 값이 바뀔 때도 단위는 그대로 남습니다. 맨 아래에는 버튼 세 개가 한 줄로 나란히 놓입니다. 양쪽 끝은 크기가 같은 둥근 정사각형 버튼으로 큼직한 기호 하나만 흰 글씨로 들어가는데, 왼쪽은 숫자를 하나 줄이는 차분한 회청색 버튼이고 오른쪽은 하나 늘리는 진한 남보라색 버튼이며 둘 다 자기 색과 같은 계열의 은은한 그림자를 깔고 있습니다. 가운데에는 숫자를 0으로 되돌리는 버튼이 끼어 있는데, 양옆 정사각형보다 낮고 가로로 길며 그림자 없이 아주 연한 남보라 바탕에 진한 남보라 글씨로 짧은 단어 하나만 들어갑니다. 세 버튼 모두 테두리가 없고 글씨가 굵으며, 마우스를 올리면 바탕색이 한 단계 진해지고 누르는 동안에는 살짝 아래로 내려가면서 작아졌다가 부드럽게 제자리로 돌아옵니다. 숫자는 0에서 시작하고 아래쪽 한계가 없어 계속 줄이면 음수까지 내려갑니다.
별점 매기기
연한 회색 그라데이션 배경 한가운데에 모서리가 크게 둥글고 그림자가 은은한 흰색 카드가 하나 놓여 있습니다. 카드는 폭이 좁고 안쪽 여백이 넉넉하며, 그 안에는 굵은 제목 한 줄, 가로로 나란히 놓인 큼직한 별 다섯 개, 5점 만점 점수를 보여 주는 글자 한 줄이 위에서 아래로 가운데 정렬되어 있습니다. 별은 처음에 모두 회색 빈 별이고, 별 위에 마우스를 올리면 첫 번째 별부터 그 별까지 노란색 꽉 찬 별로 바뀝니다. 별을 클릭하면 그 점수로 정해지고 아래 점수 글자도 함께 바뀝니다.
오늘 할 일
목표 화면과 똑같은 '오늘 할 일' 체크리스트를 만들어 보세요. 위쪽에는 제목과 날짜, 오른쪽에 '6개 남음' 배지가 있고, 그 아래에는 체크박스가 달린 할 일 6개가 세로로 나열돼요. 할 일을 클릭하면 완료(체크 표시·취소선) 처리되고 오른쪽 위의 남은 개수가 하나 줄어듭니다(다시 누르면 다시 늘어나요).
카페 메뉴판
목표 화면과 똑같은 카페 메뉴판을 만들어 보세요. 메뉴 카드 3개(이름·가격·담기 버튼)와 오른쪽 위의 주문 카운터가 있어야 해요. '담기'를 누르면 주문 수가 1씩 올라갑니다.
계산기
옅은 청회색 배경 한가운데에 굵은 제목 한 줄과 그 아래 작은 회색 안내 문구 한 줄이 가운데 정렬로 놓이고, 그 밑에 폭이 좁고 모서리가 크게 둥근 흰색 카드가 부드러운 그림자와 함께 떠 있습니다. 카드 맨 위에는 짙은 남색 표시창이 둥근 사각형으로 자리 잡는데, 내용이 오른쪽 아래로 붙어 위쪽 줄에는 입력 중인 식이 작은 회색 글씨로 보이고 아래쪽 줄에는 큰 흰색 숫자가 놓이며, 처음에는 위쪽 줄이 비어 있고 아래쪽 줄에 0 하나만 떠 있습니다. 그 아래 키패드는 4열 그리드에 다섯 줄이고, 첫 줄은 두 칸을 차지하는 C 키와 ÷, ×, 다음 세 줄은 왼쪽부터 7·8·9, 4·5·6, 1·2·3이 놓이고 오른쪽 끝 칸에 각각 −, +, =가 오며, 마지막 줄은 0과 소수점이 두 칸씩 나눠 갖습니다. ±나 % 같은 키는 없습니다. 키는 모두 테두리 없이 모서리가 둥근 큼직한 사각형이고 옅은 그림자가 깔려 있습니다. C 키는 연분홍 바탕에 붉은 글씨, 연산자 키는 연한 살구색 바탕에 주황 글씨, = 키는 진한 주황 바탕에 흰 글씨에 주황빛 그림자까지 두르고 혼자 도드라지며, 숫자 키는 아주 연한 회색 바탕에 짙은 남색 글씨입니다. 키를 누르면 위아래 두 줄에 같은 식이 함께 이어 붙고, =를 누르면 위쪽 줄에는 계산한 식이 등호와 함께 남고 아래쪽 줄에 결과만 크게 나타나며, C 키는 다시 0으로 되돌립니다. 키에 마우스를 올리면 색이 조금 진해지고 누르는 순간 살짝 아래로 눌립니다.
이모지 채팅
채팅 화면을 만들어 보세요. 메시지 몇 개가 말풍선으로 보이고, 아래에는 입력창과 이모지(😊) 버튼, '전송' 버튼이 있어요. 전송하면 내 말풍선이 추가돼요.