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

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

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

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

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

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

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

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

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

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

“버튼. 이미지. 버튼. 버튼. 이미지. 이미지. 버튼.”

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

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

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

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

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

작은 글씨가 힘든 고령자

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

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

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

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

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

“그냥 내가 만들면 되겠다.”

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

그렇게 탄생한 게 **다온카드(daoncard.com)**입니다.

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

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

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

7가지 템플릿

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

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

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

다양한 공유 방법

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

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

기술 스펙 & 시스템 구조

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

기술 스택

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

시스템 아키텍처

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

카드 만들기 내부 동작

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

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: 공유 패널 표시

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

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

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

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

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

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

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

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

본문 바로가기(Skip Navigation)

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

실시간 색상 대비 검사

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

이미지에 alt 텍스트 입력

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

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

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

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

총 3단계면 충분합니다.

1단계 — 템플릿 선택

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

2단계 — 내용 입력

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

3단계 — 공유

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

마무리하며

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

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

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

→ daoncard.com에서 카드 만들기

무료로, 마음을 담아.