# 5월, 모두의 안부 — 다온카드 이야기

> 가정의달 5월, 디지털 카드 한 장조차 보내기 어려운 정보접근성 취약자들의 이야기와 함께 웹접근성을 준수한 무료 카드 서비스 다온카드를 소개합니다.

**Published:** 2026-05-08 | **Updated:** 2026-05-08

---


5월은 유독 기념일이 많은 달입니다.

어린이날(5일), 어버이날(8일), 스승의날(15일), 부부의날(21일)... 가정의달이라는 이름이 괜히 붙은 게 아니에요. 이 시기가 되면 꽃집 앞에 카네이션이 쌓이고, 카카오톡엔 정성껏 만든 카드가 돌아다닙니다. 손 글씨 대신 디지털 카드를 보내는 일이 이제는 아주 자연스럽죠.

그런데 한 가지 질문을 드리고 싶어요.

**"5월의 안부는, 정말 모두에게 닿고 있을까요?"**

{{< img src="images/contents/family-month-carnation.jpg" alt="카네이션 꽃다발이 따뜻한 빛 속에 놓인 모습 — 5월 가정의달, 안부를 전하는 계절입니다" caption="사진: <a href='https://unsplash.com/ko/%EC%82%AC%EC%A7%84/%EC%95%84%EB%A6%84%EB%8B%A4%EC%9A%B4-%EB%B6%84%ED%99%8D%EC%83%89-%EC%B9%B4%EB%84%A4%EC%9D%B4%EC%85%98%EC%9D%B4-%EB%B9%9B-%EC%86%8D%EC%97%90%EC%84%9C-%EB%B6%80%EB%93%9C%EB%9F%BD%EA%B2%8C-%ED%94%BC%EC%96%B4%EB%82%A9%EB%8B%88%EB%8B%A4-8OZlGxVIuAE?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Unsplash</a>의 <a href='https://unsplash.com/ko/@markuswinkler?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Markus Winkler</a>" >}}

---

## 카드 한 장을 보내지 못하는 사람들

디지털 카드 서비스는 많습니다. 예쁜 템플릿, 다양한 폰트, 깜찍한 스티커까지. 화면은 정말 아름답습니다. 그런데 그 아름다운 화면을 **볼 수 없거나, 제대로 사용할 수 없는** 분들이 있어요.

### 스크린 리더를 쓰는 시각장애인

시각장애인은 스크린 리더(화면 낭독 프로그램)로 웹을 탐색합니다. 버튼에 이름이 없으면 "버튼"이라고만 읽힙니다. 이미지에 설명이 없으면 "이미지"라고만 읽히고요. (실제로는 버튼, 이미지보다 더 이해할 수 없는 텍스트가 읽히는 경우도 많습니다.)

대부분의 카드 만들기 서비스에서 스크린 리더를 켜보면 이런 소리가 납니다.

> *"버튼. 이미지. 버튼. 버튼. 이미지. 이미지. 버튼."*

어떤 버튼인지, 어떤 이미지인지 알 수 없습니다. 카드를 만들기는커녕 템플릿을 고르는 것조차 어렵습니다.

### 손이 떨리거나 마우스를 쓰기 어려운 분들

파킨슨병, 근육 장애, 고령으로 인한 손 떨림... 이런 분들은 마우스 클릭이나 드래그가 힘들어요. 키보드만으로도 모든 기능을 쓸 수 있어야 합니다. 하지만 대부분의 카드 서비스는 마우스 중심으로 설계되어 있습니다. Tab 키를 눌러도 포커스가 보이지 않거나, 드래그로만 조작할 수 있는 요소들이 많아요. ([키보드 접근성이 왜 중요한지 더 알고 싶다면 이 글을 참고해보세요]({{< relref "keyboard-accessibility-a-to-z" >}}))

### 색을 잘 구별하지 못하는 색각이상

빨간 카네이션 배경 위에 흰 글씨. 보기엔 예쁘지만, 색각이상이 있는 분들에게는 배경과 텍스트가 구별되지 않을 수 있습니다. 색상 대비가 충분하지 않으면 내용을 읽지 못하는 거죠. ([색상 접근성에 대해 자세히 알아보기]({{< relref "color-accessibility" >}}))

