요즘 웹서비스에 다크모드, 라이트모드 같은 ‘테마’ 기능이 없으면 은근히 불편해하는 분들이 많습니다. 특히 평소 다크모드를 쓰는 사람에게 밤에 갑자기 새하얀 화면이 뜨면 생각보다 꽤 부담스럽죠.
바이브코딩에서는 만드는 것도 정말 간단합니다. AI 에이전트한테 “라이트모드랑 다크모드 만들어줘”라고 하면 금방 만들어줍니다.
그런데 문제는 이렇게 간단하게 만들어놓고 프로젝트가 커졌을 때 생깁니다.
처음에는 잘 됩니다. 그런데...
페이지가 하나둘 늘어나기 시작하면 슬슬 이상한 것들이 튀어나옵니다.
다크모드인데 글자가 검은색이라 안 보이고, 라이트모드인데 버튼 글자가 흰색이라 안 보입니다. 어떤 카드는 혼자 하얗게 남아 있고, 모달이나 드롭다운에는 테마가 제대로 적용되지 않는 경우도 있습니다.
새로운 페이지를 하나 만들었더니 거기만 다크모드가 안 되는 일도 생깁니다.
그러면 다시 AI를 부릅니다.
“여기 다크모드 적용 안 됐어.”
“이 페이지 글자 안 보여.”
“버튼도 수정해줘.”
“다른 페이지에도 같은 문제 있는지 전부 찾아봐.”
AI는 다시 프로젝트를 읽고 관련 파일을 찾고 여러 컴포넌트를 수정합니다.
한두 번이면 별것 아닌데 프로젝트가 커질수록 이런 작업이 반복됩니다.
결국 별것도 아닌 색상 몇 개 때문에 AI가 프로젝트를 계속 읽고 수정하면서 토큰을 쓰게 됩니다.
진짜 문제는 나중에 색 하나 바꿀 때입니다
예를 들어 어느 날 다크모드를 보다가 이런 생각이 들었다고 해보겠습니다.
“카드 배경이 너무 어두운데 조금만 밝게 할까?”
페이지나 컴포넌트마다 실제 색상을 직접 지정해놨다면 AI는 그 색상이 어디에 사용되고 있는지 다시 찾아야 합니다.
같은 검은색이라고 해도 카드에만 사용했다는 보장이 없습니다. 모달에도 사용했을 수 있고, 사이드바나 드롭다운에도 같은 색상을 사용했을 수 있습니다.
그렇다고 프로젝트에 있는 검은색을 전부 밝게 바꿀 수도 없습니다.
결국 AI가 프로젝트 전체를 다시 검색해서 이 색상이 어디에서 어떤 목적으로 사용되고 있는지부터 파악해야 합니다.
여기서 또 토큰을 씁니다.
그래서 ‘다크모드’보다 먼저 만들어야 하는 것
처음부터 AI에게 단순히 “다크모드 만들어줘”라고 하기보다 **“공통 테마 시스템을 만들어줘”**라고 하는 게 좋습니다.
여기서 알아두면 좋은 개념이 **디자인 토큰(Design Token)**입니다.
이름은 어려워 보이지만 개념은 간단합니다.
색상 자체를 페이지마다 지정하는 대신 색상의 역할에 이름을 붙이는 겁니다.
예를 들어 전체 배경은 background, 카드나 모달 같은 영역은 surface, 주요 글자는 text-primary, 보조 글자는 text-secondary, 테두리는 border 같은 식입니다.
그러면 카드에게 “너는 #111111을 사용해”라고 지정하는 게 아니라 **“너는 surface를 사용해”**라고 정하는 겁니다.
라이트모드에서는 surface에 밝은색을 지정하고, 다크모드에서는 surface에 어두운색을 지정합니다.
페이지와 컴포넌트는 실제 색상이 무엇인지 신경 쓸 필요 없이 정해진 역할의 토큰만 사용하면 됩니다.
이렇게 해두면 나중이 정말 편합니다
나중에 다크모드 카드 배경이 너무 어둡다면 모든 페이지의 카드를 찾아다니면서 수정할 필요가 없습니다.
다크모드의 surface 값 하나만 수정하면 됩니다.
surface를 사용하는 카드, 모달 등의 UI가 같이 바뀝니다.
주요 글자색을 조금 밝게 하고 싶다면 text-primary를 수정하고, 테두리가 너무 밝다면 border를 수정하면 됩니다.
새로운 페이지를 만들 때도 마찬가지입니다.
이미 만들어놓은 테마 시스템을 사용하도록 해두면 새로운 페이지를 추가할 때마다 “여기도 다크모드 적용해줘”라고 다시 시킬 일이 훨씬 줄어듭니다.
AI 에이전트에게 이렇게 시켜보세요
이미 프로젝트를 만들고 있다면 아래 프롬프트를 그대로 넣어도 됩니다.
라이트모드와 다크모드를 페이지별로 각각 구현하지 말고, 프로젝트 전체에서 사용하는 공통 테마 시스템을 먼저 만들어줘.
background, surface, text-primary, text-secondary, text-muted, border, primary, danger, success 등 의미 기반의 디자인 토큰을 정의해줘.
각 디자인 토큰의 light / dark 값은 한 곳에서 관리하고, 모든 페이지와 컴포넌트에서는 가능한 한 실제 색상을 직접 지정하지 말고 디자인 토큰을 사용하게 해줘.
기존 프로젝트 전체도 확인해서 하드코딩된 배경색, 글자색, border, button, input, modal, dropdown 등의 색상을 찾아 공통 테마 시스템으로 정리해줘.
라이트모드와 다크모드 모두에서 배경, 글자, 카드, 버튼, input, modal, dropdown, hover, active, disabled, placeholder, border 등의 가독성과 대비가 정상적인지도 확인해줘.
앞으로 새로운 페이지나 컴포넌트를 추가할 때도 별도의 다크모드 작업 없이 기존 테마 시스템을 사용하도록 구조화해줘.
마지막으로 프로젝트 전체를 다시 확인해서 테마 시스템을 우회해 직접 지정된 색상이 불필요하게 남아 있는지도 점검해줘.
이미 다크모드를 만들어버렸다면?
이미 프로젝트가 어느 정도 진행됐다고 해서 다시 만들 필요는 없습니다.
AI에게 기존 프로젝트를 먼저 분석하게 하고, 여기저기 흩어진 색상을 의미에 따라 분류한 다음 디자인 토큰으로 옮겨달라고 하면 됩니다.
다만 무작정 모든 색상을 일괄 치환하라고 하는 건 피하는 게 좋습니다.
같은 #111111이라도 어떤 곳에서는 카드 배경이고, 다른 곳에서는 버튼이나 오버레이일 수 있기 때문입니다.
용도 파악 → 디자인 토큰 정의 → 기존 UI를 토큰으로 교체 → 라이트/다크모드 확인
이 순서로 작업하는 게 안전합니다.
AI가 고생하면 결국 내가 토큰을 씁니다
예전에는 이런 구조를 대충 만들어놓으면 나중에 개발자가 고생했습니다.
바이브코딩에서는 AI가 고생합니다.
그런데 AI가 고생하려면 프로젝트를 다시 읽고, 검색하고, 수정하고, 검증해야 합니다.
결국 AI가 고생하는 만큼 우리가 토큰으로 돈을 냅니다. ㅎㅎ
당장은 “다크모드 만들어줘” 한 줄이 가장 빠릅니다.
하지만 계속 키울 프로젝트라면 처음에 몇 줄 더 설명해서 공통 테마 시스템부터 잡아두는 게 훨씬 낫습니다.
바이브코딩에서는 코드를 직접 얼마나 잘 짜느냐만큼이나 AI에게 처음부터 어떤 구조로 만들어달라고 시키느냐가 중요해지고 있습니다.
처음에 프롬프트 몇 줄 더 쓰는 게, 나중에 같은 수정 수십 번 시키는 것보다 훨씬 쌉니다.