# AI 크롬 확장 프로그램 만드는 방법: 25분에 접근성 도구 개발하기

> 2026-02-18 · Lenny Rachitsky · 큐레이션 김태우
> https://challengekim.com/insights/lennysnewsletter-how-this-visually-impaired-engineer-uses-cl-2-ko
> 원문: https://www.lennysnewsletter.com/p/how-this-visually-impaired-engineer

## 핵심 요약

- **Claude Code로 신속한 개발**: 25분 이내에 완전히 작동하는 크롬 확장 프로그램을 AI 지원으로 구축 가능
- **AI 기반 접근성 혁신**: 멀티모달 AI가 시각 장애인 사용자를 위한 개인화된 접근성 솔루션을 현실화
- **실용적인 워크플로우**: Claude Skills와 반복적 개발로 반복적인 작업 자동화 및 인지적 마찰 제거
- **화면 판독기 최적화**: AI 지원 도구를 스크린 리더와 호환성 있게 설계하는 기술적 방법론
- **주류 제품의 한계 극복**: 개인 소프트웨어가 기존 제품이 간과하는 접근성 요구사항을 어떻게 해결하는지 실증
- **AI 민주화의 현재 시점**: 개인 개발자도 강력한 AI 기능을 활용하여 맞춤형 솔루션 개발 가능한 시대 도래

## Claude Code로 25분 안에 크롬 확장 프로그램 구축하기

### AI 기반 빠른 개발의 새로운 시대

전통적으로 **크롬 확장 프로그램 개발**은 복잡한 설정, 매니페스트 파일 관리, 권한 설정 등으로 인해 상당한 학습 곡선이 있었습니다. 하지만 **Claude Code**의 등장으로 이 프로세스는 완전히 변화했습니다.

Claude Code를 사용하면:

- **자연어 명령**으로 전체 확장 프로그램의 구조와 기능 설계 가능
- **실시간 코드 생성**으로 수동 코딩 시간을 90% 이상 단축
- **즉각적인 피드백 루프**로 빌드-테스트-수정 사이클을 분 단위로 완료
- **복잡한 API 통합**을 자동화된 방식으로 구현

조 맥코믹의 시연에서 **링크 요약 확장 프로그램**은 다음 단계로 구축되었습니다:

1. **콘셉트 정의**: 사용자가 링크를 마우스 호버할 때 AI가 자동으로 요약을 표시
2. **Claude Code 프롬프트**: 기능 요구사항과 UI/UX 스펙을 명확히 기술
3. **자동 코드 생성**: manifest.json, content script, background script 등 모든 파일 자동 생성
4. **테스트 및 디버깅**: 크롬 개발자 모드에서 실시간 테스트 및 수정

**25분이라는 시간 제약은 AI가 얼마나 강력한 개발 파트너인지**를 보여주는 증거입니다. 과거에는 기본 설정만 해도 이 시간이 필요했으니까요.

## AI 기반 접근성 도구: 개인 소프트웨어의 혁신

### 주류 제품이 놓친 개별 니즈

대형 소프트웨어 회사들은 **광범위한 사용자층을 위한 일반화된 접근성 기능**을 제공합니다. 하지만 개별 사용자의 **특정하고 구체적인 접근성 요구사항**은 종종 외면받습니다. 이것이 **개인 소프트웨어의 혁신 기회**입니다.

조가 구축한 도구들을 살펴보면:

### 1. Slack용 이미지 설명 크롬 확장 프로그램

문제점: Slack에 업로드된 이미지에 대체 텍스트(alt text)가 없으면 시각 장애인 사용자는 그 내용을 알 수 없습니다.

**AI 솔루션**:

- Claude의 비전 능력을 활용하여 이미지 자동 분석
- 상세한 이미지 설명을 자동으로 생성
- Slack 메시지에 숨겨진 텍스트로 삽입
- 스크린 리더가 자동으로 읽을 수 있도록 ARIA 속성 추가

이것은 **Slack의 공식 접근성 기능**으로도 제공되지 않는 수준의 자동화입니다.

### 2. AI 기반 맞춤법 검사기 확장 프로그램