### 작은 글씨가 힘든 고령자

디지털 기기에 익숙하지 않은 어르신들에게 복잡한 UI는 그 자체로 장벽입니다. 작은 텍스트, 어디를 눌러야 하는지 모르는 화면 구성, 오류가 났을 때 뭐가 잘못됐는지 알려주지 않는 서비스... 정작 가장 카드를 받고 싶어하는 어버이께, 어르신 자신이 카드를 보내기 어려운 상황이 생깁니다.

카드 한 장을 보내는 작은 행위에서도, **누군가에게는 문이 잠겨 있습니다.**

{{< img src="images/contents/locked-door-barrier.jpg" alt="굳게 닫힌 문 — 카드 한 장을 보내는 행위에서도 누군가에게는 문이 잠겨 있습니다" caption="사진: <a href='https://unsplash.com/ko/%EC%82%AC%EC%A7%84/%EB%B8%94%EB%9E%99-%EC%82%AC%EC%9D%B4%ED%81%B4%EB%A1%A0-%EC%9A%B8%ED%83%80%EB%A6%AC-4TuQPM95MS0?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Unsplash</a>의 <a href='https://unsplash.com/ko/@doctortinieblas?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Doctor Tinieblas</a>" >}}

---

## 그래서 만들었습니다, 다온카드

저는 웹접근성을 연구하고 개선하는 일을 해왔습니다. 매번 접근성 문제를 발견하고, 개선을 요청하고, 직접 개선하는 일을 반복했는데요.

가정의달을 앞두고 카드 서비스를 사용해보다가 문득 이런 생각이 들었어요.

*"그냥 내가 만들면 되겠다."*

*(물론 그 직후에 '어, 생각보다 할 게 많네...'가 바로 뒤따라왔지만요. 개발자라면 공감하실 겁니다.)*

