요즘 AI 코딩 에이전트에게 "서비스 화면 만들어줘"라고 하면 꽤 그럴듯한 결과가 나옵니다. 문제는 그럴듯한 정도에서 멈춘다는 점입니다. 크림색 배경에 테라코타 포인트, 똑같이 둥근 카드가 줄지어 선 대시보드처럼, 로고만 바꾸면 쇼핑몰이라고 해도 사내 툴이라고 해도 믿을 만한 화면입니다.

동네 현상소에 필름을 맡기고 현상 진행 상황과 스캔 사진을 롤 단위로 확인하는 서비스로, 대상은 필름 카메라를 취미로 쓰는 20~30대입니다. 주제가 뚜렷해야 "이 서비스다운가"를 판단하기 쉬워 이렇게 잡았습니다. 만들 화면은 랜딩, 현상 현황 대시보드, 롤 목록과 상세, 접수 폼, 빈 상태와 에러 상태 다섯 개입니다.

화면 5개에 하위 상태 3개(롤 상세, 폼 검증 에러, 오류 탭)를 더해 1440px과 390px 폭으로 캡처했습니다(롤 상세는 390px만). 조건당 15장, 총 60장입니다. 파일명은 무작위 코드로 바꾸고 화면마다 순서를 섞어 보여주는 블라인드 평가로, 첫인상·타이포·색·정보 구조·카피·모바일·접근성 7개 항목을 1~5점으로 매겼습니다. 접근성은 스크린샷으로 확인할 수 있는 글자 대비 위주로 봤습니다.

채점 기준표도 미리 만들었습니다. 첫인상 1점은 "로고만 바꾸면 어떤 서비스라 해도 믿을 정도", 5점은 "첫 화면부터 필름 현상소 서비스라는 게 느껴짐"이고, 흔한 AI 룩에 그대로 해당하면 첫인상은 최대 3점입니다.

측정값으로는 명도 대비 위반을 셌습니다. 흰 배경에 연한 회색 글씨처럼, 글자색과 배경색의 밝기 차이가 너무 작아 읽기 어려운 곳이 몇 군데인지 센 값입니다. 접근성 중에서도 색 대비만 숫자로 확인한 것입니다. 밝기 차이는 ‘4.5:1’ 같은 비율로 나타내는데, 검은 글씨와 흰 배경이 21:1로 가장 크고 숫자가 낮을수록 구분하기 어렵습니다. 웹 접근성 기준인 WCAG*(AA 등급)는 일반 글씨에 4.5:1, 큰 글씨에 3:1 이상을 요구하며, 이 기준에 못 미치는 곳을 axe-core*로 자동 집계했습니다. 숫자가 작을수록 좋습니다.

질문이 "AI가 서비스의 시각적 정체성을 스스로 만들 수 있는가"였기 때문에, 핵심 지표는 전체 평균이 아니라 첫인상·타이포·색 세 항목의 평균(이하 디자인 3항목)으로 잡았습니다. 나머지 네 항목은 "쓸 만한 화면인가"를 보는 기본 품질로 따로 봤습니다.

네 조건을 나란히 놓으면 "스킬을 넣기 전과 후"를 빈 프로젝트와 shadcn 프로젝트, 두 쌍으로 비교할 수 있습니다.

차이가 가장 극적으로 드러난 건 현상 현황 대시보드였습니다. 스킬 없이 만든 ① 기본과 ② shadcn만은 숫자 카드, "접수-현상-스캔-완료" 진행 막대, 최근 활동 목록으로 구조가 거의 같았습니다. 깔끔하지만 "필름 현상소"를 "택배 배송 조회"로 바꿔도 그대로 성립하는 화면입니다.

반면 ③ 스킬만과 ④ shadcn+스킬은 진행 단계를 필름 스트립으로 그렸습니다. ③은 현상이 진행될수록 프레임에 상이 맺히는 네거티브 띠로, ④는 검은 필름 위에 단계별 칸이 채워지는 모양으로 표현했습니다. 블라인드 상태에서도 "아, 이건 필름 서비스구나" 하고 바로 알아볼 수 있었습니다.

shadcn은 누가 만들어도 비슷한 품질이 나오게 하는 도구에 가깝고, ② shadcn만은 그 역할을 그대로 해냈습니다. 대비 위반은 20건으로 적었고, 모바일 점수(4.4)는 네 조건 중 가장 높았습니다.

1) 스킬은 shadcn 위에 새 옷을 입혔습니다