기존 맞춤법 검사기(예: Grammarly)는 **화면 판독기와의 호환성 문제**를 가지고 있습니다. 특히 실시간 피드백을 제공할 때 스크린 리더가 모든 변화를 정확히 감지하지 못합니다.

**AI 개선안**:

- Claude를 사용한 고급 언어 분석
- 화면 판독기 사용자를 위해 ARIA live regions 최적화
- 키보드 단축키로 모든 기능 접근 가능
- 불필요한 마우스 이동 최소화

### 3. 링크 요약 확장 프로그램

웹 브라우징에서 **링크를 따라가기 전에 그 내용을 알고 싶다**는 요구사항은 시각 장애인뿐만 아니라 모든 사용자에게 도움이 됩니다.

**작동 방식**:

- 사용자가 링크에 마우스 호버 또는 포커스 (접근성!)
- AI가 링크 내용을 자동 분석
- 팝업으로 간단한 요약 표시
- 네트워크 대역폭 절약 (불필요한 클릭 감소)

## Claude Skills로 반복적 개발 가속화하기

### 공통 패턴의 자동화

**Claude Skills**는 **재사용 가능한 AI 워크플로우**를 만드는 기능으로, 여러 크롬 확장 프로그램을 개발하면서 **반복되는 패턴**을 자동화할 수 있게 합니다.

조의 실제 사용 사례:

### 공통 패턴 추출

세 개의 서로 다른 크롬 확장 프로그램(이미지 설명, 맞춤법 검사, 링크 요약)을 만들면서 다음과 같은 **반복 패턴**이 발견됩니다:

1. **매니페스트 구조**: 모든 확장 프로그램이 비슷한 `manifest.json` 필요
2. **권한 관리**: API 권한 선언 및 보안 설정의 반복
3. **Content Script 패턴**: DOM 분석 및 조작의 일반화된 방식
4. **Background Script 로직**: API 호출 및 데이터 처리의 템플릿화

### Claude Skills로 워크플로우 구성

```
Skill 1: "Chrome Extension Manifest Generator"

- 프로젝트명, 기능, 권한을 입력하면 최적화된 manifest.json 생성

Skill 2: "Content Script Template Builder"

- 목표(이미지 분석? 텍스트 변환?)에 따라 content script 자동 생성

Skill 3: "ARIA Accessibility Validator"

- 생성된 코드의 접근성 검증 및 개선 사항 제시

Skill 4: "Chrome Extension Testing Suite"

- 자동 테스트 케이스 생성 및 일반적인 버그 패턴 검사

```

**결과적으로**:

- 첫 번째 확장 프로그램: 25분 (모든 과정 수동)
- 두 번째 확장 프로그램: 15분 (Skills 부분 활용)
- 세 번째 확장 프로그램: 10분 (완전 자동화 워크플로우)

이는 **AI-assisted development의 지수적 효율 증가**를 보여줍니다.

## 화면 판독기 최적화: 접근성의 기술적 구현

### ARIA와 키보드 네비게이션의 중요성

**접근성을 고려한 개발**은 단순히 "장애인도 사용할 수 있게"가 아닙니다. 이는 **기술적으로 정교한 구현**을 요구합니다.

ARIA (Accessible Rich Internet Applications)

ARIA는 **웹 애플리케이션의 의미를 스크린 리더에 전달**하는 표준입니다.

예: 이미지 설명 크롬 확장 프로그램의 경우

```html
<!-- 나쁜 예: 스크린 리더가 이해 불가 -->
<div class="image-description" style="display:none;">
  고양이가 창밖을 보고 있는 이미지
</div>

<!-- 좋은 예: ARIA 활용 -->
<img
  src="cat.jpg"
  alt="고양이가 창밖을 보고 있는 사진"
  aria-describedby="cat-description"
/>
<div id="cat-description" role="tooltip">
  창틀에 앉은 흰색 페르시안 고양이가 정원을 바라보고 있습니다.
</div>
```

### 키보드 단축키의 효율성

