UI 컴포넌트
10개 챌린지~80분내비게이션, 탭, 모달처럼 앱에 재사용되는 UI 컴포넌트를 만들어 봅니다.
버튼 그룹
푸른빛이 도는 연한 회색 그라데이션 배경 한가운데에 모서리가 둥글고 그림자가 부드러운 작은 흰색 카드가 하나 떠 있고, 그 안에는 가로로 나란히 놓인 버튼 세 개 말고는 아무것도 없어요. 버튼은 모두 모서리가 둥글고 이모지 하나와 짧은 단어, 숫자가 한 줄로 들어 있는데, 첫 번째 버튼만 보라색 배경에 흰 글씨이고 나머지 두 개는 연한 회색 배경에 옅은 회색 테두리와 진한 회색 글씨예요. 마우스를 올리면 회색 버튼은 배경이 조금 진해지고, 세 버튼 모두 그림자가 생기며 살짝 위로 떠올랐다가 누르는 동안에는 다시 제자리로 내려와요.
카드 그리드
연한 회색 바탕이 화면을 가득 채우고 그 정중앙에 카드 네 장이 2×2 격자로 놓여 있어요. 격자 위나 아래에 큰 제목이나 안내 문구는 없고, 카드 네 장 말고는 아무것도 없어요. 격자 전체의 폭은 화면을 다 채우지 않고 본문 정도로 제한돼 있어서 한 줄에 두 장씩 보이고, 네 장은 크기가 같으며 카드 사이의 가로·세로 간격도 똑같이 여유로워요. 카드는 테두리선 없이 흰 바탕이고 모서리가 큼직하게 둥글며 아래로 옅은 그림자가 퍼져 있고, 안쪽 여백이 넉넉하고 내용은 모두 가운데 정렬이에요. 카드마다 위에서부터 큼직한 이모지 하나, 짧은 한국어 낱말 하나로 된 굵고 진한 제목 한 줄, 그보다 작은 회색 글씨로 적힌 짧은 설명 한 줄이 차례로 들어가요. 공부를 돕는 서비스가 내세우는 네 가지 항목이라 카드마다 이모지와 낱말이 서로 다르고, 버튼이나 링크, 이미지, 입력칸은 하나도 없어요. 마우스를 올린 카드만 부드럽게 살짝 위로 떠오르면서 그림자가 조금 더 짙고 넓게 퍼져요. 색은 회색과 흰색뿐이라 배경은 아주 연한 회색, 카드는 흰색, 제목은 거의 검정, 설명 글씨는 중간 톤 회색이고 그라데이션이나 눈에 띄는 강조색은 쓰지 않아요.
탭 전환
연한 파랑에서 연한 보라로 번지는 그라데이션 배경 한가운데에, 모서리가 둥글고 그림자가 은은한 흰색 카드가 하나 놓인 화면입니다. 카드 맨 위에는 너비가 같은 탭 버튼 세 개가 가로로 나란히 붙어 있고, 그 아래 넉넉한 여백 안에는 짧은 문장 한 줄이 가운데 정렬로 놓여 있습니다. 탭 글자는 회색이지만 지금 선택된 탭 하나만 보라색 글자에 보라색 밑줄로 표시되고, 다른 탭을 누르면 아래 문장이 그 탭의 내용으로 바뀝니다.
FAQ 아코디언
연한 파란빛 그라데이션 배경 한가운데에 폭이 넓지 않은 흰색 카드가 하나 떠 있고, 모서리가 크게 둥글며 아래로 부드러운 그림자가 퍼져 있어요. 카드 맨 위에는 제목보다도 큼직한 이모지 하나와 굵은 제목 한 줄, 그리고 질문을 눌러 보라고 안내하는 회색 문구 한 줄이 위에서부터 가운데 정렬로 놓여요. 그 아래에는 질문 세 개가 세로로 쌓이는데, 선으로 이어 붙인 하나의 목록이 아니라 항목마다 연한 회색 테두리를 두른 둥근 상자로 따로 떨어져 있고 상자 사이에는 일정한 간격이 있어요. 각 상자의 윗줄은 상자 폭을 꽉 채우는 버튼이고, 왼쪽에는 질문 문구가 조금 굵은 글씨로 왼쪽 정렬되며 오른쪽 끝에는 아주 옅은 남보라색 동그라미 안에 진한 남보라색 플러스 기호가 붙어 있어요. 처음에는 세 항목이 모두 접혀 있어서 질문 줄만 보이고 답변은 하나도 보이지 않아요. 질문 줄에 마우스를 올리면 배경이 아주 옅은 회색으로 바뀌고, 누르면 같은 상자 안 질문 바로 아래에 조금 작고 옅은 회색 글씨로 짧은 답변 한 줄이 나타나요. 이때 플러스는 마이너스로 바뀌고 동그라미는 진한 남보라 바탕에 흰 기호로 뒤집히며, 상자 테두리도 연보라로 물들고 은은한 보랏빛 그림자가 생겨요. 다시 누르면 접히고, 항목끼리 서로 영향을 주지 않아서 여러 개를 동시에 열어 둘 수도 있어요.
모달 창
연한 회색 배경 한가운데에 보라색 버튼 하나만 놓여 있고 그 밖에는 아무것도 없습니다. 이 버튼은 모서리가 둥글고 아래로 은은한 보라색 그림자가 깔려 있으며, 마우스를 올리면 더 진한 보라색으로 부드럽게 바뀌고 누르면 살짝 아래로 눌립니다. 버튼을 누르면 화면 전체가 반투명한 검은색으로 어두워지면서 한가운데에 모서리가 둥근 흰색 팝업이 뜹니다. 팝업 안에는 오른쪽 위 구석에 작은 회색 X 버튼이 있고, 그 아래로 가운데 정렬된 굵은 제목 한 줄과 회색 설명 한 줄, 맨 아래에 나란히 놓인 연회색 버튼과 보라색 버튼이 들어 있습니다. 팝업 속 버튼 세 개 중 아무거나 누르거나 바깥의 어두운 배경을 클릭하면 팝업이 닫힙니다.