그로잉와이즈 · 원장 대시보드 · 홈페이지

디자인코드반응형

같은 회사의 원장 대시보드와 홈페이지를 디자인부터 코드까지 맡았습니다

원장 대시보드 · 블로그 글 발행 흐름

AI가 학원 홍보용 블로그 글을 대신 써 주지만 원장님은 글이 지금 어느 단계인지 알 수 없어 그대로 올려도 되는지 판단하기 어려웠습니다. 글의 단계를 대시보드 맨 위에 보여 주고 마지막 발행만 원장님이 누르도록 흐름을 짰습니다.

문제: AI가 홍보용 블로그 글을 써 주지만 글마다 어느 단계인지 보이지 않아 그대로 올려도 되는지 판단하기 어려웠습니다.
결정: 자동 발행도 전부 다시 검토도 아닌 세 번째 길. 글의 단계를 화면 맨 위에 보여 주고 발행만 원장님이 누릅니다.
결과: AI 작성 중 → 검토 필요 → 승인 → 발행 단계 막대 설계. 4일 만에 대시보드를 6개 화면으로 다시 나누고 공통 UI를 새로 만듦.

원장 대시보드는 로그인이 필요한 서비스라 라이브 화면 대신 상태 설계를 보여드립니다.

문제
협업자가 만든 AI 기능이 학원 홍보용 블로그 글을 대신 써 줍니다. 그런데 원장님 화면에서는 글마다 AI가 아직 쓰는 중인지 · 검토가 필요한지 · 올려도 되는지가 보이지 않아 그대로 올려도 되는지 판단하기 어려웠습니다.
대안 검토
- AI가 쓴 글을 바로 자동 발행원장님 부담은 없지만 틀린 글이 그대로 올라갑니다.
- 원장님이 모든 글을 처음부터 다시 검토안전하지만 AI를 쓰는 의미가 사라집니다.
- 글의 단계를 화면 맨 위에 보여 주고 발행만 원장님이 누르기부담과 위험 사이의 균형점입니다.선택
실행
AI 작성 중 → 검토 필요 → 승인 → 발행 네 단계를 대시보드 맨 위 막대로 보여 주고 단계를 누르면 그 단계의 글만 모아 보이게 했습니다.
4일 만에 원장 대시보드를 6개 화면으로 다시 나누고 버튼 · 입력칸 같은 공통 UI를 새로 만들었습니다. Tailwind v4 @theme 토큰이 의미 토큰을 참조하도록 설계했고 페이지별 스켈레톤과 빈 상태를 함께 정의했습니다.
인터랙션
물방울처럼 일렁이는 AI 비서 버튼을 SVG 필터(feDisplacementMap)로 만들고 누르면 원장님이 AI에게 묻는 대화 창이 열리게 했습니다. 모바일에서는 화면 아래 떠 있는 버튼 막대로 좁은 폭의 조작을 정리했습니다.

랜딩 섹션 19종을 디자인하고 구현했습니다. 스크롤 연출은 GSAP와 Lenis로 만들되 움직임이 내용보다 앞서지 않도록 섹션마다 무엇이 먼저 반응할지를 정했습니다.

녹화PC 폭(1440px)에서 실제 사이트를 녹화한 영상입니다.

실제 배포된 학원와이즈와 마케팅와이즈 랜딩입니다. 폭을 줄이며 섹션이 어떻게 다시 쌓이는지 확인할 수 있습니다.

설계
정지 화면이 아니라 움직이는 상태로 설계했습니다. 스크롤에 따라 헤더를 숨길지 남길지를 정하고 어떤 요소를 먼저 드러낼지와 상태가 바뀔 때 무엇이 먼저 반응할지를 구현 단계에서 함께 판단했습니다.
실행
랜딩 섹션 19종과 GSAP · Lenis 스크롤 연출을 디자인하고 구현했습니다.
연출 판단
섹션별로 무엇을 먼저 움직이고 무엇을 고정했는지 판단 사례를 정리하고 있습니다.