(Lenny's Newsletter) AI 크롬 확장 프로그램 만드는 방법: 25분에 접근성 도구 개발하기

# AI 크롬 확장 프로그램 개발 완벽 가이드: 접근성 도구를 25분에 만드는 방법

## 핵심 요약

- **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>

키보드 단축키의 효율성

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

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

// 확장 프로그램에서 키보드 명령 감지
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 활용

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

<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: 실시간 개발 및 디버깅

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

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

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

---

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

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

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

실시간 이미지 분석

// 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단계 (2024년 현재, 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단계: 피드백 루프 단축

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

// 좋은 방식: 구체적인 문제 지적
"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 - 실시간 피드백 및 반복

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

// 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
    }); // ✅ 안전
  }
});

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

// 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 - 최종 최적화 및 배포 준비

// 성능 최적화 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

---

> Original source: [How this visually impaired engineer uses Claude Code to make his life more accessible | Joe McCormick](https://www.lennysnewsletter.com/p/how-this-visually-impaired-engineer)
>
> powered by [osmu.app](https://osmu.app)