가장 중요한 한 가지를 유도하라

KRDS CP-145 — 콜투액션(Call to Action)은 항목과 관련된 가장 중요한 행동을 유도하기 위해 사용되고 있다.

0. 들어가며 — 항목마다 ‘다음에 할 일’

이번 265편은 콜투액션(CTA)을 항목과 관련된 가장 중요한 행동을 유도하기 위해 사용하라는 규칙입니다.

구조화 목록의 각 항목에는 행동 버튼이 붙습니다 — 민원 항목엔 ‘신청’, 자료 항목엔 ‘다운로드’, 공고 항목엔 ‘자세히 보기’처럼요. 그런데 한 항목에 버튼을 여러 개 똑같은 무게로 늘어놓으면, 사용자는 ’뭘 눌러야 하지?’ 헷갈리죠. CP-145는 가장 중요한 행동 하나를 콜투액션으로 강조해 사용자를 그리로 이끌라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — CTA = 가장 중요한 행동 유도

CP-145 (컴포넌트 > 구조화 목록) “콜투액션(Call to Action)은 항목과 관련된 가장 중요한 행동을 유도하기 위해 사용되고 있다.”

각 항목의 콜투액션(주요 행동 버튼)은, 그 항목에서 사용자가 할 수 있는 행동 중 가장 중요하고 핵심적인 하나를 강조해 유도하는 데 쓰라는 뜻입니다.

정리: CTA는 항목의 가장 중요한 행동 하나를 강조해 유도하라. 이게 CP-145입니다.

2. 왜 가장 중요한 행동을 유도하나

‘콜투액션(Call to Action, CTA)’은 사용자가 다음에 취하길 바라는 핵심 행동을 유도하는 버튼·링크입니다 — ’신청하기’, ‘다운로드’, ‘예약하기’처럼요. CTA의 핵심은’하나의 명확한 주요 행동’에 있습니다. 여러 선택지를 같은 무게로 늘어놓는 게 아니라, 가장 중요한 한 가지를 도드라지게 해 사용자의 시선과 행동을 그리로 모으죠.

① 결정 부담 감소. 한 항목에 ‘보기’, ‘신청’, ‘공유’, ‘저장’, ‘삭제’ 버튼이 모두 같은 크기·색으로 나열되면 — 사용자는 ‘뭐가 핵심이지? 뭘 먼저 눌러야 하지?’ 하고 망설입니다(선택의 역설). 그런데 가장 중요한 행동(‘신청’) 하나를 CTA로 강조하면 — 사용자는 ’아, 여기선 신청이 핵심이구나’를 즉시 알고 망설임 없이 행동하죠. CTA는 사용자의 결정을 돕는 길잡이입니다.

② 항목 맥락에 맞는 행동. ‘항목과 관련된’이라는 표현이 중요합니다. CTA는 그 항목의 성격에 맞는 핵심 행동이어야 하죠. 민원 신청 목록의 항목이면 ’신청’, 자료실 항목이면 ‘다운로드’, 공고 항목이면 ‘자세히 보기’, 교육 신청 항목이면 ’접수’처럼요. 항목마다 사용자가 정말 하려는 행동이 다르므로, 각 맥락의 ’가장 중요한 행동’을 CTA로 골라야 합니다. 모든 항목에 기계적으로 같은 버튼을 다는 게 아니라, 그 항목에서 사용자 목적에 가장 부합 하는 행동을 강조하죠.

③ 시각적 위계. CTA는 다른 보조 행동들보다 시각적으로 강조됩니다 — 진한 색(브랜드 색) 채운 버튼, 큰 크기, 눈에 띄는 위치 등으로요. 반면 보조 행동들(‘공유’, ‘저장’ 등)은 약하게(외곽선 버튼, 텍스트 링크, 작은 아이콘) 처리하죠. 이 위계로 사용자는 ’주요 행동’과 ’부가 행동’을 시각적으로 구별합니다. 단, 한 항목에 강조된 CTA가 둘 이상이면 위계가 무너지므로 — 보통 항목당 핵심 CTA 하나를 원칙으로 합니다.

④ 행동 유도와 전환. 공공 서비스의 목표는 사용자가 필요한 행동(민원 신청, 자료 활용, 신청 접수 등)을 완료하는 것입니다. CTA가 명확하면 사용자가 그 행동에 더 쉽게·빠르게 도달하죠 — 서비스 이용 완료율이 올라 갑니다. CTA가 묻혀 있으면 사용자가 무엇을 해야 할지 몰라 이탈하기 쉽고요.

이 규칙은 다음 편 CP-146(필요한 기능·행동 버튼 제공)과 짝을 이룹니다 — CP-145가 ‘가장 중요한 행동을 강조’, CP-146이 ’필요한 행동들을 빠짐없이 제공’으로, 함께 항목의 행동 버튼을 잘 설계하게 하죠. 핵심 하나는 강조 하되(145), 필요한 것은 다 갖추라(146)는 균형입니다.

3. 점검 / 개선

무엇을 점검하나

핵심 CTA 존재 — 각 항목에 가장 중요한 행동을 유도하는 CTA가 있는가.

맥락 부합 — CTA가 그 항목 성격(신청/다운로드 등)에 맞는 행동인가.

시각 위계 — CTA가 보조 행동보다 강조되고, 강조된 CTA가 항목당 하나인가.

개선 방향

항목별 사용자 핵심 목적에 맞는 행동을 CTA로 선정·강조(채운 버튼 등).

보조 행동은 약하게(외곽선·텍스트 링크) 처리해 위계 확보.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
기획/UX	항목별 핵심 행동(CTA) 선정
디자이너	CTA 시각 위계·강조 스타일 정의

기관 유형	CP-145 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (행동 버튼이 있는 구조화 목록 사용 시)

항목에 행동 버튼이 붙는 목록(민원·자료실·신청 등)을 가진 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 항목에 가장 중요한 행동을 유도하는 CTA가 있나요?

□ CTA가 그 항목 성격에 맞는 행동인가요?

□ CTA가 보조 행동보다 강조되고, 강조된 CTA가 항목당 하나인가요?

❓ FAQ

Q1. 콜투액션이 뭔가요? 사용자가 다음에 취하길 바라는 핵심 행동을 유도하는 버튼·링크입니다 — ‘신청하기’, ‘다운로드’ 등. Q2. 행동이 여러 개면 다 강조하면 안 되나요? 여럿을 같은 무게로 강조하면 사용자가 헷갈립니다. 가장 중요한 하나를 CTA로, 나머지는 약하게 둡니다. Q3. 항목마다 CTA가 달라도 되나요? 네. 항목 성격에 맞는 핵심 행동을 골라야 합니다 — 자료는 다운로드, 민원은 신청처럼.

6. 마무리

CP-145의 메시지:

가장 중요한 한 가지를 유도하라 — CTA는 항목의 핵심 행동을 강조한다.

콜투액션은 사용자가 다음에 할 핵심 행동을 유도하는 버튼입니다. 항목 맥락에 맞는 가장 중요한 행동 하나를 강조 하면, 사용자가 망설임 없이 행동하고 서비스 이용을 완료하죠. 보조 행동은 약하게 둬 위계를 만듭니다. 다음 편은 필요한 기능·행동 버튼의 제공입니다.

다음 편 예고 ▶ 「266. (CP-146) 사용자가 필요로 하는 기능과 행동 버튼을 제공하고 있다.」

ViewCheck는 구조화 목록 항목의 CTA가 핵심 행동을 유도하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 구조화 목록(Structured list) 가이드 — https://www.krds.go.kr/html/site/component/component_12.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준