한 달 전보다 더 똑똑하게 사용하기

2025.10.05

by 김효진
Frame 491.png

「사용자에게 Fit한 정보를 제공하기 위한 여정」


2025년 8월 31일, 「사용자에게 Fit한 정보를 제공하기 위한 여정」을 발행한 지 한 달이 지난 지금, AI를 보다 똑똑하고 효율적으로 활용해 제가 의도한 결과물을 도출하기 위한 다양한 시도를 진행했습니다.

이전에는 이미 정의된 워크플로우의 일부 단계에만 AI를 도입해 효율을 높이는 방식으로 작업했다면, 이번에는 AI와 함께 워크플로우 자체를 설계하는 것부터 시작했습니다.




Context Engineering

Anthropic은 2025년 9월 30일 「Effective Context Engineering for AI Agents」 아티클을 통해 ‘컨텍스트 엔지니어링(Context Engineering)’이라는 개념을 제시했습니다.


대규모 언어 모델(LLM)은 추론 과정에서 한 번에 처리할 수 있는 정보의 양, 즉 컨텍스트 윈도우(Context Window)에 한계가 있습니다. 이 윈도우 안에 토큰이 과도하게 쌓이면 특정 정보를 기억하거나 활용하는 능력이 떨어지는 컨텍스트 부패(Context Rot) 현상이 발생합니다.

따라서 AI 에이전트가 여러 단계를 거쳐 자율적으로 작동하려면, 필요한 정보만 효율적으로 활용하도록 지속적으로 정제해야 합니다.


다양한 기업에서 AI 도입 사례가 늘어나면서, 이제는 단순히 AI에게 많은 데이터를 제공하는 것이 아니라 AI가 잘 이해할 수 있는 방식으로 Context를 설계하는 일이 더욱 중요해지고 있습니다.


즉, 모든 순수 데이터를 한 번에 주입하는 대신, 현재 작업 단계에서 반드시 필요한 핵심 정보만을 추출해 제공하는 방식이 AI의 성능과 작업 연속성을 유지하는 핵심 전략이 되고 있습니다.




디자인 공동 편집자로서의 역할 극대화

“Claude에서 설계하고, Figma Make로 시각화한다.”


0. 사전 전제 조건

문제 도메인에 대한 이해: 프로젝트가 다루는 비즈니스 영역과 정책 파악

참조 자로 확보: PRD, Design Principle, 문제 해결에 필요한 디자인 시스템이 정의된 문서


1. 프로젝트 모드에서 컨텍스트 쌓기

이번 ‘제품 상세페이지 리디자인’ 프로젝트는 단순한 아이디어 실험이나 발산이 아닌, 반복적인 피드백과 수정이 이뤄지기 때문에 파일 참조, 데이터와 지침을 통한 일관성 유지, 이전 설계의 연속성을 확보할 수 있는 ‘프로젝트 모드’를 활용했습니다.

Frame 491.png 사용 모델 Claude 4.5 - 프로젝트 생성

이전에는 디자인 워크플로우의 큰 틀만 설계한 뒤, 세부 단계는 작업을 진행하면서 필요할 때마다 추가하는 방식으로 진행했습니다.
그러나 이 방식은 단계 간 흐름이 병렬적으로 이어지지 못하고, 구간을 오가며 진행되는 과정에서 AI에게 요청할 때마다 맥락이 뒤섞여 프롬프트가 쉽게 오염되는 문제가 있었습니다.


이번에는 이러한 문제를 해결하기 위해, AI와 함께 전체 워크플로우를 먼저 설계한 뒤 각 단계에 필요한 세부 정보를 정의하는 방식을 택했습니다.
AI가 다양한 맥락에서 질문을 던지면, 저는 그에 답하며 세부 단계를 함께 완성해 나갔습니다.


핵심은 각 단계를 마칠 때마다 논의 결과를 정리하고, 이를 기반으로 다음 단계로 이어가는 것입니다.
또한 AI가 맥락 설계를 위해 필요한 정보를 스스로 파악하고 요청할 수 있도록 설계하는 것이 중요했습니다.


스크린샷 2025-10-08 오후 1.51.34 1.png 사용 모델 Claude 4.5 - 디자인 워크플로우 설계를 위한 prompt
Frame_763 1.png 1단계 - 문제 정의 및 분석을 위한 질문


AI가 던진 질문에 제가 후속 질문을 함으로써, 세부 지침 구체화

이미지 인식 범위는 어디까지인가?

텍스트, UI 요소, 레이아웃 구조, 버튼, 색상, 타이포그래피 등 모든 시각 요소의 인식이 가능한가?

여러 장의 이미지를 제공할 경우, 인식 효율을 고려했을 때 몇 장 정도가 적절한가?

URL을 공유했을 때 실제 접속이 가능한가?

어떤 도구를 통해 접근하는가?

제약사항이 있는가? (예: 로그인이 필요한 페이지 접근 가능 여부, 시각적 요소 파악 가능 여부 등)

제품 상세페이지는 어떤 방식으로 올릴 때 인식이 더 정확한가?

전체 페이지를 한 번에 업로드하는 것이 나은가, 아니면 상단·중단·하단으로 나누어 올리는 것이 더 효율적인가?


2. Prompt 작성에 집중했던 이전 시도

Frame_763 1.png 개선 전 - UX 초안을 위한 prompt / 결과물

