디자이너 없이, 예산 없이, AI와 단둘이서 SaaS 전체 UI를 7일 만에 갈아엎었습니다.
Convince-X의 Candidate Analyzer는 기능적으로는 잘 동작하고 있었습니다. 3단계 AI 분석 파이프라인, 이메일 시퀀스 엔진, 다국어 지원까지. 그런데 한 가지 문제가 있었습니다. 보이는 게 끔찍했습니다.
순수 HTML에 인라인 CSS를 덕지덕지 붙인 12개 이상의 HTML 파일. 페이지마다 스타일이 미묘하게 달랐고, 모바일에서는 레이아웃이 깨지는 곳이 한둘이 아니었습니다. 기능은 있는데 신뢰감이 없는 UI. 이건 프로덕트가 아니라 프로토타입이었습니다.
• • •
리디자인이 필요했던 이유
솔직히 말하면, 기능을 만드는 데 중독되어 있었습니다. AI 분석이 동작하고, 시퀀스 엔진이 이메일을 보내고, 검색 결과가 나오는 걸 보면 뿌듯했으니까요. "디자인은 나중에"라는 말을 스스로에게 수십 번 했습니다.
그런데 현실은 달랐습니다. 아무리 분석이 정확해도, UI가 어설프면 사용자는 "이거 괜찮은 거야?"라고 의심합니다. 특히 B2B SaaS에서 첫인상은 치명적입니다.
리디자인 전 상황
• HTML 파일 12개 이상, 각각 독립적인 인라인 CSS
• 컬러 팔레트 미통일 (파란색만 3가지 톤)
• 모바일 반응형 미적용 (절반 이상의 페이지)
• 다크모드 미지원
• 폰트 혼용 (기본 sans-serif + 일부 커스텀)
C-Suite 회의에서 CDO(AI Design Officer)가 처음으로 강하게 의견을 냈습니다. "기능이 아무리 좋아도, 보이는 게 이러면 유저가 신뢰하지 않습니다." 맞는 말이었습니다.
• • •
Day 1-2: Tailwind 도입
CSS 프레임워크를 고르는 데 오래 고민하지 않았습니다. Bootstrap은 너무 무겁고, 순수 CSS는 일관성을 맞추기 어렵습니다. Tailwind CSS는 유틸리티 퍼스트 접근이라 AI와 협업하기에 최적이었습니다.
왜냐하면 AI에게 "이 버튼을 파란색으로, 둥글게, 패딩 넉넉히"라고 말하면 bg-blue-600 rounded-lg px-6 py-3이 바로 나옵니다. CSS 클래스 이름을 고민할 필요가 없습니다. 디자인 토큰이 클래스 이름 자체에 내장되어 있으니까요.
| Before (인라인 CSS) |
After (Tailwind) |
| style="color: #333; font-size: 14px; padding: 8px 16px; background: #2563eb; border-radius: 4px;" | class="text-gray-700 text-sm px-4 py-2 bg-blue-600 rounded" |
| 파일마다 미묘하게 다른 값 | 동일 토큰 = 동일 결과 |
첫 이틀은 가장 중요한 두 페이지에 집중했습니다. 대시보드와 분석 결과 페이지. 이 두 페이지가 사용자가 가장 오래 머무르는 곳이니까요. 기존 인라인 CSS를 전부 걷어내고 Tailwind 클래스로 교체하면서, 동시에 컬러 팔레트를 통일했습니다.
• • •
Day 3-4: 컴포넌트 통일
Tailwind를 도입하는 건 시작에 불과했습니다. 진짜 문제는 컴포넌트 일관성이었습니다.
버튼이 어떤 페이지에서는 둥글고 어떤 페이지에서는 각졌습니다. 카드 그림자가 어떤 곳은 짙고 어떤 곳은 없었습니다. 입력 필드의 포커스 스타일이 제각각이었습니다. 이런 불일치가 사용자에게 무의식적으로 "대충 만들었구나"라는 인상을 줍니다.
CDO의 가이드라인은 명확했습니다.
CDO 디자인 가이드라인 (핵심)
• 버튼: Primary(blue-600), Secondary(gray-200), Danger(red-600) 3종만
• 카드: shadow-sm + border + rounded-xl 통일
• 간격: 4px 배수 체계 (p-2, p-4, p-6, p-8)
• 텍스트: gray-900(제목) / gray-700(본문) / gray-500(보조)
• 애니메이션: transition-all duration-200 기본
이 규칙을 정하고 나니 놀라울 정도로 빨라졌습니다. 매번 "이 버튼 어떻게 만들지?"를 고민하지 않아도 됐으니까요. AI에게 "Primary 버튼으로"라고 하면 바로 나옵니다. 디자인 시스템의 힘을 체감한 순간이었습니다.
12개 파일을 하나씩 열어서 모든 컴포넌트를 가이드라인에 맞게 통일하는 작업. 단조롭지만 이게 끝나고 나면 전체 제품이 하나의 브랜드처럼 보이기 시작했습니다.
디자인 시스템은 제약이 아니라 자유입니다. 매번 고민하지 않아도 되는 자유.
• • •
Day 5-6: 반응형 + 다크모드
2026년에 모바일 반응형이 안 되는 SaaS는 있을 수 없습니다. 그런데 솔직히, 지금까지 "데스크톱 먼저" 마인드셋으로 만들었기 때문에 모바일에서 깨지는 곳이 많았습니다.
Tailwind의 반응형 프리픽스(sm:, md:, lg:)가 여기서 빛을 발했습니다. 3컬럼 그리드를 모바일에서 1컬럼으로 바꾸는 게 grid-cols-1 md:grid-cols-3 한 줄이면 됩니다.
다크모드는 고민이 있었습니다. 지원해야 하나? CDO는 "트렌드가 아니라 접근성"이라고 했습니다. 밤늦게 후보자 분석을 하는 리크루터에게 눈부신 흰 화면은 고통입니다. 다크모드는 선택이 아니라 배려입니다.
다크모드 적용 시 주의점
흔한 실수
• 단순 색상 반전 (눈 피로)
• 그림자 그대로 유지
• 차트/그래프 색상 미변경
• 이미지 배경 하얀색 노출
올바른 접근
• 명도 차이 기반 설계
• 그림자 → 미세 테두리 전환
• 채도 낮춘 색상 별도 정의
• 이미지에 opacity 조절
Tailwind의 dark: 프리픽스 덕분에 다크모드 지원이 생각보다 수월했습니다. 하지만 12개 파일 전체에 dark: 클래스를 추가하는 작업은 역시 노동이었습니다. AI가 패턴을 잡아서 반복 작업을 해줬지만, 차트나 그래프 같은 커스텀 컴포넌트는 수동으로 확인해야 했습니다.
• • •
Day 7: i18n 전 페이지 적용
마지막 날은 국제화(i18n) 작업이었습니다. 그런데 이건 리디자인과 동시에 해야만 했습니다. 왜냐하면 UI를 바꾸면서 하드코딩된 한국어 텍스트도 같이 정리하는 게 효율적이니까요.
data-i18n 속성을 사용해서 모든 텍스트를 키로 변환하고, JSON 파일에 한국어/영어/일본어 번역을 넣는 방식입니다. 리디자인하면서 발견한 하드코딩된 텍스트만 약 200개. 이걸 전부 키로 바꾸는 건 정말 기계적인 작업이었지만, AI 없이는 일주일이 더 걸렸을 겁니다.
동시에 데모 모드도 구현했습니다. 13개 직군별 샘플 프로필을 만들어서, 실제 데이터 없이도 제품을 체험할 수 있게 했습니다. 3개 언어로 된 데모 프로필 각각 다른 직군, 다른 이름, 다른 이력. 이걸 설계하는 건 AI가 했지만, "이 프로필이 현실적인가?"를 판단하는 건 12년차 리크루터의 눈이 필요했습니다.
번역은 텍스트를 바꾸는 게 아닙니다. 맥락을 옮기는 겁니다.
• • •
예산 0원의 비밀
이 전체 리디자인에 들어간 비용은 정확히 0원입니다.
디자이너 없습니다. 유료 디자인 도구 없습니다. UI 키트 구매 없습니다. 오픈소스 CSS 프레임워크와 무료 폰트, 무료 아이콘만으로 충분했습니다.
| 일반적인 리디자인 |
AI + 파운더 리디자인 |
| 전문 디자이너 + 유료 도구 필수 | AI CDO + 오픈소스 도구 |
| 디자인 도구 구독비 별도 | 오픈소스 프레임워크로 대체 |
| 프론트엔드 개발자 별도 고용 | AI 코딩 + 파운더 검수 |
| 소요 기간: 4~8주 | 소요 기간: 7일 |
물론 "AI CDO"가 실제 디자이너를 완벽하게 대체한다는 건 아닙니다. 전문 디자이너가 있었다면 더 세련된 결과물이 나왔을 겁니다. 하지만 1인 창업자에게 중요한 건 80%의 품질을 0%의 비용으로 달성하는 겁니다. 나머지 20%는 유저 피드백을 받으면서 개선하면 됩니다.
• • •
배운 것들
7일간의 리디자인 스프린트에서 배운 것을 정리합니다.
첫째, 디자인 시스템을 먼저 정하라. 컬러, 간격, 타이포그래피, 컴포넌트 규칙을 먼저 정해놓으면 나머지는 기계적으로 됩니다. 이걸 안 하고 시작하면 12개 파일이 12개의 다른 앱처럼 보입니다.
둘째, AI와 디자인 작업을 할 때는 구체적인 언어가 필요하다. "예쁘게 만들어줘"는 안 됩니다. "배경 gray-50, 테두리 gray-200, 둥근 모서리 xl, 그림자 sm"이 됩니다. Tailwind의 유틸리티 클래스가 바로 이 "구체적인 언어" 역할을 합니다.
셋째, 리디자인과 i18n을 동시에 하라. 어차피 모든 파일을 열어야 한다면, 한국어 하드코딩도 같이 정리하는 게 효율적입니다. 나중에 따로 하면 또 12개 파일을 다시 열어야 합니다.
넷째, 완벽하지 않아도 일관적이면 된다. 모든 컴포넌트가 세련될 필요는 없습니다. 하지만 모든 컴포넌트가 같은 규칙을 따라야 합니다. 일관성이 신뢰감을 만듭니다.
7일 리디자인 체크리스트 (재현 가능)
• Day 1-2: CSS 프레임워크 도입 + 핵심 페이지 전환
• Day 3-4: 디자인 시스템 정의 + 전체 컴포넌트 통일
• Day 5-6: 반응형 + 다크모드 적용
• Day 7: i18n + 데모 모드 구현
• 전제: AI 협업 + 파운더가 제품을 매일 쓰는 도메인 전문가
이 리디자인은 끝이 아니라 시작이었습니다. 이 탄탄한 UI 위에 채용 파이프라인(칸반 보드)을 올릴 수 있었고, 글로벌 진출을 위한 3개 국어 데모를 만들 수 있었습니다. 결국 "보이는 것"에 투자하는 건 허영이 아니라 제품의 기초 체력을 만드는 일이었습니다.
No designer. No budget. Just AI and a solo founder redesigning an entire SaaS UI in 7 days.
Convince-X's Candidate Analyzer was working well functionally. 3-stage AI analysis pipeline, email sequence engine, multilingual support. But there was one problem: it looked terrible.
Raw HTML with inline CSS slapped across 12+ files. Styles subtly different on every page, layouts breaking on mobile everywhere. Features existed, but the UI inspired zero trust. This wasn't a product -- it was a prototype.
• • •
Why a Redesign Was Needed
Honestly, I was addicted to building features. Watching the AI analysis work, the sequence engine send emails, search results appear -- it felt great. I told myself "design can wait" dozens of times.
But reality disagreed. No matter how accurate your analysis is, if the UI looks amateur, users think "is this even legit?" In B2B SaaS, first impressions are critical.
Before the Redesign
• 12+ HTML files, each with independent inline CSS
• Color palette inconsistency (3 different shades of blue)
• No mobile responsiveness (more than half the pages)
• No dark mode support
• Mixed fonts (default sans-serif + some custom)
In a C-Suite meeting, the CDO (AI Design Officer) spoke up strongly for the first time: "No matter how good the features are, if it looks like this, users won't trust it." They were right.
• • •
Day 1-2: Adopting Tailwind
Choosing a CSS framework didn't take long. Bootstrap was too heavy, vanilla CSS made consistency hard. Tailwind CSS's utility-first approach was ideal for collaborating with AI.
When you tell AI "make this button blue, rounded, generous padding," you get bg-blue-600 rounded-lg px-6 py-3 immediately. No debating class names. Design tokens are built right into the class names.
| Before (Inline CSS) |
After (Tailwind) |
| style="color: #333; font-size: 14px; padding: 8px 16px; background: #2563eb; border-radius: 4px;" | class="text-gray-700 text-sm px-4 py-2 bg-blue-600 rounded" |
| Subtly different values per file | Same tokens = same results |
The first two days focused on the two most important pages: the dashboard and the analysis results page. These are where users spend the most time. We stripped all inline CSS and replaced it with Tailwind classes while simultaneously unifying the color palette.
~3,000
Inline Style Lines Removed
• • •
Day 3-4: Unifying Components
Adopting Tailwind was just the start. The real problem was component consistency.
Buttons were rounded on some pages, square on others. Card shadows were heavy here, missing there. Input focus styles varied everywhere. These inconsistencies subconsciously signal "this was built carelessly."
The CDO's guidelines were clear:
CDO Design Guidelines (Core)
• Buttons: Primary (blue-600), Secondary (gray-200), Danger (red-600) -- only 3
• Cards: shadow-sm + border + rounded-xl unified
• Spacing: 4px multiples (p-2, p-4, p-6, p-8)
• Text: gray-900 (headings) / gray-700 (body) / gray-500 (secondary)
• Animations: transition-all duration-200 default
Once these rules were set, speed increased dramatically. No more debating "how should this button look?" Tell AI "Primary button" and it's done. That's the power of a design system.
Opening 12 files one by one, unifying every component to the guidelines. Tedious, but once finished, the entire product started looking like one brand.
A design system isn't a constraint -- it's freedom. The freedom of not having to think about every decision.
• • •
Day 5-6: Responsive + Dark Mode
In 2026, a SaaS without mobile responsiveness is unacceptable. But honestly, we'd been building "desktop first" and mobile was broken in many places.
Tailwind's responsive prefixes (sm:, md:, lg:) shone here. Converting a 3-column grid to single-column on mobile takes one line: grid-cols-1 md:grid-cols-3.
Dark mode was debatable. Should we support it? The CDO said "it's not a trend -- it's accessibility." A recruiter analyzing candidates late at night doesn't need a blinding white screen. Dark mode isn't optional; it's considerate.
Dark Mode Implementation Notes
Common Mistakes
• Simple color inversion (eye strain)
• Keeping shadows as-is
• Not adjusting chart/graph colors
• White image backgrounds showing through
Better Approach
• Luminance-based design
• Shadows → subtle borders
• Separate desaturated color definitions
• Image opacity adjustments
Tailwind's dark: prefix made dark mode easier than expected. But adding dark: classes across all 12 files was still labor-intensive. AI handled the repetitive patterns, but custom components like charts needed manual verification.
• • •
Day 7: i18n Across All Pages
The last day was internationalization (i18n). This had to happen simultaneously with the redesign -- cleaning up hardcoded Korean text while changing the UI was simply more efficient.
Using data-i18n attributes to convert all text to keys, with Korean/English/Japanese translations in JSON files. We found about 200 hardcoded text strings during the redesign. Converting them all was mechanical work, but without AI, it would have taken another week.
We also built demo mode simultaneously. Sample profiles for 13 job categories, so users could experience the product without real data. Demo profiles in 3 languages, each with different roles, names, and career histories. AI designed them, but judging "is this profile realistic?" required a 12-year recruiter's eye.
Translation isn't changing text. It's transferring context.
• • •
The $0 Budget Secret
The total cost of this entire redesign was exactly $0.
No designer. No paid design tools. No UI kit purchases. Open-source CSS framework, free fonts, and free icons were enough.
| Typical Redesign |
AI + Founder Redesign |
| Professional designer + paid tools required | AI CDO + open-source tools |
| Design tool subscriptions extra | Open-source frameworks instead |
| Separate frontend developer hire | AI coding + founder review |
| Timeline: 4-8 weeks | Timeline: 7 days |
Of course, an "AI CDO" doesn't perfectly replace a real designer. A professional designer would have produced a more polished result. But for a solo founder, what matters is achieving 80% quality at 0% cost. The remaining 20% can be improved through user feedback.
• • •
Lessons Learned
Here's what I learned from the 7-day redesign sprint:
First, define the design system upfront. Set colors, spacing, typography, and component rules first, and everything else becomes mechanical. Skip this step and 12 files look like 12 different apps.
Second, design work with AI requires specific language. "Make it pretty" doesn't work. "Background gray-50, border gray-200, rounded-xl, shadow-sm" does. Tailwind's utility classes serve as exactly that "specific language."
Third, do the redesign and i18n simultaneously. If you're opening every file anyway, clean up hardcoded text at the same time. Doing it later means opening all 12 files again.
Fourth, consistency beats perfection. Not every component needs to be sophisticated. But every component needs to follow the same rules. Consistency creates trust.
7-Day Redesign Checklist (Reproducible)
• Day 1-2: Adopt CSS framework + convert key pages
• Day 3-4: Define design system + unify all components
• Day 5-6: Add responsive + dark mode
• Day 7: Implement i18n + demo mode
• Prerequisites: AI collaboration + founder who uses the product daily as a domain expert
This redesign was a beginning, not an end. On this solid UI foundation, we could build the recruitment pipeline (kanban board) and create trilingual demos for global expansion. Investing in "how things look" isn't vanity -- it's building the foundational strength of your product.
