💡 20. 다형성(Polymorphism)과 접근성(a11y)

🎯 이 섹션을 읽고 나면:

• 사내 공통 Button 컴포넌트가 왜 어떨 때는 링크(<a>)로 변신해야 하는지 유연성의 본질을 깨닫는다.
• as prop과 Radix UI의 Slot 패턴을 사용하여 마법처럼 태그 껍데기를 갈아 끼우는 '다형성' 컴포넌트를 설계할 수 있다.
• 키보드 네비게이션과 스크린 리더(VoiceOver)를 지원하는 aria- 속성의 기본기를 갖춘 배리어프리(Barrier-Free) 프론트엔드 개발자로 거듭난다.

📋 목차

• 🤔 왜 알아야 하는가: '껍데기'의 저주
• 🏗️ 비유로 먼저 이해하기
• 🧩 극의 체득: 유체이탈 다형성 설계하기
  • ✅ 방법 1: as Prop 패턴 (전통의 강자)
  • ✅ 방법 2: Slot (asChild) 패턴 (현대 Radix UI의 대세)
• 👂 빛과 소리: 접근성 (Accessibility, a11y) 챙기기

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 10분 / 핵심 파트: 6분

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 영숙(디자이너): "영철 님! 이번에 만든 [회원가입 완료] 버튼 디자인 너무 에뻐요. 저 디자인 그대로 복사해서, 메인 페이지 하단의 [이벤트 페이지로 이동] 버튼으로도 똑같이 렌더링해주실 수 있죠?"
• 영철(신입): "네! 그야 당연하죠 (자신만만). 어? 근데 [회원가입 완료]는 눌렀을 때 폼을 제출하는 <button>인데... [이동] 버튼은 다른 페이지로 완전히 넘어가는 <a> 태그(Next.js Link)여야 하잖아요? 그럼 디자인은 똑같은데 컴포넌트를 <Button>용, <LinkButton>용 2개로 따로 쪼개야 하나요? CSS 중복이 500줄이 넘어가는데..."
• 영호(리드): "영철 님, 언제까지 껍데기(태그 종류)에 얽매여서 똑같은 디자인의 코드를 복붙하실 건가요. 버튼 컴포넌트에게 카멜레온처럼 변신할 수 있는 변신 물약 (다형성)을 먹입시다! 아, 그리고 스크린 리더기로 접속하시는 시각장애인 유저들을 위해 접근성 (a11y)태그도 좀 박아놓읍시다."

🤔 왜 알아야 하는가: '껍데기'의 저주

모양과 폰트 크기, 호버(Hover) 시 파란색으로 변하는 영롱한 애니메이션까지 벽돌 하나 틀리지 않고 똑같은 100% 동일한 버튼 디자인입니다.
그런데 어떤 놈은 API를 쏘는 type="submit" 버튼이고, 어떤 놈은 구글 창을 여는 href="https://..." 형태의 앵커(A) 태그라고 칩시다.

// ❌ 영철이의 무식한 하드코딩 (디자인 중복의 지옥)
 
// 1번: 폼 제출용 버튼
export function DefaultButton({ children, onClick }) {
  return <button className="super-gorgeous-blue-btn" onClick={onClick}>{children}</button>;
}
 
// 2번: 외부 링크 이동용 버튼
export function LinkButton({ children, href }) {
  // CSS 클래스 오타라도 나면 디자인이 틀어진다!
  return <a className="super-gorgeous-blue-btn" href={href}>{children}</a>;
}

디자인 시스템(Design System)을 구축하는 팀에서 이런 짓을 한다면 당장 짐을 싸야 합니다. 디자인(Style)과 기능(HTML Tag)은 완전히 융합될 수 없는 존재입니다. 우리는 컴포넌트 호스트가 던져주는 지시를 듣고 유체이탈 변형을 하는 다형성(Polymorphism) 버튼을 만들어야 합니다.

🏗️ 비유로 먼저 이해하기

🧒 5살에게 설명한다면?

1. 과거의 뻣뻣한 갑옷 (하드코딩): "이 아름다운 황금 파란색 갑옷은 무조건 '검사(Button)' 전용입니다!" 마법사(Link)가 입으려고 하면 억지로 두 번째 갑옷을 아예 처음부터 다시 철을 두들겨 새로 만들어 줘야 합니다.
2. 다형성의 마법 갑옷 (Polymorphic): 이 황금 파란색 갑옷(CSS 스타일)은 액체괴물처럼 입는 사람의 직업에 맞춰 변형됩니다!
   마법사가 입으면 지팡이 구멍(href)이 나 있는 옷으로 스르륵 변하고, 검사가 입으면 칼꽂이(type="submit")가 달린 버튼으로 변신하죠. 하지만 겉에서 볼 땐 눈부신 파란 황금색 스타일을 완벽하게 똑같이 유지합니다.

🧩 극의 체득: 유체이탈 다형성 설계하기

보통 실무에서는 이 "변신" 지시를 내리기 위해 두 가지 패턴을 주로 사용합니다.

✅ 방법 1: as Prop 패턴 (전통의 강자)

