누르면 바로 걸리고 메일 열리게

KRDS CP-258 — 이메일 주소, 전화번호 정보를 링크로 제공하고 있다.

0. 들어가며 — 전화번호를 일일이 옮겨 적지 않게

이번 378편은 이메일 주소·전화번호 정보를 링크로 제공하라는 규칙입니다.

연락처에 이메일·전화번호가 그냥 텍스트로만 있으면 — 사용자는 그걸 외우거나 복사해 전화 앱·메일 앱에 옮겨야 하죠. 특히 모바일에서 번거롭습니다. CP-258은 이메일·전화번호를 링크(mailto:/tel:)로 만들어, 누르면 바로 메일 작성·전화 걸기로 연결되게 하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 이메일·전화번호 링크 제공

CP-258 (컴포넌트 > 링크) “이메일 주소, 전화번호 정보를 링크로 제공하고 있다.”

이메일 주소는 mailto: 링크로, 전화번호는 tel: 링크로 제공해, 사용자가 누르면 바로 메일 작성·전화 걸기로 연결되게 하라는 뜻입니다.

정리: 이메일·전화번호를 mailto:/tel: 링크로 제공하라. 이게 CP-258입니다.

2. 왜 링크로 제공하나

이메일·전화번호는 — 사용자가 ’연락’이라는 행동으로 이어가는 정보입니다. 이 정보가 그냥 텍스트면, 사용자는 연락하기 위해 추가 작업을 해야 하죠. 링크로 만들면 그 작업이 한 번의 클릭으로 줄어듭니다.

텍스트로만 있을 때의 불편:

전화번호 텍스트 — “02-1234-5678”이 그냥 글자면, 사용자는 — 번호를 외우거나, 복사해서 전화 앱에 붙여 넣거나, 보면서 일일이 눌러야 하죠. 특히 모바일에서 번호를 보며 다이얼을 누르는 건 번거롭고 실수하기 쉽습 니다.

이메일 텍스트 — “minwon@example.go.kr”이 글자면, 복사해서 메일 앱에 옮기고 수신자에 붙여야 하죠.

링크로 만들면:

tel: 링크 — <a href="tel:02-1234-5678">02-1234-5678</a>. 모바일에서 누르면 바로 전화 앱이 그 번호로 열려 통화 버튼만 누르면 되죠. 번호를 옮길 필요가 없습니다. 데스크톱에서도 연결된 전화 앱(Skype 등) 으로 걸 수 있고요.

mailto: 링크 — <a href="mailto:minwon@example.go.kr">minwon@example.go.kr</a>. 누르면 메일 앱이 그 주소를 수신자로 새 메일 작성 창을 열죠. 주소를 옮길 필요가 없습니다.

이렇게 — 사용자가 누르기만 하면 연락 행동으로 바로 이어져, 복사·입력 수고와 실수를 줄입니다. 공공 사이트는 민원·문의 연락처가 많아 이 편의가 특히 유용하죠.

접근성 측면. 이메일·전화 링크는 — 키보드·스크린 리더 사용자에게도 도움이 됩니다. 텍스트 번호를 일일이 입력하기 어려운 운동 장애 사용자, 번호를 외워 옮기기 어려운 인지 장애 사용자에게 — 한 번의 활성화로 연락 앱이 열리는 게 큰 편의죠. 그리고 링크로 만들면 스크린 리더가 ’링크’로 안내해, 연락 가능함을 인지합니다.

구현·주의:

전화번호 형식 — tel: 링크의 href는 번호만(공백·하이픈 허용되나 일관되게). 화면 표시는 읽기 좋게 하이픈 등으로.

국제 형식 고려 — 국가번호(+82) 등을 고려할 수 있죠.

레이블 명확 — 링크 텍스트는 실제 번호·주소를 보여줘 사용자가 확인하게(레이블 명확성 CP-257). 또는 “전화 걸기” 같은 부가 설명을 줄 수도 있고요.

데스크톱 처리 — 데스크톱에서 tel: 링크는 연결된 앱이 없으면 동작이 제한적일 수 있으나, 링크로 두는 것 자체가 모바일·접근성에 이로우므로 제공하는 게 맞습니다. 번호 텍스트도 함께 보여 복사도 가능하게요.

이 규칙은 링크의 ’실용적 연결’을 담당합니다 — 링크가 단지 페이지 이동만이 아니라 연락 행동으로도 이어지게 하죠. 공공 서비스의 연락 편의를 높이는 실무적 규칙입니다.

정리하면 — 이메일·전화번호는 연락 행동으로 이어지는 정보이므로, mailto:/tel: 링크로 제공해 누르면 바로 메일 작성·전화 걸기로 연결되게 해 복사·입력 수고를 줄여야 합니다.

3. 점검 / 개선

무엇을 점검하나

전화 링크 — 전화번호가 tel: 링크로 제공되어 누르면 전화 앱이 열리는가.

이메일 링크 — 이메일이 mailto: 링크로 제공되어 누르면 메일 작성이 열리는가.

레이블 — 링크 텍스트가 실제 번호·주소를 명확히 보여주는가.

개선 방향

전화번호 → <a href="tel:...">, 이메일 → <a href="mailto:...">로 마크업.

번호·주소를 화면에 표시(확인·복사 가능). 형식 일관.

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

역할	책임
퍼블리셔/개발	tel:/mailto: 링크 구현
콘텐츠	연락처 정보 정확성

기관 유형	CP-258 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (연락처 제공 시)

이메일·전화번호를 제공하는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 전화번호가 tel: 링크로 제공되어 누르면 전화 앱이 열리나요?

□ 이메일이 mailto: 링크로 제공되어 누르면 메일 작성이 열리나요?

□ 링크 텍스트가 실제 번호·주소를 명확히 보여주나요?

❓ FAQ

Q1. 그냥 텍스트로 두면 안 되나요? 사용자가 번호·주소를 복사·입력해야 해 번거롭습니다. 링크로 만들면 한 번 눌러 연락으로 이어지죠. Q2. 데스크톱에선 tel:이 안 되지 않나요? 연결 앱이 없으면 제한적이지만, 모바일·접근성에 이롭고 번호 텍스트도 함께 보여 복사 가능하므로 제공이 맞습니다. Q3. 형식은 어떻게 하나요? href는 번호(하이픈 허용), 화면 표시는 읽기 좋게. 국가번호도 고려할 수 있죠.

6. 마무리

CP-258의 메시지:

누르면 바로 걸리고 메일 열리게 — 이메일·전화번호를 mailto:/tel: 링크로 제공하라.

이메일·전화번호는 연락 행동으로 이어지는 정보입니다. 링크로 만들면 누르기만 해도 메일 작성·전화 걸기로 연결 되어 복사·입력 수고와 실수를 줄이죠. 운동·인지 장애 사용자에게도 큰 편의입니다. 다음 편은 외부 서비스 링크 구분입니다.

다음 편 예고 ▶ 「379. (CP-259) 외부 서비스로 이동하는 링크를 분명하게 구분하고 일관된 방식으로 표현하고 있다.」

ViewCheck는 이메일·전화번호가 링크로 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 링크(Link) 가이드 — https://www.krds.go.kr/html/site/component/component_24.html

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

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