Claude code를 활용해 만든 SF 스타일 UI 프로젝트
I used Claude code to create a bunch of live sci-fi UIs, it took an enormous amount of time but beautiful eye-catching design is definitely possible with claude!
핵심 요약
Claude code만으로 직접 구현한 SF 감성 UI 프로젝트와 그 제작 과정 공유.
- 제작 방식 — 이미지 생성기 없이 Claude code와 프롬프트만으로 요소별 UI 디자인 구현.
- 시각적 피드백 — Claude에게 스크린샷을 제공하여 수정 사항을 인지시키는 방식이 성능 향상에 큰 도움.
- 기술적 난관 — AI의 고정관념을 극복하고 화면 내 요소들을 정교하게 정렬하는 과정이 가장 어려웠음.
- 활용 목적 — 영화나 TV 쇼에서 보던 SF 감성을 데스크탑 환경에서 즐기기 위한 개인 프로젝트.
작업하는 동안 모니터에 띄워둘 SF 분위기의 무언가를 찾고 있었는데 마음에 드는 게 없어서, 지난 몇 주 동안 직접 만들어 보았습니다. 결과물이 아주 만족스러워요!
이미지 생성기는 전혀 사용하지 않았고(당시엔 디자인 기능이 없었거든요), 오직 Claude code만 사용했습니다. 물론 참고 자료는 몇 개 제공했죠. 작업 방식은 시간이 지나면서 많이 바뀌었습니다. 보통 SF 이야기나 제가 찾던 감성적인 콘셉트에서 시작해, Claude에게 첫 결과물을 만들어달라고 요청하는 식으로 진행했어요. 그 이후로는 사실상 요소 하나하나를 다듬는 엄청난 양의 프롬프트 작업이었습니다. 모든 UI에는 '메인' 비주얼이 있고, 그 뒤를 받쳐주는 요소들(텍스트나 그래픽)이 있습니다. 가장 큰 난관은 UI들이 서로 너무 비슷하지 않게 만드는 것(AI가 고정관념에 빠지기 쉽더라고요)과 화면에 요소들을 제대로 정렬하는 것이었습니다. 제가 배운 가장 큰 교훈은, Claude가 제가 원하는 변경 사항을 '볼' 수 있도록 결과물 스크린샷을 찍어서(혹은 찍어달라고 해서) 보여주면, 요청을 훨씬 더 잘 수행한다는 점입니다.
저는 보통 의료 교육 도구를 만들 때 Claude를 사용하는데, 이번에는 영화나 TV 쇼에서 항상 눈여겨보던 분야를 시도해 볼 수 있어서 정말 즐거웠습니다. 즐겁게 봐주세요! (참고로 데스크탑에서 보는 게 가장 좋고, 완전히 무료입니다.)