가장 무난하고 널리 알려진 패턴입니다. "너 오늘부터 저 태그(as)로 살아라!" 라고 명시해줍니다.

// 🎯 as를 사용한 다형성 버튼 설계
export function MagicButton({ as: Component = "button", children, ...props }) {
  
  // Component에 "a"가 들어오면 <a> 태그로, "button"이면 <button>으로 렌더링!
  // 심지어 Next.js의 <Link> 컴포넌트를 통째로 넘겨도 받아먹는다!
  return (
    <Component className="super-gorgeous-blue-btn" {...props}>
      {children}
    </Component>
  );
}
 
// ------ 사용하는 쪽 (소비자) ------
function App() {
  return (
    <div>
      {/* 1. 기본은 제출용 <button>으로 렌더링 됨 */}
      <MagicButton type="submit">로그인</MagicButton>
 
      {/* 2. 구글로 날아가는 <a> 태그로 변신! 디자인은 똑같다! */}
      <MagicButton as="a" href="https://google.com">
        구글에서 로그인
      </MagicButton>
 
      {/* 3. 라우팅 최적화를 위해 Next.js Link 태그의 영혼을 덮어씌움! */}
      <MagicButton as={Link} href="/home">
        우리집으로 가자
      </MagicButton>
    </div>
  )
}

이제 우리의 영롱한 파란색 CSS는 지구상에 단 한 번(className="super-gorgeous...")만 선언되고, 수천만 가지의 태그 구실을 다 해냅니다!

✅ 방법 2: Slot (asChild) 패턴 (현대 Radix UI의 대세)

as 패턴은 너무 직관적이고 좋지만 한계가 존재합니다. 타입스크립트의 추론(TypeScript Generic type infer)을 작성하기 위해 코드가 우주 끝까지 더러워집니다. "만약 as가 a 속성이면 반드시 href 속성도 뱉어내라!" 같은 조건을 매기기가 까다롭죠.

그래서 최근 대기업들(Radix, Shadcn UI 등)이 이 한계를 뚫고자 폭발적으로 밀고 있는 패턴이 바로 자식에게 디자인의 권력을 위임하는 Slot (asChild) 패턴입니다.

// 🎯 Slot (asChild) 패턴의 철학
import { Slot } from '@radix-ui/react-slot'; // (원리를 구현한 유명 툴)
 
// 디자인 껍데기만 쥐고 있는 바보 컴포넌트
export function MasterButton({ asChild, children, ...props }) {
  
  // asChild가 켜져있으면? "안녕, 난 자폭할게. 내 파란색 외투랑 이벤트(props)들은 죄다 
  // 내 밑에 들어온 내 자식(children) 놈한테 몽땅 토스해서 덮어씌워줘!"
  const Comp = asChild ? Slot : "button";
 
  return (
    <Comp className="super-gorgeous-blue-btn" {...props}>
      {children}
    </Comp>
  )
}
 
// ------ 사용하는 쪽 (소비자) ------
function App() {
  return (
    <MasterButton asChild>
      <a href="https://google.com">파란 구글버튼</a> 
      {/* 결과: Slot이 <a href="..." className="super-gorgeous..." /> 로 병합해 렌더링! */}
    </MasterButton>
  )
}

이 방법의 아름다움: <a> 태그는 자신이 태생부터 갖고 있는 고유의 속성(href)만 책임지고, MasterButton은 디자인 CSS 바르는 것만 책임집니다. 프롭스 구조가 얽히지 않고 깔끔하게 상속되는 기적의 렌더링이 일어납니다.

👂 빛과 소리: 접근성 (Accessibility, a11y) 챙기기

예쁜 다형성 버튼을 빚었다고 시니어급이 되는 게 아닙니다. 이 버튼이 눌릴 수 있는 조건은 당신의 앱에 접속하는 마우스가 고장 난 유저, 혹은 시력이 도저히 안 보여 스크린 리더기(TTS)로 버튼을 듣는 시각장애인들에게도 유효해야 합니다.

이것을 우리는 **a11y (접근성)**이라고 부르며, 현업 디자인 시스템에서 가장 악명 높은 난이도를 자랑합니다.

1. aria- 속성의 지옥: 저 버튼이 단순히 '전송' 글자만 있는 게 아니라면?

// 시각장애인 리더기는 "안내문 열기" 라고 친절하게 읽어준다!
<MagicButton aria-label="안내문 열기" aria-expanded={isOpen} onClick={toggle}>
   🚀 {/* 눈에 띄는 텍스트가 없고 이모지나 아이콘 쪼가리만 박힌 버튼일 때 필수 */}
</MagicButton>

2. Tab 포커스 방어막: 마우스로 못 누르는 사람은 키보드의 Tab과 Enter 키만으로 화면 이곳저곳을 오갑니다. 여기서 만약 저 다형성 버튼이 div나 span 태그로 렌더링 되었다면? (과거엔 흔히 이랬음) 아예 키보드 초점이 잡히지 않고 마우스로만 클릭이 가능한 쓰레기 버튼이 됩니다.

