AI NEWS

[GeekNews 요약] AI 생성 프론트엔드, 디자인 시스템으로 'AI 티' 없애기

Nedai

운영자

2026.10.14

설명

AI가 생성한 프론트엔드 코드는 종종 일관성 없는 디자인으로 인해 'AI 티'를 내기 쉽습니다. 백엔드 개발자인 이승우는 Slack 연차·근태 관리 앱 VacayBuddy의 웹 화면을 AI로 작성하면서 이러한 문제를 해결하기 위해 디자인 시스템을 먼저 구축하는 방식을 택했습니다. 이 글은 디자인 시스템을 통해 AI 생성 코드의 일관성을 확보하고 'AI 티'를 제거하는 구체적인 방법론을 제시합니다. ### 배경 설명 최근 몇 년간 AI 기술의 발전은 코드 생성 분야에도 큰 영향을 미치고 있습니다. 특히 프론트엔드 개발에서 AI는 생산성 향상을 위한 강력한 도구로 주목받고 있습니다. 하지만 AI가 생성한 코드는 종종 일관성 없는 디자인, 예측 불가능한 스타일 적용 등으로 인해 사용자 경험을 저해하는 'AI 티'를 발생시키곤 합니다. 이는 AI가 개별 페이지 단위로 코드를 생성하며, 페이지 간의 통일된 디자인 기준이 부재하기 때문입니다. 이러한 문제는 웹 애플리케이션의 규모가 커질수록 더욱 두드러지며, 사용자에게 혼란을 주고 브랜드 이미지를 손상시킬 수 있습니다. 과거에도 디자인 시스템의 중요성은 강조되어 왔으나, AI 시대에는 AI 생성 코드의 특성을 고려한 새로운 접근 방식이 요구되고 있습니다. VacayBuddy의 사례는 이러한 산업적 요구에 부응하는 실질적인 해결책을 제시합니다. ### 1. AI가 생성한 화면이 'AI 티'를 내는 이유 AI가 생성한 프론트엔드 코드가 'AI 티'를 내는 근본적인 원인은 AI가 개별 페이지를 독립적으로 생성하기 때문입니다. 예를 들어 '연차 관리 화면을 만들어 줘'와 같은 요청 시, AI는 해당 화면 내에서 완결된 코드를 생성하며 이때 가장 그럴듯한 기본값을 선택합니다. 다른 페이지와의 디자인적 연관성을 고려할 기준이 없기 때문에, 페이지마다 서로 다른 색상, 모서리 둥글기, 버튼 스타일 등이 적용됩니다. 이러한 비일관성이 쌓이면 페이지가 늘어날수록 전체적인 디자인이 뒤죽박죽이 되고, 이는 사용자가 'AI가 만들었다'고 인지하는 주된 요인이 됩니다. 실제 코드 분석 결과, 개편 전 VacayBuddy의 웹 화면에서는 162개의 서로 다른 색상, 65곳의 그라데이션, 206곳의 그림자, 68종의 글자 크기, 43종의 모서리 둥글기, 41종의 버튼 모양 등 과도하게 다양한 스타일이 사용되었습니다. 반면, 디자인 시스템을 구축한 개편 후에는 이러한 수치가 각각 33개, 1곳, 34곳, 4종, 11종, 8종으로 대폭 감소했습니다. 심지어 이미 재사용 가능한 CSS가 존재함에도 불구하고 AI는 즉석에서 새로운 스타일을 생성하는 경향을 보였습니다. 이는 '기준이 있는 것'과 '기준을 반드시 따르게 하는 것'이 다르다는 점을 시사합니다. 기준을 명시해도, 화면이 정상적으로 작동한다면 AI는 편의에 따라 기준을 벗어난 값을 사용할 수 있습니다. ### 2. 디자인 시스템을 먼저 구축하고 모든 화면이 이를 따르도록 하는 방식 이 문제를 해결하기 위해 VacayBuddy는 기존의 '페이지마다 그때그때 만드는' 방식에서 '디자인 시스템을 먼저 만들고 모든 화면이 이를 가져다 쓰는' 방식으로 전환했습니다. 이 새로운 원칙은 '화면 모양의 기준은 디자인 시스템'이라는 점을 명확히 합니다. 첫째, 디자인 시스템 페이지를 먼저 구축하여 색상, 글자 크기, 버튼, 입력창, 표, 모달, 배지 등 UI의 기본 요소들을 한곳에 정의했습니다. 이 페이지에는 각 요소의 이름, 값, 용도가 명확히 기재되어 있으며, 새로운 화면을 만들 때는 반드시 이 디자인 시스템에 정의된 값과 컴포넌트만을 사용하도록 했습니다. 필요한 것이 없다면 화면에서 즉석으로 만들지 않고, 디자인 시스템에 먼저 추가하는 절차를 거칩니다. 둘째, 새로운 컴포넌트가 필요할 경우, 이를 화면에서 바로 만드는 대신 디자인 시스템에 먼저 추가한 후, 화면은 기존 컴포넌트들을 조합하여 구성합니다. 예를 들어, 날짜 카드 컴포넌트가 필요했을 때, 이를 디자인 시스템에 먼저 추가하고 나서 신청 상세 창은 이 날짜 카드와 기존 배지, 타임라인 컴포넌트를 조합하여 완성했습니다. 이를 통해 모든 화면은 동일한 색상, 모서리 둥글기, 글자 크기 등을 공유하게 되어 일관성이 유지됩니다. 셋째, 디자인 시스템에 정의되지 않은 색상, 모서리 둥글기, 그림자 등은 화면에 적용되지 않도록 기술적으로 차단했습니다. AI가 습관적으로 기본값을 사용하려 해도, 해당 스타일이 디자인 시스템에 존재하지 않으면 적용되지 않아 즉각적인 오류로 인지하고 수정할 수 있게 됩니다. 이러한 원칙을 AI가 읽는 규칙 문서에 명시하여 'AI 티' 금지 목록을 포함시켰습니다. ### 3. 전환 과정 및 결과 이러한 디자인 시스템 구축 및 적용 작업은 약 3시간 50분 동안 진행되었으며, 총 3억 8천만 개의 토큰이 사용되었습니다. 작업은 안내 화면과 같이 단순한 페이지부터 시작하여 감사 로그, 전자결재, 팀 휴가 달력, 근태, 연차 관리, 설정 순으로 점진적으로 진행되었습니다. 앞선 페이지에서 구축된 컴포넌트들이 뒤따르는 페이지에서 재사용되면서 작업 속도는 점차 빨라졌습니다. htmx와의 궁합도 좋았습니다. 서버가 HTML을 렌더링하는 구조 덕분에 화면 코드가 단일 템플릿에 집중되어 있어, 코드 이전 작업이 용이했습니다. 페이지별로 분산되어 있던 모달, 알림, 확인창 코드도 공용 코드로 통합되었습니다. 그 결과, 총 2만 4천 줄의 코드를 삭제하고 7천 줄의 코드를 새로 작성하여 전체 코드 양을 1만 줄 이상 줄이는 성과를 거두었습니다. 이는 디자인 시스템을 새로 구축했음에도 불구하고 코드 효율성이 크게 향상되었음을 보여줍니다. ### 4. 검증 및 피드백 반영 디자인 QA는 Playwright와 같은 브라우저 자동화 도구를 활용하여 자동화했습니다. 전환 과정에서 40개 화면을 데스크톱 및 모바일 크기로 띄워 스크린샷을 찍고, 화면 오류, 요청 실패, 가로 스크롤 발생, 디자인 시스템에 없는 색상 적용, 흐린 글자, 단어 분리 등의 문제를 자동으로 감지했습니다. 특히 한국어 환경에서 발생하는 '10일'이 '10 / 일'로 끊기거나 이름이 잘리는 현상과 같은 문제도 자동 검사를 통해 발견했습니다. 하지만 자동 검사로 잡기 어려운 미묘한 문제들도 존재했습니다. 예를 들어 넓은 모니터에서 달력 오른쪽이 비어 보이는 현상, 탭 아래 세로 스크롤바 발생, 휴가 정보가 클릭 가능한 것처럼 보이지 않는 점, 칩 모서리의 어색함 등은 직접 사용해보면서 발견하고 수정해야 했습니다. 따라서 자동화된 검증과 함께 사람이 직접 화면을 사용하며 피드백을 반영하는 과정이 필수적입니다. ### 5. 디자인 시스템 개선을 통한 화면의 동반 성장 이 구조의 가장 큰 장점은 전환 완료 후에도 디자인 시스템을 개선하면 모든 화면이 자동으로 업데이트된다는 점입니다. 예를 들어 '칩(작은 태그) 모서리를 더 둥글게' 수정이 필요할 때, 디자인 시스템의 칩 컴포넌트 하나만 변경하면 이를 사용하는 모든 화면의 칩 모서리가 동시에 업데이트됩니다. 마찬가지로 '넓은 모니터에서 가운데 정렬' 문제는 공통 화면 틀의 '가운데 정렬' 속성 하나만 수정하면 모든 페이지에 적용됩니다. 달력 컴포넌트의 휴가 정보에 마우스 오버 시 손가락 커서가 나타나도록 하는 변경도 달력 컴포넌트 하나만 수정하면 해결됩니다. 만약 각 페이지별로 스타일이 분산되어 있었다면, 수십 개의 파일을 일일이 찾아 수정해야 했을 것이며, 누락될 가능성도 높았을 것입니다. 색감 또한 마찬가지입니다. 디자인 시스템의 색상만 변경하면 전체 화면에 일관되게 반영되므로, 디자이너의 검토 전에도 걱정을 덜 수 있습니다. 즉, 디자인 시스템이 발전하면 화면도 따라서 발전하며, AI스러운 디자인을 방지하기 위한 노력은 바로 이 디자인 시스템에 집중되어야 합니다. ### 가치와 인사이트 이 글은 AI를 활용한 프론트엔드 개발에서 발생하는 디자인 일관성 문제를 해결하는 실질적인 방법을 제시합니다. 'AI 티'의 근본 원인이 페이지별 독립적인 코드 생성과 기준 부재에 있음을 명확히 하고, 이를 디자인 시스템 구축이라는 선제적 조치를 통해 해결하는 과정을 상세히 설명합니다. 특히, '화면 모양의 기준은 디자인 시스템'이라는 원칙을 세우고, 컴포넌트 정의, 재사용, 기술적 제약을 통해 일관성을 강제하는 방식은 매우 중요합니다. 또한, 자동화된 검증과 수동 피드백을 결합한 QA 프로세스는 실무에서 적용 가능한 현실적인 방안을 제시합니다. 디자인 시스템을 먼저 구축하고 화면을 그에 맞춰 나가는 접근 방식은 개발 생산성 향상뿐만 아니라, 사용자 경험 개선 및 브랜드 일관성 유지에 기여하며, 장기적으로 유지보수 비용 절감 효과까지 기대할 수 있습니다. 이는 AI 시대에 프론트엔드 개발자가 나아가야 할 방향을 명확히 보여주는 사례라 할 수 있습니다. ### 기술·메타 - 환경: Node + Express + TypeScript + EJS + htmx - 추가 기술: Tailwind CSS v4 - 모델: Claude Opus 5.5 - 검증 도구: Playwright ### 향후 전망 AI 기반 코드 생성 기술은 계속 발전할 것이며, 앞으로는 AI가 디자인 시스템을 더 잘 이해하고 활용하는 방향으로 나아갈 가능성이 높습니다. 하지만 현재로서는 AI가 스스로 디자인 시스템을 완벽하게 구축하고 관리하는 데에는 한계가 있습니다. 따라서 개발자는 AI 생성 코드의 잠재적 문제점을 인지하고, VacayBuddy와 같이 명확한 디자인 시스템을 먼저 구축하여 AI가 이를 따르도록 유도하는 전략을 지속적으로 활용해야 할 것입니다. 경쟁 구도 측면에서는, AI 코드 생성 도구들이 디자인 시스템과의 연동성을 강화하는 방향으로 발전할 것으로 예상됩니다. 또한, 디자인 시스템 구축 및 관리 도구들도 더욱 고도화되어 개발자들이 더 쉽게 일관성 있는 UI를 만들 수 있도록 지원할 것입니다. 장기적으로는 AI가 디자인 시스템을 학습하여 초기 설계 단계부터 일관성을 갖춘 코드를 생성하는 수준까지 발전할 수도 있으나, 이는 여전히 많은 연구와 기술적 진보를 필요로 합니다. 현재로서는 개발자의 명확한 기준 설정과 디자인 시스템 중심의 개발 워크플로우가 AI 생성 코드의 품질을 보장하는 가장 확실한 방법입니다. 📝 원문 및 참고 - 원문: [링크 열기](https://newvibot.com/ko/blog/ai-frontend-design-system) - GeekNews 토픽: [보기](https://news.hada.io/topic?id=35347) --- 출처: GeekNews ([원문 링크](https://newvibot.com/ko/blog/ai-frontend-design-system))

사이트 방문하기Visit Service

#GeekNews