피그마의 원 도형 하나로 진행률 링을 만들 수 있습니다. Arc를 조절해 75% 학습 카드를 만들고, 숫자와 도형이 맞는지 확인해보겠습니다.
1. 이번에는 75% 학습 카드를 만듭니다
강의를 4개 중 3개 들었다면 학습률은 3 ÷ 4 × 100 = 75%입니다. 이를 원의 4분의 3만 채운 링으로 표현해보겠습니다. 피그마에서는 원을 그린 뒤 Arc를 조절하면 원호와 링을 만들 수 있습니다.
완성할 카드는 320 × 320px입니다. 위에는 이번 주 학습률, 가운데에는 75%, 아래에는 목표 4강 중 3강 완료를 넣습니다. 예상 실습 시간은 약 20분입니다.
실습 시작 파일을 자신의 초안에 복사해 사용하거나, 빈 파일에서 아래 순서대로 만들어보세요. 파일을 수정하려면 편집 권한이 필요하며 Arc는 모든 플랜에서 제공됩니다. Figma 공식 도움말
Figma
Created with Figma
www.figma.com
이번 예제는 화면 디자인 실습입니다. 가운데 숫자가 바뀐다고 원호가 자동으로 바뀌지는 않습니다. 마지막에 두 값을 함께 확인하겠습니다.
2. 카드 안에 160px 원 그리기
- 프레임 도구로 카드를 만들고 W 320 / H 320을 입력합니다. 배경은 흰색으로 지정합니다.
- 카드 안에 링을 담을 프레임을 하나 더 만들고 이름을 Ring으로 바꿉니다. 크기는 W 160 / H 160, 카드 안의 위치는 X 80 / Y 72입니다.
- Ellipse 도구로 Ring 안에 원을 그립니다. 선택한 도형이 사각형이 아닌 원인지 확인하세요.
- 원의 크기는 W 160 / H 160, 위치는 X 0 / Y 0으로 맞춥니다. Ring을 꽉 채우는 원이 됩니다.
- Fill을 #2563EB로 지정합니다. 레이어 이름은 Progress로 바꿉니다.
X와 Y는 바로 위 부모 프레임 기준의 위치입니다. Ring은 카드 기준으로 X 80 / Y 72에 있고, Progress는 Ring 기준으로 X 0 / Y 0에 있습니다. 오른쪽 패널에 X 0이 보여도 잘못된 값이 아닙니다. 시작 파일에 카드와 Ring 프레임이 이미 있다면 1·2번은 건너뛰고 원 그리기부터 따라 하세요.
3. Arc의 Start·Sweep·Ratio 입력하기
Progress 원에 마우스를 올리면 원의 오른쪽에 Arc 조절점이 나타납니다. 조절점을 살짝 드래그해 원에 틈을 만들면 오른쪽 패널의 Appearance 영역에 Arc 입력란 3칸이 생깁니다. 왼쪽부터 Start, Sweep, Ratio입니다. 드래그로 대충 맞추지 말고 이 입력란에 값을 넣으세요.
| 설정 | 무엇을 바꾸나요? | 이번 값 |
|---|---|---|
| Start | 시작 위치(각도) | -90° (위쪽) |
| Sweep | 원을 채울 비율 | 75% |
| Ratio | 가운데 구멍 크기 | 80% |
Start에 -90, Sweep에 75, Ratio에 80을 차례로 입력하고 Enter로 확정합니다. Start 0°는 원의 오른쪽(3시 방향)이므로, 위쪽(12시 방향)에서 시작하려면 -90°를 넣습니다. 위쪽에서 시작해 시계 방향으로 오른쪽과 아래쪽을 지나 왼쪽까지 이어지는 링인지 확인하세요. 비어 있는 25% 구간은 왼쪽 위에 남습니다.
진행률은 Sweep으로 정합니다. Ratio를 크게 하면 가운데 구멍이 커져 링이 얇아집니다. 외경 160px·Ratio 80%이면 링 두께는 16px입니다.
4. 배경 링을 깔고 75% 숫자 넣기
같은 위치에 배경 링 만들기
- 지금 만든 Progress를 복제합니다. 복제본 이름을 Track으로 바꿉니다.
- Track의 크기 160 × 160, Ring 안의 위치 X 0 / Y 0, Start -90°, Ratio 80%를 유지합니다.
- Track의 Sweep을 100%로 바꾸고 Fill을 #E2E8F0로 지정합니다.
- 레이어 목록에서 Track을 Progress 아래로 옮깁니다. 파란 진행 링이 회색 배경 링 위에 보여야 합니다.
가운데 숫자와 설명 맞추기
Ring 안에서 텍스트 도구로 75%를 입력합니다. 글꼴은 Noto Sans KR Bold 40px, 줄 높이 56, 색상 #0F172A, 정렬은 가운데로 맞춥니다. 텍스트 상자는 W 160 / H 56, 위치는 X 0 / Y 52입니다. (160 − 56) ÷ 2 = 52라서 링의 정중앙에 놓입니다. 위쪽 제목은 18px, 아래 설명은 14px·#475569로 입력하세요.
링과 숫자의 중심이 어긋나면 숫자의 X·Y만 다시 확인합니다. 배경 링과 진행 링의 X·Y·W·H는 서로 같아야 합니다.
5. 25·50·75%를 비교해보기
완성한 카드를 복제해 두 장을 더 만듭니다. 각 카드에서 Progress만 선택하고 Sweep을 25%·50%·75%로 다르게 입력하세요. 세 카드의 Start와 Ratio, 배경 링은 같은 값으로 유지합니다.
숫자도 25%·50%·75%로 바꾸고 설명을 각각 목표 4강 중 1강 완료, 목표 4강 중 2강 완료, 목표 4강 중 3강 완료로 맞춥니다.
75%를 넣었는데 너무 얇아졌어요
Sweep 대신 Ratio를 고쳤을 수 있습니다. 두께를 정하는 Ratio는 80%로 되돌리고, 채운 비율은 Sweep에서 조절하세요.
파란 링이 보이지 않아요
Track이 Progress 위에 있으면 파란색을 가립니다. 레이어 순서를 확인하고 Track을 아래로 옮겨주세요.
링 두 개의 가장자리가 어긋나요?
Track과 Progress의 크기와 위치를 같은 값으로 맞춥니다. Ring 안에서 둘 다 160 × 160px, X 0 / Y 0인지 확인하세요. 한쪽만 Ring 밖으로 빠져 있으면 좌표 기준이 달라집니다.
숫자는 75%인데 원은 반만 보여요
텍스트와 Sweep은 별도 값입니다. Progress를 다시 선택해 Sweep을 확인한 뒤, 숫자·원호·완료한 강의 수를 함께 맞춥니다.
6. 40% 독서 카드로 복습하기
이번에는 5권 중 2권을 읽은 독서 카드를 만들어보세요. 진행률은 2 ÷ 5 × 100 = 40%입니다.
- 카드 크기: 320 × 320px
- 제목: 이번 달 독서율
- Ring 프레임: 180 × 180px, 카드 안 X 70 / Y 72
- Progress: Ring 안 180 × 180px, X 0 / Y 0, Start -90°, Sweep 40%, Ratio 75%, #0F766E
- Track: 같은 위치·크기, Start -90°, Sweep 100%, Ratio 75%, #E2E8F0
- 가운데 숫자: 40%, 텍스트 상자 W 180 / H 56, X 0 / Y 62
- 설명: 목표 5권 중 2권 완료
Ring 아래 끝이 72 + 180 = 252이므로, 아래 설명은 링과 겹치지 않도록 Y 276 부근으로 내려주세요. Ratio 75%이면 링 두께는 (180 − 135) ÷ 2 = 22.5px입니다.
완료 체크
- Start가 -90°라서 시작점이 위쪽에 있나요?
- Progress와 Track의 위치·크기·Ratio가 같나요?
- 회색 Track이 파란 Progress 아래에 있나요?
- 표시 숫자와 Sweep, 완료 수가 일치하나요?
원 만들기 → Arc 조절 → Sweep으로 진행률 설정 → Ratio로 두께 조절 → 배경 링 추가 → 숫자와 원호 함께 검수.