AlphaK

바이브코딩으로 만든 앱, 왜 다 비슷해 보일까요?

AI로 기능은 금방 붙는데 화면은 매번 비슷하거나 제각각이더라고요. 간격이 들쭉날쭉하고, 버튼 모양이 화면마다 다르고, 글자 대비는 흐리고요. "예쁘게 만들어줘"를 반복하는 대신 잘 정리된 부품을 골라서 AI에게 넘기면 어떨까 싶어서 COLOR / OS를 만들었어요.

어떻게 쓰나요
1. 실제 앱 템플릿 7종(SaaS · 모바일 · 커머스 · 에디토리얼) 중 하나를 고르고
2. 컨셉 14종 중 분위기를 고르고, 메인 색 하나만 정하면
3. 컴포넌트 88개가 전부 같은 디자인 언어로 맞춰져요
4. 필요한 것만 골라 React 키트로 받아서 Cursor·Claude Code에 넘기면 끝

키트 안에는 AI용 지시서(APP_DESIGN_BRIEF.md), 디자인 토큰, 대비 검사 결과가 들어 있어서 "이 키트 기준으로 내 앱을 바꿔줘" 한 줄이면 돼요.

최근에 바꾼 것
- 메인 색 하나로 실제 서비스처럼 배색: 화면은 중립색, 메인 색은 버튼·링크·선택 상태에만. 실제 제품 12곳을 픽셀 단위로 재서 정했어요.
- 한글·제목·영문 서체를 따로 선택: 국내 서비스 28곳을 조사해서 Pretendard, Noto Sans KR, IBM Plex Sans KR, 페이퍼로지 등 실제로 쓰이는 서체 위주로 넣었어요.
- 컴포넌트 스타일 5종(Precise · Soft · Sharp · Touch · Dense): 버튼 높이, 모서리, 테두리를 실제 디자인 시스템 실측값으로.
- 글자 대비는 WCAG AAA까지 자동 보정, 모바일 화면도 가로 스크롤 없이.

무료이고 가입 없이 바로 써볼 수 있어요. Tailwind 테마·Figma 토큰 내보내기, 라이트·다크 한 쌍 같은 Pro 기능은 $5 1회 결제예요.

써 보시고 막히는 곳이나 "이런 컴포넌트가 있었으면" 하는 게 있으면 댓글로 알려주세요. 하나씩 반영할게요.

👉 https://coloros.goodthings.co.kr/?utm_source=disquiet