그렇기에 기본적으로 브라우저가 Tab 키 조작을 100% 지원해 주는 네이티브 <button> 요소나 <a> 태그로 변형시켜야만 하는 위 "다형성 패턴"이, 단순히 변태 같은 개발 만족도를 넘어 수백만 유저의 실제 접속 생존을 책임지는 코어가 된 것입니다.

🏁 이번에 배운 내용 총정리

💡 한 줄로 기억하기
"모양(디자인)은 카멜레온처럼 같고 뼈대(태그 기능)는 트랜스포머처럼 조립해야 하는 순간, 당신이 쥘 수 있는 궁극의 검은 바로 'Slot'과 'as'이다."

🐣 영철이의 퇴근 일기

디자인이 똑같은데 속성이 다르다고 버튼 컴포넌트를 두세 개씩 복사본으로 만들던 내 흑역사가 스쳐 지나갔다. as랑 Slot 패턴으로 옷만 예쁘게 입히고 알맹이는 자유자재로 바꾸는 다형성 기법은 진짜 '유체이탈' 그 자체다.

💡 "시각 장애인도, 구글 검색 봇도 속이지 않는 진짜 컴포넌트를 만들자. 껍데기에 집착하지 말고 기능에 맞는 태그로 마음껏 변신(asChild)시켜라!"

단순히 예쁜 게 장땡이 아니라, 접근성(a11y)까지 챙겨야 대기업 수준의 퀄리티가 나온다는 영호 선배의 팩트 폭행이 제일 아프고 시원했다. 이제 div에 onClick 바르는 끔찍한 짓은 내 깃허브에서 영원히 퇴출이다.

📝 마무리 퀴즈

Q1. 당신이 5년 만에 토스, 배민과 같은 초대형 기업의 프론트엔드 공통 컴포넌트(Design System) 개발팀에 합류했습니다. 첫 임무로 Button 컴포넌트를 설계하는데, 기존 팀원 영철이가 만들어둔 코드는 아래와 같습니다. 시니어의 관점에서, 영철이의 코드를 반려시키며 지적해야 할 다형성과 SEO, 접근성(a11y) 측면의 가장 끔찍한 단점을 골라보세요.

function SimpleButton({ title, url }) {
  // 사용자가 url을 넘기면 자바스크립트로 강제로 창을 이동시킨다!
  const pushLink = () => window.location.href = url;
  
  return <div className="btn" onClick={url ? pushLink : undefined}>{title}</div>
}

• A) div 쪼가리를 리액트가 뱉어내는 순간 컴파일 타임에 브라우저가 VDOM 주입을 거부하며 빨간 에러 창을 띄운다.
• B) 이 버튼은 구글 검색 엔진 로봇(Bot)이 파싱할 때 그저 "아무런 이동 기능이 없는 글자 한 줄(div블록)"으로 취급하므로 사이트 간 연결 고리(SEO)가 파괴된다. 또한, 키보드 Tab 키를 누르는 시각/지체 장애인 유저들이 이 버튼에 도달조차 할 수 없고, 엔터 키를 쳐도 아무 일도 벌어지지 않는다.
• C) 이 버튼은 div 태그로 얽매여 있기에 스타일(className="btn")이 밖으로 새어 나가 글로벌 오염을 일으키는 버그를 유발한다.

✅ 정답: B

💡 상세 해설: 만점에 가까운 해설입니다. div에 어거지로 onClick을 바르고 앵커 이동 흉내(자바스크립트 강제 라우팅)를 내는 행위는 프론트엔드 초보자들이 가장 많이 저지르는 최악의 안티 패턴(접근성 파괴)입니다. 이런 끔찍한 사태를 막으려면 검색 봇과 시각장애인 모두가 합법적으로 인식할 수 있는 실제 <a> 태그(다형성)로 완전히 트랜스폼하여 뼈대 자체를 갈아주어야만 합니다.

Q2. 최근의 힙스터급 모던 UI 라이브러리(Radix UI 등)가 제공하는 asChild (혹은 Slot 패턴)가, 과거 1세대 as="a" 방식을 제치고 대기업 메인스트림(주류)으로 등극하게 된 핵심적인 개발 경험(DX)적 이유를 주관식 하나로 비유하거나 묘사해보세요.
✅ 정답 및 주관식 해설:
"과거 as="a" 방식은 부모 컴포넌트가 href나 target="_blank" 같은 자식이 필요한 속성들을 어떻게든 다 전달받아서 대신 짬처리 해가며 복잡한 제네릭 타입 에러와 싸우는 '오지랖의 화신' 구조였습니다. 반면 asChild(Slot) 패턴은, 부모는 그저 멋진 황금색 갑옷 껍데기(디자인 CSS와 공통 이벤트)만 딸랑 던져두고 폭사해버리면, 그 갑옷이 밑의 실제 태그 자식에게 기생수처럼 알아서 찰싹 스며들어 병합 렌더링되는 기적을 발휘하므로 Props 충돌 고민이 원천 소멸하는 궁극의 확장성을 지니기 때문입니다."