[FrontEnd] 서비스 디자인 컨셉 및 UI 레이아웃 확정

[chaehun0i]

배경

• 전문 ESG 플랫폼으로서 신뢰감 있는 UI/UX 정체성 확립 필요.
• 게이트 페이지, 로그인, 대시보드 레이아웃의 표준화를 통한 개발 효율성 제고.

검토안

• 안건 A: 기후금융연구소 및 HBGR 등 유관 레퍼런스 분석 기반의 게이트 페이지(첫 화면) 구성안.
• 안건 B: 안건 A의 디자인 톤을 유지하며, 로그인 페이지 및 메인 대시보드는 FE 팀 내 의견 조율을 통해 확정한 커스텀 레이아웃 및 상세 기능.

최종 결정

• 컬러 시스템: Discussion #12 가이드를 준수한 네이버 그린(#00C73C) 포인트 활용.

• 페이지별 세부 구성 및 기능:

  • Gate Page (첫 화면):
    • 비주얼 컨셉: 배경에 간단한 3D 이미지를 도입하여 입체감 있는 UI 구현.
    • 구조: 좌/우 분할 레이아웃.
    • 좌측: 프로젝트 소개 및 설명 (슬라이드 형태).
    • 우측: 각 팀별 서비스 설명 → 상세설명 팝업 구현 및 로그인 페이지 진입 버튼.
  • Login Page: 서비스 정체성을 유지하는 간결한 폼(Form) 중심 레이아웃 (FE 내부 협의안).
  • Main Dashboard (공통 레이아웃):
    • Header (상단): * 우측 유저 정보(이채훈(소속회사)) 표시 및 클릭 시 마이페이지 이동.
      • 마이페이지 / 로그아웃 버튼 배치.
      • 푸시알림 아이콘: 알림 존재 시 점(Dot) 표시, 클릭 시 우측 사이드바가 펼쳐지며 알림 목록 노출(삭제 가능).
    • LEFT (사이드바): * 상단: 로고(WITH) 배치.
      • 메뉴 구성: 1팀 / 2팀 / 3팀 / 로그 페이지 / ESG 관리자 페이지(초대, 권한부여).

• 로고 정책:

  • 첫 페이지(Gate Page) 헤더에 배치하되, 배경 이미지에 따라 변동 가능.
  • 현재 로고 미확정 상태로 추후 로고 생성 시 배경과의 정합성을 최종 확인하여 적용함.

결정 사유

• 레퍼런스 분석 및 FE 내부 기술 검토 결과, ESG 플랫폼의 전문성과 운영 편의성(알림/관리자 기능)을 동시에 제공하기에 가장 적합한 구조임.
• 기존 브랜드 가이드(Discussion #12)와의 시각적 통일성 유지.

영향 범위

• FE / BE @choiyc05 / 문서 @frankie516c

담당자

• @x2bjvhmmwg-gif , @agii990114-ctrl , @frydaynar

결정일

• 2026-04-22

[frankie516c]

전체적인 UI 레이아웃이랑 컬러 시스템 정리가 명확해서 시각적인 이해가 잘 됩니다.

다만, 이 디자인 확정이 BE의 API 설계(예: 마이페이지 유저 정보, 알림 목록 등)에 어떤 데이터 요청을 발생시키는지 연결하는 내용이 있으면 나중에 BE팀과 똑같은 내용으로 논의할 여지를 막을 수 있다고 생각합니다. 해당 내용은 '핵심 데이터 규격'으로 '최종 결정'에 올리면 좋을 것 같습니다.

추가로, '영향 범위'에 'FE / BE / 문서' 모두 해당된다고 생각합니다. 이와 관련하여 각 팀 별 대표자를 태그해주시면 됩니다.

감사합니다.

[chaehun0i]

영향 범위에 말씀 해주신 것 처럼 FE / BE / 문서 추가 후 각 팀 대표자 태그 완료 했습니다.

[leeej9801-max]

디자인 수정 요청안

1. 온보딩 페이지 (1순위)

• 이슈 그룹이 단일 지표에 1대1 매칭이 되는 것이 아닌 이슈 그룹이 병합된 형식으로 지표가 붙는 구조 (테이블을 이슈 그룹으로 묶어서 위에 탭으로
  구성 하는게 좋을 듯 합니다

2. 담당자 초대 (2순위)

• 담당자 지정 시 하나의 이슈 그룹안에 여러 사람이 담당할 수 있도록 초대 기능 ui 추가
• 온보딩 페이지 이슈그룹에도 담당자를 초대할 수 있는 버튼 희망 (직관성 및 담당 R&R 식별을 위해)

3. 메인 화면 (3순위)

• 메인화면에서 현재 서비스 프로젝트 별 진행 중 / 완료 목록을 볼 수 있도록 하는것이 어떨까 싶습니다.