그렇게 탄생한 게 **[다온카드(daoncard.com)](https://www.daoncard.com)**입니다.

'다온'은 순우리말로 **"좋은 것이 모두 오다"**라는 의미입니다. 이름처럼, 따뜻한 안부가 모든 사람에게 닿을 수 있기를 바라는 마음을 담았어요.

무료로 사용할 수 있고, 별도의 회원가입도 필요하지 않습니다. (원한다면, 구글 계정을 통한 회원 로그인을 하면 본인의 카드를 관리할 수 있는 기능도 있습니다.)

{{< img src="images/contents/warm-greeting-card.jpg" alt="손으로 직접 작성한 편지지의 모습 — 다온카드는 손편지처럼 마음을 담아 전하는 서비스입니다" caption="사진: <a href='https://unsplash.com/ko/%EC%82%AC%EC%A7%84/%EC%BB%A4%ED%94%BC-%ED%95%9C-%EC%9E%94-%EC%98%86%EC%97%90-%EC%A2%85%EC%9D%B4%EC%97%90-%EA%B8%80%EC%9D%84-%EC%93%B0%EB%8A%94-%EC%82%AC%EB%9E%8C-Nv-87ynmdHA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Unsplash</a>의 <a href='https://unsplash.com/ko/@kellysikkema?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Kelly Sikkema</a>" >}}

---

## 다온카드는 이렇게 구성되어 있어요

### 7가지 템플릿

가정의달에 어울리는 템플릿을 미리 준비해 두었습니다.

| 템플릿 | 기념일 |
|--------|--------|
| 어버이날 🌹 | 5월 8일 |
| 어린이날 🎈 | 5월 5일 |
| 스승의날 📚 | 5월 15일 |
| 부부의날 💑 | 5월 21일 |
| 가정의날 🏡 | 5월 전체 |
| 생일 🎂 | 언제든 |
| 기본 💌 | 자유롭게 |

### 이미지를 고르는 3가지 방법

1. **직접 업로드** — 가족사진이나 추억 사진을 올려보세요
2. **기본 이미지 선택** — 템플릿별로 준비된 일러스트 중에서 고르세요
3. **텍스트만** — 이미지 없이, 글로만 마음을 전해도 충분합니다

### 다양한 공유 방법

카드가 완성되면 여러 방법으로 보낼 수 있어요.

- **카카오톡** 공유
- **이메일** 발송
- **링크 복사** (문자, 메신저 등에 붙여넣기)
- **Web Share** (스마트폰에서 바로 공유 시트 열기)

---

## 기술 스펙 & 시스템 구조

기술적인 내용에 관심 있는 분들을 위해 간략히 정리해 봤어요.

### 기술 스택

| 역할 | 기술 |
|------|------|
| 프레임워크 | Next.js 14 (App Router) + TypeScript |
| UI | Tailwind CSS + shadcn/ui |
| 데이터베이스 | Supabase (PostgreSQL + 이미지 스토리지) |
| 서비스 관리 | Upstash Redis |
| 배포 | Vercel |

전체 서비스를 무료 티어만으로 운영하는 구조예요. Supabase, Upstash, Vercel 모두 무료 플랜으로 충분히 커버됩니다.
사이드 프로젝트이지만, 그래도 만약 쓰임이 많아져서 유료로 전환해야한다면 더 좋을것 같긴 합니다.

### 시스템 아키텍처

{{< mermaid >}}
flowchart LR
    User(["👤 사용자"])

    subgraph Client["클라이언트"]
        Editor["카드 편집기\n/create"]
        Viewer["카드 뷰어\n/card/id"]
    end

    subgraph Vercel["Next.js API (Vercel)"]
        API_Cards["POST /api/cards\n카드 생성"]
        API_Send["POST /api/send\n이메일 발송"]
    end

    subgraph External["외부 서비스"]
        Supabase[("Supabase\nDB + 스토리지")]
        Upstash[("Upstash\nRedis")]
    end

    User --> Editor
    User --> Viewer
    Editor --> API_Cards
    API_Cards --> Upstash
    API_Cards --> Supabase
    Viewer --> Supabase
    Editor --> API_Send
    API_Send --> Supabase
{{< /mermaid >}}

### 카드 만들기 내부 동작

사용자가 카드를 만들고 공유하기까지 내부에서 어떤 일이 일어나는지 흐름으로 표현했어요.

{{< mermaid >}}
sequenceDiagram
    actor U as 사용자
    participant E as 카드 편집기
    participant A as API 서버
    participant R as Rate Limiter
    participant DB as Supabase

    U->>E: 템플릿 선택 + 내용 작성
    U->>E: 사진 업로드 (선택)
    Note over E: 브라우저에서 WebP 압축
    E->>A: POST /api/cards
    A->>R: 내부 프로세스 진행
    R-->>A: 허용 (내부 프로세스 검증)
    A->>DB: 카드 저장 + 이미지 업로드
    DB-->>A: 고유 slug 반환
    A-->>E: 카드 링크 생성 완료
    E-->>U: 공유 패널 표시
{{< /mermaid >}}

이미지를 업로드하면 서버로 전송되기 전에 **브라우저에서 먼저 WebP로 압축**됩니다. 용량은 줄이고 속도는 빠르게 하기 위한 처리예요. 카드 데이터는 Supabase에 저장되고, 고유한 slug(예: `abc123`)가 붙은 링크가 만들어집니다. 이 링크를 아는 사람이면 누구든 카드를 열어볼 수 있어요.

---

## 접근성, 어떻게 구현했냐고요?

**그런데, 접근성을 곁들인..**

{{< img src="images/contents/chef-a11y-daoncard.png" alt="셰프 캐릭터 일러스트 - 카드 서비스에 접근성을 곁들이는 모습" caption="네, 접근성이요." >}}

다온카드는 WCAG 2.2 AA 기준을 준수합니다. 실제 구현 내용을 사용자 관점에서 설명해 드릴게요.

### 키보드만으로 모든 기능을 쓸 수 있어요

마우스 없이 Tab 키, 화살표 키, Enter, Space만으로 카드 만들기의 처음부터 끝까지 이동할 수 있습니다. 어디에 포커스가 있는지 항상 2px 이상의 외곽선으로 표시해요.

### 스크린 리더에서도 제대로 동작합니다

모든 버튼과 입력 필드에 명확한 이름이 있습니다. 이미지 선택 영역은 라디오 그룹으로 구성되어 있어 스크린 리더가 "3개 중 1번 선택됨"처럼 정확하게 안내합니다. 링크 복사 버튼을 누르면 "링크가 복사되었습니다"를 스크린 리더가 바로 읽어줘요.

### 본문 바로가기(Skip Navigation)

페이지 상단에 스크린 리더와 키보드 사용자를 위한 '본문 바로가기' 링크가 있습니다. 반복되는 메뉴를 건너뛰고 바로 카드 편집 화면으로 이동할 수 있어요.

### 실시간 색상 대비 검사

카드 텍스트 색상과 배경색을 고를 때, 그 조합의 대비율을 실시간으로 보여줍니다. WCAG 기준(4.5:1)을 충족하는지 바로 확인할 수 있어서, 의도치 않게 읽기 어려운 카드를 만드는 상황을 방지할 수 있어요.

### 이미지에 alt 텍스트 입력

카드에 사진을 올리면, 그 이미지를 설명하는 텍스트를 입력하도록 안내합니다. 카드를 받는 분이 스크린 리더를 사용하더라도, 사진에 어떤 내용이 담겼는지 알 수 있도록요.

### 다크모드 및 고대비 모드 지원

빛에 민감하거나 저시력인 분들을 위해 다크모드 및 고대비 모드를 제공합니다. 우측 상단 버튼으로 언제든 전환할 수 있어요.
그리고 위에서 설정한 폰트 색상을 매칭해서 모드 변경시에도 명도대비를 준수하도록 설계했습니다.

---

## 카드 만들기, 이렇게 하면 돼요

총 3단계면 충분합니다.

**1단계 — 템플릿 선택**

[daoncard.com](https://www.daoncard.com)에 접속해 카드 만들기를 누르면 7가지 템플릿이 나옵니다. 보내려는 기념일에 맞는 템플릿을 골라보세요.

**2단계 — 내용 입력**

제목과 메시지를 입력합니다. 이미지를 올리거나 기본 이미지를 선택하고, 글꼴 크기와 색상도 조정할 수 있어요. 발신자 이름을 적어두면 카드 하단에 "From. 홍길동"처럼 표시됩니다.

**3단계 — 공유**

카드가 완성되면 고유 링크가 생성됩니다. 카카오톡으로 바로 보내거나, 링크를 복사해 문자로 전달하면 돼요. 로그인 없이, 무료로.

{{< img src="images/contents/sharing-card-smartphone.jpg" alt="스마트폰으로 메시지를 보내는 손 — 다온카드로 만든 카드를 카카오톡이나 문자로 간편하게 전달할 수 있습니다" caption="사진: <a href='https://unsplash.com/ko/%EC%82%AC%EC%A7%84/%ED%99%94%EB%A9%B4%EC%97%90-%EC%9B%83%EB%8A%94-%EC%96%BC%EA%B5%B4%EC%9D%B4%EC%9E%88%EB%8A%94-%ED%9C%B4%EB%8C%80%ED%8F%B0-BICGzegcfWs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>Unsplash</a>의 <a href='https://unsplash.com/ko/@mariyan_rajesh?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText'>mariyan rajesh</a>" >}}

---

## 마무리하며

다온카드는 완벽하지 않습니다. 아직 개선할 부분도 많고, 더 다듬어야 할 것도 있어요.

그래도 한 가지는 자신 있게 말씀드릴 수 있습니다. **접근성을 처음부터 핵심 가치로 두고 만들었다는 것.** 나중에 덧붙이거나 숨겨진 기능이 아니라, 서비스의 기본으로 삼았습니다.
웹접근성을 준수하는 제일 좋은 방법은 설계단계에서부터 제대로 시작하는 겁니다.

5월의 안부가 더 많은 분들께 닿기를 바랍니다.

→ **[daoncard.com에서 카드 만들기](https://www.daoncard.com)**

무료로, 마음을 담아.