소개
기존에 개발해두었던 서비스의 프론트엔드 디자인이 전반적으로 만족스럽지 않았습니다. 전체적인 톤앤매너가 모호하였으며, 특히 랜딩페이지가 존재하지 않는 구조라는 점이 지속적으로 아쉬움으로 남아 있었습니다.
리디자인의 필요성은 분명하였으나,
어디서부터 개선을 시작해야 할지 판단하기 어려웠고
랜딩페이지를 어떤 구조와 메시지로 구성해야 할지도 명확하지 않았습니다.
이러한 상황에서 멀티에이전트 중 프론트엔드 디자인 에이전트를 직접 구성하여 테스트해보는 실험을 진행하였습니다. 처음에는 가능성을 가볍게 확인해보고자 하는 목적의 시도였습니다.
진행 방법
1️⃣ 프론트엔드 디자인 에이전트 구성
Claude Code 기반으로 프론트엔드 디자인 전용 에이전트를 구성하였습니다.
역할은 서비스 전반의 UI/UX 방향성과 디자인 톤을 제안하는 것이었습니다.
초기에는 "테스트 차원에서 랜딩페이지 하나를 만들어보자"는 정도의 기대를 가지고 작업을 시작하였습니다.
2️⃣ 랜딩페이지 디자인 요청
기존 서비스에 존재하지 않던 랜딩페이지 디자인을 우선적으로 요청하였습니다.
서비스의 핵심 가치와 사용 흐름이 자연스럽게 드러나도록 지시하였습니다.
프롬프트는 비교 적 상세하게 조정하였습니다.
서비스의 성격과 타겟 사용자에 대한 설명
상업적인 SaaS 서비스에 가까운 인상 강조
컬러 톤과 전반적인 분위기 방향성 명시
그 결과, 초기 기대를 넘어서는 수준의 결과물이 도출되었습니다.
3️⃣ 전체 페이지 및 모달 리디자인 확장
랜딩페이지 결과를 확인한 이후, 동일한 톤앤매너를 전체 서비스에 확장해보기로 결정하였습니다.
이에 따라 다음 영역들에 대한 리디자인을 요청하였습니다.
메인 페이지
레시피 리스트 화면
레시피 상세 페이지
로그인 / 회원가입 모달
기타 서비스 내 주요 모달 UI
요청의 핵심은 "모든 페이지와 모달을 하나의 일관된 디자인 톤으로 통합해달라"는 것이었습니다.
Before / After 스크린샷 기준 정리
아래 내용은 첨부된 스크린샷을 기준으로, 리디자인 전후의 변화를 정리한 것입니다.
📌 랜딩페이지
Before: 랜딩페이지가 존재하지 않아, 서비스의 목적과 가치를 처음 접하는 사용자에게 전달하기 어려운 구조였습니다.
After: 서비스의 핵심 메시지, 주요 기능, 사용 흐름이 한 화면에서 자연스럽게 이해될 수 있도록 구성되었습니다.
첫 진입 시 서비스 성격이 명확해졌으며
상업적인 SaaS 서비스와 유사한 인상을 주기 시작하였습니다.
📌 메인 / 리스트 페이지
Before: 기능 중심의 나열형 UI로 구성되어 있어 정보의 우선순위가 명확하지 않았습니다.
After: 콘텐츠 간 위계가 정리되었으며, 여백과 정렬을 통해 화면이 훨씬 안정적으로 보이도록 개선되었습니다.
📌 상세 페이지
Before: 필요한 정보는 모두 제공되고 있었으나, 한눈에 들어오지 않는 구조였습니다.
After: 주요 정보와 보조 정보가 시각적으로 분리되면서 사용자가 흐름에 따라 자연스럽게 읽을 수 있는 구조로 변경되었습니다.
📌 모달 (로그인 / 회원가입 등)
Before: 기능적으로는 정상 동작하였으나, 서비스 전체 톤과는 다소 이질적인 인상을 주고 있었습니다.
After: 전체 페이지와 동일한 디자인 언어를 적용함으로써 서비스의 일관성이 크게 개선되었습니다.
결과와 배운 점
결과
기존에 직접 구성했던 디자인보다 전반적으로 완성도 높은 결과를 확인할 수 있었습니다.
서비스의 인상이
개인 프로젝트 수준에서
상업적인 서비스에 가까운 형태로 점진적으로 변화하기 시작하였습니다.
물론 즉시 배포가 가능한 수준은 아니었으며,
세부적인 간격 조정
카피 문구 개선
인터랙션 디테일 보완 등의 작업은 추가적으로 필요하다고 판단하였습니다.
그럼에도 불구하고 프론트엔드 디자인 에이전트를 통해 리디자인의 방향성과 초안 수준의 결과물을 충분히 확보할 수 있었다는 점은 인상 깊은 부분이었습니다.
배운 점
디자인 방향 설정이 막막한 상황에서 에이전트는 매우 유용한 출발점이 될 수 있음을 확인하였습니다.
결과물의 품질은 프롬프트의 구체성과 밀접한 연관이 있었습니다.
프롬프트를 지속적으로 고도화한다면 더 높은 완성도의 디자인 결과를 기대할 수 있을 것으로 판단됩니다.
마무리하며
이번 경험을 통해 얻은 가장 중요한 인사이트는 다음과 같습니다.
에이전트를 활용하는 것만으로도 서비스 리디자인의 상당 부분을 진행할 수 있습니다.
디자인 리소스나 방향 설정이 부담스러운 상황에서,
처음부터 높은 완성도를 목표로 하기보다는
에이전트를 활용하여 초안을 빠르게 확보하는 접근 방식 역시 충분히 실용적이라고 판단하였습니다.
다음 단계에서는
프롬프트 고도화
디자인 시스템 정리
실제 사용자 반응을 기반으로 한 개선 등을 추가로 진행할 계획입니다.
