라이트하우스 FE 리뷰 가이드
광고대행사와 광고주가 타겟인 마케팅 성과 분석 웹앱입니다. 화면 구조, 핵심 유저 플로우 여섯 개, 공용 컴포넌트, 디자인 토큰을 한곳에 모았습니다. 화면마다 실제 해당 화면에 해당하는 링크를 걸어 두었으니 직접 확인 가능합니다. 운영자 콘솔 화면은 라이트에이아이 내부 직원만 쓰는 화면이므로 고객 화면 위주로 봐주시면 감사하겠습니다.
권한이 적을수록 보이는 화면이 줄어드는 구조라, 모든 화면은 최상위 권한자 기준으로 담았습니다. 스크린샷은 더미 데이터 기준 화면입니다.
세로 GNB + 세로 LNB
왼쪽 끝 GNB에서 도메인을 고르고, 그 옆 LNB가 도메인 안의 메뉴를 보여 줍니다. 데이터 관리 · 성과 분석 · 소재 운영(이하 브랜드 도메인)에서 보이는 데이터는 브랜드 단위 각각마다 달라지는 화면이고, 조직 관리 · 운영자 콘솔은 클라이언트가 속한 조직 전체 설정 화면입니다.
| 도메인(GNB) | 메뉴 |
|---|---|
| 데이터 관리 | 매체 API 연동 · 데이터 수동 업로드 · 데이터 수집 현황 · 원본 데이터 다운로드 |
| 성과 분석 | 보고서 조회 · 보고서 생성 · 라이브 대시보드 · YouTube 성과 · 프로모션 캘린더 · 목표 및 수수료 설정 · MCP 서비스 · 메신저 알림 · 월간 미디어믹스 · AI 프레젠테이션(준비 중) |
| 소재 운영 | 소재 시안 제작 · 광고 라이브러리 · 배너 리사이징 · Ready-Made 소재 제작 · Brainstorming 소재 제작 · 마이페이지 |
| 조직 관리 | 멤버(멤버 · 게스트 · 팀 탭) · 승인함 · 변경 이력 · 광고주 관리 · 승인 정책 · 역할 관리 + "계정 구조" 트리 |
| 운영자 콘솔 | 테넌트 · 사용자 · 저장 공간 · 워크플로우 · 피처 플래그 · 운영자 감사 |
브랜드 메뉴는 그 브랜드의 피처 플래그(19개)가 켜져 있을 때만 LNB에 나옵니다. 꺼진 메뉴는 회색으로 남지 않고 아예 빠집니다.
모든 화면이 같은 공통 레이아웃을 씁니다
성과 분석 › 보고서 조회 화면입니다. GNB 64px, LNB 256px(접으면 60px), 헤더 56px, 콘텐츠 영역 최대 폭 1184px, 콘텐츠 영역 좌우 여백 32px입니다.
- 1앱 로고홈(첫 도메인 첫 메뉴)으로 갑니다. 로그인 직후 랜딩과 같은 규칙을 따릅니다. (별도 홈 화면은 없음)
- 2GNB현재 도메인은 흰 바탕으로 표시합니다.
- 3브랜드 드롭다운브랜드 도메인에서만 보입니다. 브랜드를 바꿔도 보던 화면에 그대로 머뭅니다.
- 4LNB 메뉴도메인 안의 메뉴 목록. 피처 플래그가 꺼졌거나 권한이 없는 메뉴는 빠집니다.
- 5LNB 접기접은 상태는 사용자별로 기억합니다(S4).
- 6브레드크럼브랜드 도메인은 브랜드 타일부터 시작하고, 현재 페이지 타이틀이 마지막에 옵니다.
- 7언어 메뉴한국어 · 영어 · 일본어.
- 8프로필 메뉴내 계정 · 도움말 · 회사 정보 · 로그아웃(S3).
- 9타이틀 영역제목과 메인 CTA. Primary 버튼은 한 화면에 하나만 둡니다.
- 10검색·필터 영역검색과 점선 필터 버튼, 오른쪽에 건수 · 정렬 기준.
- 11테이블과 페이지네이션테이블 아래에 페이지당 개수 · 페이지 이동.
브랜드 드롭다운 · 프로필 메뉴 · LNB 접기
공통 레이아웃에서 열고 닫는 부속입니다. 어느 화면에서나 같은 자리에 같은 모양으로 나옵니다.
보고서 생성 및 확인
일간 · MTD · 월 마감 · 대시보드 네 종류의 보고서가 있습니다. 보고서 생성은 데이터 집계 및 LLM 분석 과정을 거치기에 시간이 조금 걸립니다.
- A1
보고서 조회
다라세제 보고서 목록으로, 안읽음 뱃지와 필터·테이블이 보입니다.
- A2
보고서 생성
보고서 생성 화면으로, 보고서 종류와 기준일을 고르는 첫 상태입니다.
- A3
예산 및 목표 설정 팝업
보고서 생성 화면에서 연 예산 및 목표 설정 팝업입니다.
- A4
보고서 본문
공유 링크로 연 MTD 보고서 본문의 첫 화면입니다.
- A5
목표 및 수수료 설정
목표 및 수수료 설정으로, 월 목표 테이블과 수수료 타임라인을 고칠 수 있습니다.
데이터 연동 상태를 관리합니다
API로 연결하는 매체, 엑셀로 데이터를 수동 업로드 하는 매체가 섞여 있고, 수집 현황에서 수집 여부를 확인합니다.
- B1
매체 API 연동
매체 API 연동 목록으로, 매체별 연결 수와 연결 전 상태가 보입니다.
- B2
연결 추가
연결 전 매체(Criteo)를 눌러 연 연결 추가 팝업의 첫 스텝(계정 로그인)입니다.
- B3
데이터 수동 업로드
데이터 수동 업로드 화면입니다.
- B4
데이터 수집 현황
데이터 수집 현황으로, 매체별 30일 수집 그리드와 수집 알림 목록이 보입니다.
사람을 초대하고 권한을 부여합니다
권한은 "누구에게 · 어떤 역할을 · 어느 브랜드에 · 언제까지"의 조합입니다. 범위는 조직 전체 › 광고주 › 브랜드 › 프로젝트 트리(예시, 계층 구조는 유동적임. ex. 브랜드 단일 계층만 존재)이고, 정책상 승인권자의 승인이 필요한 행위는 승인함으로 보내집니다.
- C1
멤버
멤버 목록입니다.
- C2
멤버 초대
멤버 초대 화면에 초대할 대상 이메일과 부여될 역할·접근 가능 브랜드를 설정한 상태입니다.
- C3
권한 관리 팝업
멤버 한 명의 권한 관리 모달. 부여된 권한 목록이 보입니다.
- C4
승인함
승인권자 입장에선 대기 중인 승인 요청 목록이, 요청자 입장에선 본인이 올린 승인 요청 목록이 보입니다.
- C5
변경 이력
조직 관리자만 확인 가능한 시스템 로그입니다.
- C6
광고주 관리
리소스 계층 관리 트리로, 데이터 수집 플랫폼 연결 상태가 보입니다.
- C7
팀 상세
팀 상세 화면으로, 구성원과 받은 권한이 보입니다. 팀 권한 부여 정책이 꺼진 조직은 구성원 pane만 보입니다.
고객 조직을 프로비저닝합니다
운영사 직원만 쓰는 콘솔입니다. 고객 조직(테넌트)을 만들고, 브랜드 노드에 데이터 마트를 연결하고, 피처 플래그를 컨트롤 합니다. 모든 쓰기는 운영자 감사에 남습니다.
- D1
테넌트 목록
운영자 콘솔의 테넌트 목록입니다.
- D2
테넌트 만들기
테넌트 만들기 페이지의 빈 입력 상태입니다.
- D3
테넌트 상세
샘플 에이전시 테넌트 상세로, 구성원·트리·브랜드·저장 공간 카드가 보입니다.
- D4
노드에 마트 연결
테넌트 상세 트리 카드에서 노드 마트 slug 를 고치는 중인 상태입니다.
- D5
운영자 감사
운영자 감사 로그로, 허용·거부 행이 섞여 보입니다.
- D6
피처 플래그
피처 플래그 화면에서 샘플 에이전시를 골라 테넌트 기본값과 노드 값이 보이는 상태입니다.
메신저로 성과 알림을 받습니다
정해진 시각에 성과를 보내는 정기 알림과, 지표가 기준을 벗어나면 보내는 이슈 알림을 Slack · Microsoft Teams로 받습니다. 수신처 · 일정 · 지표 · 비교 기준을 고르고, AI 분석 문구를 미리 볼 수 있습니다.
- E1
정기 알림 만들기
신규 정기 알림 만들기 페이지입니다.
월간 미디어믹스를 계산하고 결과를 확인합니다 (개발 중)
머신러닝을 통한 미디어믹스 최적화 연산 수행 및 결과 확인 화면입니다.
- F1
실행과 실행 기록
월간 미디어믹스 첫 화면으로, 실행 폼과 지난 실행 기록이 보입니다.
- F2
계산 결과
월간 미디어믹스 실행 기록 중 완료된 결과 화면입니다.
"없음"과 "막힘"
브랜드에 허용되지 않은 것(미개통), 권한이 없는 것(403), 데이터가 0건인 것(빈 화면), 불러오지 못한 것을 다른 화면으로 그립니다.
모든 화면이 공통 스타일 클래스만 씁니다
컴포넌트는 src/styles/components.css 한 파일에 클래스로 정의되어 있고, 화면은 이 클래스만을 조합합니다. 본문 글꼴은 Pretendard입니다.
버튼
.btn + .btn-primary / -secondary / -ghost / -danger / -danger-soft / -link · .btn-sm / -lg / -iconPrimary 버튼은 한 화면에 하나만 둡니다. 되돌릴 수 없는 동작은 danger, 목록 안 회수처럼 가벼운 위험은 danger-soft를 씁니다.
뱃지 · 칩 · 카운트 · 아바타
.badge-{info,success,warning,danger,pending,muted,new,outline,dashed} · .badge-dot · .chip · .count · .avatar.c1~c6상태색은 의미별로 하나씩: 정보 파랑, 성공 초록, 경고 호박색, 위험 빨강, 승인 대기 자두색, 비활성 회색.
배너
.banner + .banner-{info,success,warning,danger,pending,muted} · .b-title / .b-body / .b-actions폼 요소
.field · .label · .input · .select · .hint / .hint-error · .input-error · .checkbox · .radio · .switch(.on)탭 · 세그먼트
.tabs > button[aria-selected] · .seg > button[aria-pressed] · .n테이블
.table-wrap · .data-table · th.sortable / .sorted · td.num · tr.is-unread / .is-archived| 이름 | 역할 | 권한 범위 | 만료 |
|---|---|---|---|
| 이준호 | 사용자 | 다라세제 다라섬유 | — |
| 한나 최 | 광고주 열람자 게스트 | 다라생활 | 11.17 |
| 가나에너지 메이트 | — | — | 아카이브 |
모달
.modal(-sm / -lg / -xl) · .modal-head(h2, .m-desc) · .modal-body · .modal-foot실제 앱에서는 딤(.scrim) 위에 뜹니다. 모달과 페이지를 고르는 기준은 docs/modal-page-principles.md에 있습니다.
권한을 회수할까요?
이준호가 다라세제에서 받은 사용자 권한을 회수합니다.
토스트
.toast-{success,info,warning,danger} · .t-dot약 2.6초 뒤 사라집니다. 화면 이동으로 닫히지 않습니다.
KPI
.kpi-grid · .kpi · .k-label / .k-value / .k-delta · .delta-up / -down / -flat디자인 시스템 Harbor
기존 Laighthouse 디자인 시스템의 컬러 팔레트를 계승합니다. 경고(amber)는 위험(red)과 분리했습니다. 정의는 src/styles/tokens.css에 있고, 아래 예시는 그 변수를 그대로 읽어 그립니다.
컬러 팔레트
--{ink,blue,red,green,amber,purple,plum}-{50…950}시맨틱 토큰
배경
--bg-canvas--bg-surface--bg-sunken--bg-rail--bg-selected--bg-hover글자
--fg-primary--fg-secondary--fg-tertiary--fg-placeholder--fg-link--fg-on-rail-active보더 · 액션
--border-subtle--border-default--border-strong--border-focus--action-primary--action-danger상태
--state-info-bg--state-success-bg--state-warning-bg--state-danger-bg--state-pending-bg--state-muted-bg타이포그래피 스케일
--fs-* / --lh-* · 본문 Pretendard, 숫자 강조 Space Grotesk, 코드 JetBrains Mono--fs-4xl
/ --fs-3xl
/ --fs-2xl
/ --fs-xl
/ --fs-lg
/ --fs-md
/ --fs-base
/ --fs-sm
/ --fs-xs
/ 스페이싱
--sp-*라운드 · 섀도우
--r-* · --sh-*레이아웃 상수와 움직임
| 상수 | 값 | 쓰는 곳 |
|---|---|---|
| --rail-w | 64px | GNB |
| --sidebar-w / -collapsed | 256px / 60px | LNB 펼침 · 접힘 |
| --topbar-h | 56px | 헤더 |
| --content-max | 1184px | 콘텐츠 영역 최대 폭(넓은 화면은 전폭) |
| --content-pad | 32px | 콘텐츠 영역 좌우 여백(AI 패널이 열리면 24px) |
| --ai-panel-w | 372px | AI 제안 패널 — 콘텐츠 영역을 밀어냅니다 |
| --app-min-w | 1440px | 앱 최소 폭(더 좁으면 가로 스크롤) |
| --dur-fast / --dur / --dur-slow | 120 / 180 / 260ms | 움직임. 감속 모션 설정이면 0 |
의견을 듣고 싶은 부분
전반적인 리뷰 외에 별도로 준비한 질문사항입니다.
- 공통 레이아웃 구조GNB + LNB 두 단이 현재 메뉴 구조를 표현하는 데 알맞는지. GNB 라벨 크기(S1).
- 로그인 화면텍스트와 버튼 배치.
- 모달로 둘지 페이지로 둘지의 기준메뉴 목적지 · 공유할 상세 화면 · 다른 화면을 보며 결정할 작업(ex. 승인 요청 검토)은 페이지로, 지금 화면에서 시작해 돌아오는 짧은 작업(ex. 멤버 초대)은 모달(한 열 · 단계 셋까지)로 둡니다. 이 기준과 지금의 나눔(모달: C2 · C3 · A3, 페이지: D2 · A5)이 적절한지.
- 예산 및 목표 수치 입력 화면의 이원화보고서 생성의 "예산 및 목표 설정" 팝업(A3)과 "목표 및 수수료 설정" 페이지(A5)가 따로 있습니다. 하나로 모으는 편이 나을지.