시각 장애인 사용자는 **마우스를 사용할 수 없으므로 키보드 네비게이션이 필수**입니다. 하지만 이것은 **모든 사용자의 생산성 향상**에 도움이 됩니다.

조가 설명한 키보드 단축키 전략:

```javascript
// 확장 프로그램에서 키보드 명령 감지
document.addEventListener('keydown', (e) => {
  // Alt + Shift + S: 현재 페이지 요약
  if (e.altKey && e.shiftKey && e.key === 'S') {
    summaryLink();
  }

  // Alt + Shift + D: 이미지 설명 읽기
  if (e.altKey && e.shiftKey && e.key === 'D') {
    readImageDescriptions();
  }

  // Alt + Shift + G: 맞춤법 검사 실행
  if (e.altKey && e.shiftKey && e.key === 'G') {
    runGrammarCheck();
  }
});
```

이러한 **단축키 기반의 워크플로우**는:

- 마우스 이동 시간 제거 (손목터널증후군 예방)
- 작업 흐름 중단 최소화
- 시각 장애인뿐 아니라 **파워 사용자의 생산성도 증가**

### Live Region 활용

동적 콘텐츠 변화를 스크린 리더가 자동으로 감지하도록 설정:

```html
<div aria-live="polite" aria-atomic="true" id="status">
  준비 중...
</div>

<script>
// AI가 이미지 분석을 완료하면
document.getElementById('status').textContent =
  '이미지 분석 완료: 고양이가 창가에 앉아 있습니다.';
  // 스크린 리더가 자동으로 이 변화를 읽음
</script>
```

## 크롬 확장 프로그램 개발자 모드: 실전 가이드

### 로컬 환경에서 테스트하고 배포하기

개발한 확장 프로그램을 실제로 테스트하려면 **크롬의 개발자 모드**를 활용해야 합니다.

### 단계 1: 개발자 모드 활성화

1. 크롬 브라우저 열기
2. `chrome://extensions/` 주소창에 입력
3. 우상단의 "개발자 모드" 토글 켜기
4. "압축되지 않은 확장 프로그램 로드" 버튼 표시됨

### 단계 2: 프로젝트 폴더 로드

```
my-extension/
├── manifest.json        # 확장 프로그램 정의
├── popup.html           # 팝업 UI
├── popup.js             # 팝업 로직
├── content-script.js    # 페이지 내용 조작
├── background.js        # 백그라운드 작업
└── styles.css           # 스타일시트
```

개발자 모드에서 "압축되지 않은 확장 프로그램 로드"를 클릭하고 폴더 선택.

### 단계 3: 실시간 개발 및 디버깅

```javascript
// popup.js에서 디버깅
console.log('확장 프로그램 실행됨');

// 백그라운드 스크립트는 우상단 확장 프로그램 아이콘 > 상세 > 검사 버튼으로 디버그
// Content script는 웹 페이지의 개발자 콘솔(F12)에서 디버그
```

**코드 수정 후 크롬 자동 새로고침**: 확장 프로그램 목록으로 돌아가 원형 새로고침 버튼 클릭.

## 멀티모달 AI가 접근성을 변화시키는 방법

### 시각 정보를 텍스트로 변환하는 AI의 힘

**멀티모달 AI**(이미지, 텍스트, 오디오를 동시에 처리할 수 있는 AI)의 등장은 **시각 장애인 사용자의 디지털 경험을 근본적으로 변화**시키고 있습니다.

### 실시간 이미지 분석