이전에는 필요한 단계에서만 제한적으로 AI를 활용했기 때문에, 맥락을 모르는 AI에게 프롬프트 안에서 지침과 가이드 주입에 집중하다 보니, 수정에 많은 시간이 소요되었고 프롬프트의 길이도 점점 길어졌습니다.

물론 프롬프트가 길어지는 것이 반드시 나쁜 것은 아닙니다. 하지만 한 번에 처리해야 할 정보가 많아지면서, 모델이 무엇을 우선 고려해야 하는지 판단하기 어려워지고, 결국 애매한 답변만 내놓는 경우가 생겼습니다.



Frame_763 1.png 개선 후 - AI가 작업에 필요한 질문에 답변을 바탕으로 자동 UX 초안 생성

이번에는 처음부터 컨텍스트를 쌓았기 때문에 프로젝트 모드에 첨부된 데이터를 바탕으로 AI가 작업에 필요한 질문을 던졌고, 저의 답변을 바탕으로 별도의 추가 지시 없이도 만족스러운 결과물을 도출할 수 있었으며, 이전보다 실행 과정에서의 시간을 단축할 수 있었습니다.

결과물을 살펴보면, 전략에 대한 목표를 설정하고 Design Principle, 디자인 시스템을 기반으로 접근 방식을 설계했다는 점을 확인할 수 있었습니다.


Frame_763 1.png 이해를 위해 ‘ASCII 와이어프레임’ 자동 생성

이 과정에서 저는 기준(성공 기준, 시각적 완성도, 문제 해결의 우선순위를 결정하는 원칙 등)을 갖고 판단 → 방향 설정 → 판단 → 결정을 내렸습니다.
AI가 생성한 결과물을 평가하기 위한 성공 기준을 정의할 때는「Claude Docs - 성공 기준 정의하기」를 참고했습니다.

또한 꼭짓점마다 아래의 질문을 스스로에게 끊임없이 던집니다.
- 지금 내가 해결하려는 문제는 무엇인지
- 디자인 의도가 뚜렷했는지, 그 의도가 사용자로부터 시작되었는지
- 왜 이런 결정을 했는지, 이해관계자들이 납득 할 수 있게 설명할 수 있는지


3. Figma Make로 시각화하기

Frame_763 1.png 사용 모델 Claude 4.5 - 기존 HI-FI 제작

기존에는 UX 초안을 바탕으로 Claude에서 빠르게 프로토타입 시안을 제작했습니다. 이 방식은 텍스트로만 개선안을 공유할 때보나 팀 내에서 의견을 빠르게 주고받을 수 있다는 장점과 시각적으로 구현된 화면을 기반으로 “이 흐름이 실제 사용자 여정에 적합한가?”, “우리 제품의 톤앤매너에 어울리는가?”와 같은 논의가 자연스럽게 이어질 수 있었습니다.


다만, 최종 시각화 작업 도구는 Figma였기 때문에 프로토타입 결과물을 다시 Figma로 옮겨야 하는 비효율이 있었습니다.

그러나 최근 Figma 업데이트를 통해 Figma Make에서 제작한 결과물을 디자인 파일로 가져올 수 있게 되면서, 이번에는 프로토타입 제작과 디자인 작업을 모두 Figma 내에서 진행하기로 했습니다.


Figma Make 프로토타입 생성

Claude에게 UX 초안을 기반으로 Figma Make용 프롬프트를 작성할 때 반드시 포함되어야 하는 기술적 제약 사항을 나열하도록 요청했습니다.

Frame_763 1.png Figma Make 프로토타입 생성

이후 Figma Make에서 생성된 프로토타입을 토대로, 사용자가 ‘나와 맞는 제품인지’ 판단할 수 있도록 소음, 가성비, 자극 지점, 외형, 크기 등 핵심 정보의 배치와 시각적 표현 방식에 대해 고민을 이어갔습니다.


4. 디자인 리뷰

AI 활용으로 문서 작성과 시각적 결과물 도출에 필요한 시간이 많이 단축되면서, 디자이너로서 더 많은 시간을 '내가 지금 해결하려는 문제에 대해 깊이 사고하는 힘'과 '디자인이 어떻게 문제를 해결하는지 이해관계자에게 명확히 설명하고 동의를 이끌어내는 커뮤니케이션 역량'을 키우는 데 집중하고 있습니다.

Frame_763 1.png 제품 상세페이지 내 정보 배치 결정하기

제품 상세페이지 내 정보 배치 방식을 결정하는 회의를 진행했습니다.
회의에 앞서, 제 의도를 이해관계자들이 명확히 파악하고 공감할 수 있도록 구조적으로 정리했습니다.

‘➊ 가격 하단 배치’와 ‘➋ 상세정보 섹션 내 배치’ 각각의 장점과 한계는 무엇인가?

두 안 중, 리룸의 디자인 설계 원칙에 더 부합하는 방향은 무엇인가?

를 뒷받침할 정량적·정성적 근거(참고 데이터)는 존재하는가?

최종 결정 시, 사용자 경험 개선 효과뿐 아니라 개발 리소스와 유지보수 효율성까지 종합적으로 검토했는가?




마무리

새로운 AI 툴이 쏟아지듯 등장하다 보니, 단순히 프롬프트를 잘 만드는 것보다 상황에 맞는 툴을 활용할 수 있어야 하고, 전체 워크플로우를 설계하고 유기적으로 연결할 수 있는지가 더욱 중요해진 것 같습니다.



keyword
작가의 이전글사용자에게 Fit 한 정보를 제공하기 위한 여정