서비스 관리용 콘솔 앱 디자인 리뉴얼기 – Stitch AI와 함께한 UI 개편 과정

서론

이번 포스팅에서는 최근 진행했던 콘솔 앱 디자인 리뉴얼 과정을 정리해보려 한다.

 

 

---

 

진행계기

이 콘솔 앱은 운영 중인 서비스의 정상 동작 여부를 확인하고, 서버 및 DB 긴급 재시작, 신규/접속 유저 수 파악, 점검 메시지 등록, 유저 대상 우편 발송 등 다양한 관리 기능을 제공하고 있었다.

원래는 데스크톱 환경에서 처리하는 작업이지만, 실시간으로 확인해야 하는 정보와 긴급하게 대응해야 할 상황이 많아 스마트폰에서도 제어할 수 있도록 직접 앱을 만들었다.

 

하지만 초반에는 기능 구현에만 집중하다 보니 단순 나열식의 투박한 UI가 만들어졌다.

사용하다 보니 예상보다 자주 마주하게 되었고, 장기적으로 관리 효율을 높이려면 좀 더 보기 좋은 화면이 필요하다고 느꼈다. 그래서 리뉴얼을 결심하게 됐다.

 

 

 

진행 과정

처음에는 ChatGPT에 현재 앱의 레이아웃 코드를 공유하고,

이를 더 깔끔하고 모던한 디자인으로 바꿔달라고 요청하며 UI 개선을 시도했다.

 

그러자 다음과 같은 결과물이 나왔다.

이전보다 카드식 레이아웃으로 조금 나아 보이긴 했지만,

불필요한 여백이 많아 오히려 기존의 밀도 높은 화면보다 낫다고는 느껴지지 않았다.

(여러 번 요청을 반복했지만 큰 변화를 얻기는 어려웠다.)

 

그래서 다른 접근을 택했다. Stitch라는 UI 자동 생성 서비스를 활용하기 위해,

ChatGPT에게 Stitch에 넣을 최적의 프롬프트를 부탁했고, 답변으로 준 프롬프트를 그대로 Stitch에 붙여넣었다.

 

 

그러자 아래처럼 확실히 만족스러운, 모던한 디자인이 나왔다.

(역시 디자인 생성 전문 서비스라 그런지 다르다.)

 

이 디자인을 실제 앱에 반영하기 위해 각 영역별 단계적으로

신규/기존 화면을 각각 캡쳐하고 현재 레이아웃 코드를 함께 전달하여,

ChatGPT에 세부 수정 요청을 진행했다.

 

 

그 결과 UI를 단계적으로 개선할 수 있었고, 마침내 모든 화면을 리뉴얼 완료할 수 있었다.

 

 

추가로, 기존의 못생긴 리프레시 버튼은 제거하고

화면 최상단에서 아래로 스와이프하면 자동으로 새로고침되도록 개선했다.

 

이제 훨씬 세련되고 깔끔한 UI가 완성되었고, 덕분에 관리 콘솔을 열 때마다 만족감이 커졌다.

 

결론

이번 과정을 통해 AI가 단순한 개발 보조를 넘어, 실제로 작업 효율과 결과물의 완성도를 크게 높여줄 수 있음을 다시 체감했다.

 

예전에는 서비스 구현 시 이미지 리소스를 찾거나 직접 제작하느라 시간을 많이 썼지만, 이제는 생성형 AI 덕분에 디자인과 구현 모두에서 훨씬 가볍게 접근할 수 있다.

 

만약 개인적으로 디자인 역량이 부족했다면 이 정도 UI를 만들기 위해 디자이너에게 의뢰하거나 수많은 시행착오를 겪어야 했을 것이다. 하지만 LLM과 같은 AI 도구 덕분에 사실상 제로에 가까운 비용으로 디자이너의 시안을 받은 듯한 결과물을 얻고, 곧바로 코드에 반영할 수 있었다는 점이 특히 인상 깊었다.

 

앞으로는 변화하는 환경 속에서 AI를 얼마나 잘 활용하느냐가 곧 개인의 생산성과 경쟁력으로 이어질 것이다. 이번 리뉴얼 경험은 그 가능성을 직접 확인한 작은 사례였지만, 앞으로의 작업 방식 전반에 큰 영감을 주는 계기가 되었다.