조 맥코믹과 함께 배우는 Claude Code로 AI 기반 크롬 확장 프로그램 구축 방법. 접근성을 고려한 개인 소프트웨어 개발 완벽 가이드.
# 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: 개발자 모드 활성화
- 크롬 브라우저 열기
chrome://extensions/주소창에 입력- 우상단의 "개발자 모드" 토글 켜기
- "압축되지 않은 확장 프로그램 로드" 버튼 표시됨
단계 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년 소프트웨어 개발의 현주소를 명확히 보여줍니다.
핵심 메시지
장애는 혁신의 기회다: 조의 시력 상실은 그를 더 강한 개발자로 만들었고, 그의 경험은 수백만 사용자를 도울 수 있는 기술을 만들었습니다.
AI는 민주화 도구다: Claude Code, Claude Vision 같은 도구들은 전문가와 초보자의 격차를 좁히고 있습니다. 25분에 완성되는 확장 프로그램은 그 증거입니다.
접근성은 좋은 설계다: 시각 장애인을 위한 기능은 모든 사용자의 경험을 향상시킵니다. 키보드 단축키, 스크린 리더 지원, 높은 대비 모드는 이제 선택이 아닌 표준입니다.
개인이 변화를 만든다: Slack의 이미지 설명, AI 기반 맞춤법 검사기 같은 도구들은 대형 기업에서는 만들지 않았지만, 개인 개발자가 필요에 따라 만들었습니다.
미래는 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)