예상 읽기 시간: 약 3분
Framer CSS 디자인 수정은 값을 먼저 만져보고, 코드를 추출해 프레이머에서 돌려보는 식으로 진행했습니다. 마음에 들지 않는 부분이 있으면 프레이머 안의 GPT나 제 GPT에 바꾸고 싶은 점을 말하고, 수정된 내용을 받아 다시 사용했습니다.
원하는 감각을 고르는 화면
https://attached-assets–bloglluukk.replit.app
CSS를 추출한 도구는 Visual Motion Playground가 맞습니다.
재질·비주얼·움직임을 고르는 패널이 있습니다. Frosted Glass, Neumorphism 같은 표현과 Smooth, Heavy 같은 움직임 항목이 따로 보입니다. 뒤에는 Framer Motion·CSS·JSON 내보내기 탭이 나옵니다.
재질을 고르는 일과 움직임을 고르는 일을 분리하면 질문도 구체적으로 바꿀 수 있습니다.
예를 들어 표면의 그림자와 이동의 속도는 서로 다른 수정 항목입니다. 당시 화면은 여러 조건이 함께 바뀌므로 재질 하나만 바꾼 통제 비교처럼 소개하지 않겠습니다.
Framer CSS 디자인 수정은 적용 화면에서 다시 보기
조절 도구 안에서 괜찮아 보이는 것과 프레이머의 페이지 안에서 괜찮아 보이는 것은 다를 수 있습니다. 실제로 저는 CSS를 추출한 뒤 프레이머에서 돌려보며 수정할 부분을 찾았습니다. GPT에게 요청하는 내용도 그 화면에서 보이는 차이를 기준으로 정했습니다.
CSS 전체가 프레이머에 언제나 그대로 들어간다는 뜻은 아닙니다. 어떤 코드 컴포넌트나 요소에 적용했는지는 작업 방식에 따라 달라집니다. 이 글의 단계 설명을 모든 프레이머 프로젝트의 설치 방법으로 읽지는 않았으면 합니다.
무엇을 바꾸고 싶은지 짧게 나눠 말하기
다음은 같은 방식으로 요청할 때 쓸 수 있는 재구성 예시입니다.
카드의 모서리와 배경색은 유지하고 그림자만 더 약하게 바꾸고 싶습니다. 현재 적용된 코드에서 바뀌는 값을 설명하고 수정본을 주세요. 다른 요소에 영향을 주는 부분이 있다면 먼저 알려주세요.
한 번에 모두 바꾸는 대신 유지할 요소와 수정할 요소를 나눠 말하면 결과를 비교하기 쉽습니다. 수정본을 받았다고 끝내지 않고 프레이머에서 다시 확인하는 단계도 남깁니다.
저에게 이 과정은 디자인 판단을 코드로 옮겨보는 방식이었습니다. 생성된 코드를 한 번 받고 끝내는 일보다, 화면에서 다시 보고 수정 요청을 이어가는 쪽으로 사용했습니다.