```javascript
// Claude Vision API를 활용한 이미지 설명
async function describeImage(imageUrl) {
  const response = await fetch('API_ENDPOINT', {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${API_KEY}` },
    body: JSON.stringify({
      model: 'claude-3-5-sonnet',
      messages: [{
        role: 'user',
        content: [
          { type: 'image', source: { type: 'url', url: imageUrl } },
          { type: 'text', text: '이 이미지를 자세히 설명해줄 수 있나요?' }
        ]
      }]
    })
  });

  return response.json();
  // 결과: "밝은 회의실에서 세 명의 사람이 화이트보드 앞에 서 있습니다..."
}
```

### 복잡한 데이터 시각화 해석

차트, 그래프, 인포그래픽 같은 **복잡한 시각 데이터**는 전통적인 alt text로 설명하기 어렵습니다. AI는:

- 차트의 트렌드와 주요 수치 자동 추출
- 데이터 관계 설명
- 핵심 통계 강조

**결과**: 시각 장애인 사용자도 **비시각 장애인과 동일한 수준의 정보 접근** 가능

### 실시간 생활 지원

**Meta Ray-Ban 스마트 글래스**와 같은 하드웨어와 결합하면:

- 거리 환경 인식 ("앞에 계단이 5미터 앞에 있습니다")
- 사람 인식 ("친구 John이 왼쪽에 있습니다")
- 텍스트 인식 ("버스 정류장 표지: 100번 버스, 다음 도착 5분")

**이것은 단순한 '접근성'이 아니라 완전히 새로운 경험의 창출**입니다.

## 개인 소프트웨어의 미래: AI 민주화의 시대

### 왜 이제 개인 개발자가 대형 기업과 경쟁할 수 있는가

지난 10년간 소프트웨어 개발의 진입 장벽은 **지수적으로 낮아졌습니다**.

### 기술 진화의 3단계

**1단계 (2010년대 초반)**

- 개인이 앱을 만들려면: 프로그래밍 언어 학습 → 프레임워크 숙달 → 수개월 개발 → 버그 수정
- 결과: 높은 진입 장벽, 전문가만 가능

**2단계 (2010년대 중반\~현재)**

- 오픈소스 라이브러리, Stack Overflow 등장
- 결과: 평균 개발 시간 50% 단축

**3단계 (현재, AI 시대)**

- 자연어 명령으로 전체 앱 구조 자동 생성
- AI가 버그 수정 및 최적화 자동 수행
- 결과: **대학생도 25분에 완성도 높은 도구 개발 가능**

### 개인 소프트웨어의 경제성

대형 회사가 기능을 개발할 수 없는 이유:

| 항목 | 대형 회사 | 개인 개발자 |
|------|---------|----------|
| 최소 개발 규모 | 1백만+ 사용자 대상 | 10명 이상의 특정 사용자 대상 |
| ROI 기준 | 수익성이 명확해야 개발 | 개인 또는 커뮤니티 필요만으로 가능 |
| 의사결정 시간 | 수개월 (위원회 논의) | 수시간 (개인 판단) |
| 개발 시간 | 전담 팀 필요 (수주) | AI 지원으로 수일 |

**결과**: 시각 장애인을 위한 Slack 이미지 설명 도구는 **대형 회사에서는 개발하지 않지만**, **조는 한 명의 개발자로 만들 수 있었습니다**.

### 네트워크 효과의 시작

개인이 만든 도구가 커뮤니티에서 입소문나면:

- 오픈소스로 공개
- 다른 개발자들이 개선
- 플러그인 생태계 형성
- 기업 채용 시스템에 편입

예: Chrome 웹 스토어에는 **30만+ 확장 프로그램이 등록**되어 있으며, 이 중 많은 것이 **1인 개발자의 작품**입니다.

## AI 도구에 익숙해지는 실전 방법

### 학습 곡선을 최소화하는 전략

조가 제시한 실제 조언:

### 1단계: 작은 프로젝트부터 시작

```
Day 1: 간단한 할 일 목록 웹앱 만들기
Day 2: 로컬 날씨 표시 확장 프로그램
Day 3: 웹페이지 다크 모드 토글러
Day 4: 그 전 도구들의 통합 버전

결과: 1주일에 4개 프로젝트 완성, 패턴 이해
```

### 2단계: 프롬프트 엔지니어링 마스터

효과적인 프롬프트의 3가지 요소:

```

1. 명확한 역할 할당

"당신은 숙련된 크롬 확장 프로그램 개발자입니다."

2. 구체적인 요구사항

"이 확장 프로그램은 화면 판독기 사용자를 지원해야 합니다.

- 모든 요소에 ARIA 라벨 추가
- 키보드 네비게이션 완전 지원
- 색상만으로 정보 전달하지 않기"

3. 출력 형식 지정

"코드는 다음 파일들로 생성하세요:

- manifest.json
- content.js
- styles.css

각 파일은 주석으로 설명하세요."
```

### 3단계: 피드백 루프 단축

```javascript
// 나쁜 방식: 전체 코드를 다시 생성하도록 요청
"이 확장 프로그램을 더 좋게 해줄 수 있어?"

// 좋은 방식: 구체적인 문제 지적
"popup.js에서 모달 창이 스크린 리더에서
읽히지 않습니다.
이 부분을 ARIA live region으로 수정해주세요:
[코드 붙여넣기]"
```

## 접근성을 넘어: 보편적 디자인의 가치

### 장애 중심 설계가 모두를 돕는 이유

조의 가장 중요한 통찰 중 하나:

> "접근성 기능은 장애인을 위한 것이 아닙니다.
> 이는 우리 모두를 더 나은 도구를 만드는 데 도움을 줍니다."

### 구체적인 사례

| 기능 | 원래 대상 | 실제 혜택 | 사용률 |
|------|---------|---------|-------|
| 음성 명령 | 운동 장애 사용자 | 운전 중 핸즈프리 조작 | 8,000만 (모바일) |
| 자막 | 청각 장애인 | 시끄러운 카페에서 영상 시청 | 8,500만 |
| 키보드 단축키 | 시각 장애인 | 생산성 증가 (마우스 반복 스트레스 방지) | 업무 사용자 대다수 |
| 높은 대비 모드 | 저시력 사용자 | 햇빛 아래 모바일 사용 | 모든 사용자 |

**결론**: 접근성은 **도덕적 책임이자 동시에 좋은 디자인의 기준**입니다.

## 실제 구축 사례: 링크 요약 도구의 완전 분석

### 콘셉트부터 배포까지 25분의 여정

조의 라이브 데모를 통해 실제 개발 프로세스를 살펴봅시다.

### 00:00-02:00 - 요구사항 정의

```
목표: 링크에 호버할 때 해당 페이지의 자동 요약을 표시

기능:

1. 현재 페이지의 모든 링크 감지
2. 마우스 호버 또는 키보드 포커스 시 감지
3. 링크 대상 URL을 Claude API로 전송
4. 페이지 콘텐츠 요약 받기
5. 팝업으로 요약 표시 (접근성 고려)
6. 성능 최적화 (캐싱)

제약 조건:

- 초기 로딩 시간 < 2초
- 각 요약 생성 < 3초
- API 비용 최소화
- 프라이버시 보호 (모든 처리 로컬)

```

### 02:00-10:00 - 코드 생성 및 테스트

Claude Code를 사용한 프롬프트:

```
"당신은 크롬 확장 프로그램 전문가입니다.

다음 기능의 크롬 확장 프로그램을 만들어주세요:

1. manifest.json - v3 형식
   - host_permissions에 모든 URL 포함
   - background 스크립트 설정

2. content-script.js - 페이지 링크 처리
   - 모든 <a> 태그 감지
   - 마우스 호버 이벤트 리스너
   - Tab 키로도 포커스 가능 (접근성)
   - aria-label 추가로 스크린 리더 지원

3. background.js - API 통신
   - Claude API 호출
   - 응답 캐싱 (URL 기반)

4. popup.html/js - UI
   - 깔끔한 요약 표시
   - 어두운 테마 지원
   - 높은 대비 옵션

전체 코드는 주석으로 설명하세요."
```

**생성된 구조**:

```
link-summarizer/
├── manifest.json (권한, 버전, 설명)
├── content-script.js (500줄, 링크 감지 및 UI)
├── background.js (300줄, API 호출 및 캐싱)
├── popup.html (간단한 UI)
├── popup.js (팝업 로직)
└── styles.css (테마 및 접근성 스타일)
```

### 10:00-20:00 - 실시간 피드백 및 반복

**첫 번째 테스트**: "클릭했는데 요약이 나타나지 않습니다"

```javascript
// Claude 피드백:
// 문제: content-script에서 API 키가 노출됨
// 해결: background.js에서만 API 호출하도록 수정

