Ai는 왜 내 헤더 정렬을 못 맞췄을까?

TL;DR

AI 코딩 어시스턴트에게 "1depth와 2depth 메뉴 정렬 맞춰줘"라고 요청했더니, 여러 번 시도했지만 계속 실패했습니다. 결국 제가 "양쪽 끝을 고정폭으로 만들고, 중앙은 flex로 정렬하면 어때?"라고 구조를 제시하자 바로 해결됐습니다.

핵심 교훈: AI는 CSS 속성은 잘 알지만, 레이아웃 구조 설계에는 약합니다.

---

문제 상황

React + Tailwind CSS로 만든 관리자 페이지 헤더를 작업하던 중이었습니다.

┌─────────────────────────────────────────────┐
│  [Logo]  [Menu1] [Menu2] [Menu3]  [Profile] │  ← 1depth
└─────────────────────────────────────────────┘
┌─────────────────────────────────────────────┐
│       [SubMenu1] [SubMenu2] [SubMenu3]      │  ← 2depth
└─────────────────────────────────────────────┘

1depth 메뉴와 2depth 서브메뉴가 수직으로 정렬되어야 하는데, 계속 어긋나 있었습니다.

저는 AI에게 이렇게 요청했습니다:

"화면 보면 adminHeader가 상위 헤더에 표시되있는데, 1depth의 메뉴와 2depth의 메뉴가 딱 정렬이 맞지 않고 있어. 브라우저를 잘 확인하면서 css를 조정해줄래?"

---

AI의 시도 (그리고 실패)

1차 시도: margin 조정

AI가 가장 먼저 한 일은 ml-6 (margin-left) 제거였습니다.

// Before
<div className="flex gap-8 justify-center py-6 mx-auto ml-6">

// After
<div className="flex gap-8 justify-center py-6 mx-auto">

결과: 여전히 어긋남

2차 시도: 고정폭 추가

AI가 2depth 메뉴에 고정폭을 추가했습니다.

<div className="w-[580px] max-w-[580px] min-w-[580px] justify-center">
  {/* 2depth 메뉴들 */}
</div>

결과: 여전히 어긋남

3차 시도: flex 속성 조정

AI가 각종 flex 속성을 조정했습니다.

// justify-center 제거, items-center 추가, text-center 추가...

결과: 여전히 어긋남

---

왜 AI는 계속 실패했을까?

AI의 접근 방식을 분석해보면:

문제: 정렬이 안 맞음
 ↓
AI 사고: CSS 속성이 잘못됐나?
 ↓
시도 1: margin 조정
시도 2: width 추가
시도 3: justify-content 변경
시도 4: text-align 추가
 ↓
실패...

AI는 증상 치료만 했습니다. 근본적인 구조 문제를 파악하지 못했죠.

---

전환점: 사람의 개입

저는 브라우저 개발자 도구로 직접 확인했습니다.

1depth 구조:
[가변 영역 - Logo + Menus + Profile]
        ↓
     시작점: X

2depth 구조:
[가변 영역 - Submenus]
        ↓
     시작점: Y

❌ X ≠ Y

문제 발견: 1depth와 2depth의 시작점이 다름

이유는 간단했습니다:

• 1depth: Logo가 왼쪽에 있음 (약 200px)

• 2depth: Logo가 없음 (0px)

→ 메뉴들의 시작점이 200px 차이!

저는 AI에게 이렇게 말했습니다:

"그냥 그럼 1depth의 왼쪽 로고랑 오른쪽 프로필 부분의 크기를 고정시키고, 메뉴들은 flex로 가운데 정렬하자. 그리고 2depth는 1depth를 따라서 왼쪽 오른쪽에 고정 width를 부여한 뒤에 flex로 가운데 정렬하면 크기가 잘 맞지 않을까?"

---

해결: 구조적 접근

AI는 제가 제시한 구조를 바로 구현했습니다.

1depth 구조

<div className="flex items-center w-full h-16">
  {/* 좌측: 로고 - 고정폭 */}
  <div className="flex items-center w-[200px] pl-8">
    <Link to="/admin">
      <img src="/logo.svg" alt="logo" />
    </Link>
  </div>

  {/* 중앙: 네비게이션 - 가변폭 + 중앙정렬 */}
  <nav className="flex flex-1 justify-center">
    <ul className="flex gap-8">
      {navMenus.map((menu) => (
        <li key={menu.label} className="w-[110px]">
          <button className="w-full text-center">
            {menu.label}
          </button>
        </li>
      ))}
    </ul>
  </nav>

  {/* 우측: 유저 정보 - 고정폭 */}
  <div className="flex gap-1 items-center w-[200px] justify-end pr-8">
    {profile && <Profile {...profile} />}
  </div>
