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의 시작점이 다름
이유는 간단했습니다:
→ 메뉴들의 시작점이 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가 못한 것
구조적 사고
"왜 정렬이 안 맞는가?" 본질 파악 실패
인과관계 추적 능력 부족
시각적 디버깅
브라우저로 실제 렌더링 확인 불가
너비와 위치의 실제 값 파악 어려움
패턴 인식
AI가 잘한 것
구현 속도
구조만 제시하면 즉시 코드 작성
Tailwind 클래스 정확하게 사용
코드 품질
접근성(aria 속성) 유지
반응형 고려 (w-full, flex 등)
TypeScript 타입 안정성 유지
반복 작업
교훈: AI와 함께 일하는 법
1. AI는 CSS 속성 전문가, 구조 설계자는 아니다
// ❌ AI에게 이렇게 요청하면
"정렬 맞춰줘"
// ✅ 이렇게 요청하라
"양쪽 200px 고정하고, 중앙은 flex-1로 정렬하는 구조로 만들어줘"
2. 문제의 본질은 사람이 파악하라
AI에게 맡길 것
사람이 할 것
3. 구조를 명확히 제시하라
[A영역: 고정폭] [B영역: 가변폭] [C영역: 고정폭]
이렇게 구조를 먼저 설계하고 AI에게 구현을 맡기면 효율적입니다.
결론
AI 코딩 어시스턴트는 강력하지만 만능은 아닙니다.
AI의 역할: 빠르고 정확한 코드 작성
사람의 역할: 구조 설계와 문제 본질 파악
둘의 협업이 효과적인 결과를 만듭니다.
이번 경험을 통해 배운 것
레이아웃 문제는 구조로 해결한다
CSS 속성 조정은 증상 치료일 뿐이다
AI는 도구이지 설계자가 아니다
AI와 함께 작업하다가 막힌다면, 한 걸음 물러나서 구조를 다시 생각해보면 좋은 문제 해결을 이끌어낼 수 있습니다.
부록: 레이아웃 정렬 체크리스트
비슷한 문제가 생기면 확인해볼 5가지
[ ] 각 영역의 너비가 명확히 정의되어 있는가?
[ ] 정렬되어야 할 요소들이 같은 시작점을 갖는가?
[ ] 모든 계층에서 동일한 구조 패턴을 사용하는가?
[ ] 양쪽 끝을 고정폭으로 만들었는가?
[ ] 중앙 영역에 flex-1 + justify-center를 사용했는가?
기술 스택: React 19, TypeScript 5, Tailwind CSS 4, Vite 6
AI 도구: Claude Sonnet (Cursor IDE)
날짜: 2025년 11월