가장 궁금했던 "shadcn이 스킬을 누를까, 스킬이 shadcn을 길들일까"의 답은 후자였습니다. ④ shadcn+스킬의 테마 파일을 열어보면, shadcn 기본 테마의 무채색 팔레트를 통째로 걷어내고 모서리 둥글기와 서체까지 바꿨습니다. 새로 만든 색 토큰 이름도 paper(인화지), mask(네거 마스크), film(필름 베이스)입니다. 컴포넌트는 그대로 쓰고 디자인 토큰만 갈아끼운 셈이라, 프론트엔드 개발자가 shadcn을 커스터마이즈할 때 쓰는 방식과 같아서, shadcn의 일관성은 지키면서 서비스의 분위기만 바꾸는 방법을 보여준 결과이기도 합니다.

2) "먼저 생각하고 만드는" 순서가 생겼습니다

세션 기록을 보니 스킬이 없는 두 조건은 첫 행동이 더미 데이터 파일 작성이었습니다. 반면 스킬을 쓴 두 조건은 코드를 쓰기 전에 컨셉부터 세웠습니다. ③은 "필름 네거티브와 라이트박스", ④는 "현상소 주문서"였습니다.

가장 인상적인 장면은 ④에서 나왔습니다. 처음 고른 주색이 파란색이었는데, 계획을 스스로 검토하다가 "너무 SaaS 같다"며 보라 계열로 바꿨습니다. 사람 디자이너가 시안을 내기 전에 한 번 더 걸러내는 과정을 AI가 흉내 낸 것입니다.

방향도 꽤 일관됐습니다. 스킬을 쓴 두 결과물은 따로 돌렸는데도 둘 다 IBM Plex Sans KR을 골랐고, 필름 재료에서 색 토큰 이름을 가져왔고, 쿨 그레이 배경을 택했습니다. 반면 스킬이 없는 ① 기본은 크림(#f5f0e6)과 앰버, ② shadcn만은 웜 오프화이트와 오렌지로, 스킬이 "요즘 AI 디자인이 몰리는 군집"으로 경고하는 크림+테라코타 조합에 가까웠습니다.

3) 이번 실험에서는 비용 차이가 크지 않았습니다

스킬을 넣으면 비용이 늘 거라 예상했지만, ① 기본 → ③ 스킬만은 오히려 $0.17 줄었고 ② shadcn만 → ④ shadcn+스킬은 $0.51 늘었습니다. 두 쌍뿐이라 일반화할 수는 없지만 부담스러운 수준은 아니었습니다. ③ 스킬만은 네 조건 중 가장 적은 코드(1,406줄)로 가장 높은 점수를 받기도 했습니다.

1) 개성에는 대가가 따랐습니다

④ shadcn+스킬은 대비 위반이 213건으로 압도적으로 많았습니다. 대부분은 필름 스트립 장식의 작은 프레임 번호가 한 화면에 수십 번 반복되며 쌓인 숫자입니다. 순수한 장식용 텍스트는 WCAG 대비 기준의 예외가 될 수 있어 213건이 모두 실제 사용 문제라고 보기는 어렵지만, 오렌지 배경 위 흰 글씨나 비활성 탭처럼 기준에 못 미치는 곳도 있었습니다.

2) 이번 실험에서 스킬이 바꾼 건 "보이는 것"이었습니다

스킬을 넣었을 때의 차이는 서체, 색, 첫인상 같은 시각적 정체성에 집중돼 있었습니다. 적어도 이번 실험에서는 화면 흐름이나 문구 품질까지 스킬이 끌어올려 주지는 않았습니다.

3) 시안이나 디자인 시스템이 이미 있다면 할 일이 적습니다

스킬이 빛난 지점은 가이드가 없을 때 "주제에서 색과 서체를 스스로 끌어내는" 부분이었습니다. 피그마 시안이나 사내 디자인 시스템이 이미 있는 팀이라면 스킬이 대신해 줄 몫이 크지 않습니다. 이번 실험을 기준으로 보면, 사이드 프로젝트나 MVP, 디자이너 없이 시작하는 초기 서비스처럼 "정체성을 처음 세워야 하는" 단계에서 특히 유용해 보입니다.

• 딱 한 번의 사례입니다. 조건마다 한 번씩, Opus 5.5로 돌렸습니다. 다시 돌리거나 모델이 바뀌면 결과가 꽤 달라질 수 있으니, 통계적 결론이 아니라 한 번의 사례 실험으로 읽어 주시기 바랍니다.
• 평가자가 한 명입니다. 실험을 설계한 에디터가 직접 채점해서, 첫인상·타이포·색처럼 정성적인 항목은 취향에 영향을 받을 수 있습니다. 파일명과 순서는 가렸지만 shadcn 특유의 생김새까지 숨길 수는 없었고, "AI 룩" 판정도 색상 코드를 보고 내린 추정입니다.
• 브랜드 가이드는 주지 않았습니다. 이번 결과는 "가이드가 없을 때 AI가 무엇으로 빈칸을 채우는가"에 대한 것이고, 브랜드 색을 줬을 때는 이번 실험 범위 밖입니다.