// 수정 전
document.addEventListener('click', async (e) => {
  if (e.target.tagName === 'A') {
    const url = e.target.href;
    const response = await fetch('API with key...'); // ❌ 위험
  }
});

// 수정 후
document.addEventListener('click', (e) => {
  if (e.target.tagName === 'A') {
    const url = e.target.href;
    chrome.runtime.sendMessage({
      type: 'SUMMARIZE_URL',
      url: url
    }); // ✅ 안전
  }
});
```

**두 번째 테스트**: "스크린 리더가 요약을 읽지 않습니다"

```javascript
// ARIA 추가
const summaryDiv = document.createElement('div');
summaryDiv.setAttribute('role', 'tooltip');
summaryDiv.setAttribute('aria-label', '링크 요약');
summaryDiv.setAttribute('aria-live', 'polite');
summaryDiv.setAttribute('aria-atomic', 'true');
```

### 20:00-25:00 - 최종 최적화 및 배포 준비

```javascript
// 성능 최적화 1: 캐싱
const summaryCache = new Map();

function getSummary(url) {
  if (summaryCache.has(url)) {
    return summaryCache.get(url);
  }
  // API 호출...
}

// 성능 최적화 2: 디바운싱 (연속 요청 방지)
const debounce = (fn, delay) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
};

const debouncedSummarize = debounce((url) => {
  summarizeAndDisplay(url);
}, 300);
```

**최종 결과**: 25분 만에 **완전히 작동하는, 접근성을 고려한, 성능 최적화된** 크롬 확장 프로그램 완성.

## 결론: AI 시대의 소프트웨어 민주화

조 맥코믹의 이야기와 실제 기술 시연은 **2024년 소프트웨어 개발의 현주소**를 명확히 보여줍니다.

### 핵심 메시지

1. **장애는 혁신의 기회다**: 조의 시력 상실은 그를 더 강한 개발자로 만들었고, 그의 경험은 수백만 사용자를 도울 수 있는 기술을 만들었습니다.

2. **AI는 민주화 도구다**: Claude Code, Claude Vision 같은 도구들은 **전문가와 초보자의 격차를 좁히고** 있습니다. 25분에 완성되는 확장 프로그램은 그 증거입니다.

3. **접근성은 좋은 설계다**: 시각 장애인을 위한 기능은 **모든 사용자의 경험을 향상**시킵니다. 키보드 단축키, 스크린 리더 지원, 높은 대비 모드는 이제 **선택이 아닌 표준**입니다.

4. **개인이 변화를 만든다**: Slack의 이미지 설명, AI 기반 맞춤법 검사기 같은 도구들은 **대형 기업에서는 만들지 않았지만**, 개인 개발자가 필요에 따라 만들었습니다.

5. **미래는 AI 협력자 시대다**: 혼자 코딩하는 것이 아니라 **Claude 같은 AI와 협력**하는 개발 방식이 표준이 됩니다.

### 당신이 할 수 있는 것

- 오늘 바로 Claude Code 열기 (https://claude.ai/code)
- 작은 아이디어로 시작하기 (할 일 목록, 색 변환기 등)
- 자신의 문제를 해결하는 도구 만들기
- 커뮤니티와 공유하기

**소프트웨어 개발이 더 이상 소수 전문가의 영역이 아닙니다. AI 시대에는 누구나 도구를 만들 수 있고, 따라서 누구나 세상을 더 나은 방향으로 바꿀 수 있습니다.**

조의 여정이 보여주듯이, 가장 큰 장애물은 **기술이 아니라 시작하는 용기**입니다. 지금이 바로 그 시점입니다.

**참고 자료:**

- Claude Code: https://claude.ai/code
- Chrome 확장 프로그램 개발: https://developer.chrome.com/docs/extensions/
- ARIA 접근성 표준: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
- Claude Skills 가이드: https://www.lennysnewsletter.com/p/claude-skills-explained

---

원문을 바탕으로 AI 가 한국어로 요약·재구성한 글입니다. 인용·수치는 원문 링크에서 확인해 주세요. [원문 링크](https://www.lennysnewsletter.com/p/how-this-visually-impaired-engineer)