// After

``` **결과**: 여전히 어긋남 ### 2차 시도: 고정폭 추가 AI가 2depth 메뉴에 고정폭을 추가했습니다. ```tsx

{/* 2depth 메뉴들 */}

``` **결과**: 여전히 어긋남 ### 3차 시도: flex 속성 조정 AI가 각종 flex 속성을 조정했습니다. ```tsx // justify-center 제거, items-center 추가, text-center 추가... ``` **결과**: 여전히 어긋남 --- ## 왜 AI는 계속 실패했을까? AI의 접근 방식을 분석해보면: ```plaintext 문제: 정렬이 안 맞음 ↓ AI 사고: CSS 속성이 잘못됐나? ↓ 시도 1: margin 조정 시도 2: width 추가 시도 3: justify-content 변경 시도 4: text-align 추가 ↓ 실패... ``` AI는 **증상 치료**만 했습니다. 근본적인 구조 문제를 파악하지 못했죠. --- ## 전환점: 사람의 개입 저는 브라우저 개발자 도구로 직접 확인했습니다. ```plaintext 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 구조 ```tsx

{/* 좌측: 로고 - 고정폭 */}

{/* 중앙: 네비게이션 - 가변폭 + 중앙정렬 */} {/* 우측: 유저 정보 - 고정폭 */}

{profile && }

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

{/* 좌측 여백 - 고정폭 */}

{/* 중앙: 2depth 메뉴 - 가변폭 + 중앙정렬 */}

{navMenus.map((menu) => ( ))}

{/* 우측 여백 - 고정폭 */}

``` ### 핵심 구조 ```plaintext [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 속성 전문가, 구조 설계자는 아니다 ```tsx // ❌ AI에게 이렇게 요청하면 "정렬 맞춰줘" // ✅ 이렇게 요청하라 "양쪽 200px 고정하고, 중앙은 flex-1로 정렬하는 구조로 만들어줘" ``` ### 2\. 문제의 본질은 사람이 파악하라 AI에게 맡길 것 * CSS 속성 작성 * 코드 반복 작업 * 타입 정의 사람이 할 것 * 구조 설계 * 문제 원인 분석 * 패턴 식별 ### 3\. 구조를 명확히 제시하라 ```plaintext [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월 ---