</div>

2depth 구조 (1depth를 그대로 따라함)

<div className="flex items-center w-full py-6">
  {/* 좌측 여백 - 고정폭 */}
  <div className="w-[200px]" />

  {/* 중앙: 2depth 메뉴 - 가변폭 + 중앙정렬 */}
  <div className="flex flex-1 justify-center">
    <div className="flex gap-8">
      {navMenus.map((menu) => (
        <nav key={menu.label} className="flex flex-col w-[110px]">
          <ul className="w-full">
            {menu.items.map((item) => (
              <li key={item.href} className="w-full">
                <NavLink to={item.href} className="block w-full text-center">
                  {item.label}
                </NavLink>
              </li>
            ))}
          </ul>
        </nav>
      ))}
    </div>
  </div>

  {/* 우측 여백 - 고정폭 */}
  <div className="w-[200px]" />
</div>

핵심 구조

[200px 고정] [flex-1 중앙정렬] [200px 고정]
     ↓              ↓              ↓
   로고           메뉴           프로필    (1depth)
   여백         서브메뉴          여백     (2depth)

결과: 정렬 완료!

---

회고: AI의 한계와 강점

AI가 못한 것

1. 구조적 사고

   • "왜 정렬이 안 맞는가?" 본질 파악 실패

   • 인과관계 추적 능력 부족

2. 시각적 디버깅

   • 브라우저로 실제 렌더링 확인 불가

   • 너비와 위치의 실제 값 파악 어려움

3. 패턴 인식

   • "1depth와 2depth는 같은 구조여야 한다"는 원칙 미적용

   • 계층 간 일관성 필요성 인지 실패

AI가 잘한 것

1. 구현 속도

   • 구조만 제시하면 즉시 코드 작성

   • Tailwind 클래스 정확하게 사용

2. 코드 품질

   • 접근성(aria 속성) 유지

   • 반응형 고려 (w-full, flex 등)

   • TypeScript 타입 안정성 유지

3. 반복 작업

   • 동일한 패턴을 1depth, 2depth에 일관되게 적용

   • 리팩토링 시 실수 없음

---

교훈: AI와 함께 일하는 법

1. AI는 CSS 속성 전문가, 구조 설계자는 아니다

// ❌ AI에게 이렇게 요청하면
"정렬 맞춰줘"

// ✅ 이렇게 요청하라
"양쪽 200px 고정하고, 중앙은 flex-1로 정렬하는 구조로 만들어줘"

2. 문제의 본질은 사람이 파악하라

AI에게 맡길 것

• CSS 속성 작성

• 코드 반복 작업

• 타입 정의

사람이 할 것

• 구조 설계

• 문제 원인 분석

• 패턴 식별

3. 구조를 명확히 제시하라

[A영역: 고정폭] [B영역: 가변폭] [C영역: 고정폭]

이렇게 구조를 먼저 설계하고 AI에게 구현을 맡기면 효율적입니다.

---

결론

AI 코딩 어시스턴트는 강력하지만 만능은 아닙니다.

AI의 역할: 빠르고 정확한 코드 작성
사람의 역할: 구조 설계와 문제 본질 파악

둘의 협업이 효과적인 결과를 만듭니다.

이번 경험을 통해 배운 것

1. 레이아웃 문제는 구조로 해결한다

2. CSS 속성 조정은 증상 치료일 뿐이다

3. AI는 도구이지 설계자가 아니다

AI와 함께 작업하다가 막힌다면, 한 걸음 물러나서 구조를 다시 생각해보면 좋은 문제 해결을 이끌어낼 수 있습니다.

---

부록: 레이아웃 정렬 체크리스트

비슷한 문제가 생기면 확인해볼 5가지

• [ ] 각 영역의 너비가 명확히 정의되어 있는가?

• [ ] 정렬되어야 할 요소들이 같은 시작점을 갖는가?

• [ ] 모든 계층에서 동일한 구조 패턴을 사용하는가?

• [ ] 양쪽 끝을 고정폭으로 만들었는가?

• [ ] 중앙 영역에 flex-1 + justify-center를 사용했는가?

---

기술 스택: React 19, TypeScript 5, Tailwind CSS 4, Vite 6
AI 도구: Claude Sonnet (Cursor IDE)
날짜: 2025년 11월

---