["나의 ESG궁합" 개발 일기] (251112) 아묻따 배포부터 하고 보기

: 피그마로 초벌구이 -> github에 연동 -> 로컬로 clone -> 커서로 편집 -> firebase로 배포

Model
Figma용 'ESG궁합' 앱 UI/UX 디자인 프롬프트
Figma는 UI/UX 디자인 툴이므로, Google Opal과 같은 언어 모델용 프롬프트와는 접근 방식이 다릅니다. Figma를 위한 프롬프트는 주로 **"어떤 화면(스크린)을, 어떤 구성으로, 어떤 요소들을 포함하여 디자인할지"**에 대한 지시와 요구사항을 명확하게 전달하는 데 중점을 둡니다.
아래는 'ESG궁합' 앱의 핵심 화면들에 대한 Figma 디자인 프롬프트입니다.
Figma 디자인 프롬프트: 'ESG궁합' 앱 UI/UX 핵심 화면
[프롬프트 시작]
목표: 'ESG궁합' 앱의 핵심 사용자 여정(User Journey)을 담은 주요 화면들의 UI/UX 디자인 시안을 Figma로 생성합니다. 사용자에게 친근하고 직관적이며, ESG 정보를 재미있게 전달하는 데 초점을 맞춥니다. '사주풀이' 컨셉을 현대적이고 세련된 디자인으로 녹여냅니다.
전반적인 디자인 가이드라인:
톤앤매너: 친근함, 신뢰감, 현대적, 직관적. ESG의 진정성을 담되 너무 무겁지 않게.
색상 팔레트: 그린(환경), 블루(사회), 그레이/골드(지배구조)를 기본으로 하여, 각 영역의 특징을 살리되 전체적인 조화를 이루는 메인 컬러 설정. 포인트 컬러로 따뜻하거나 활기찬 색상 활용.
폰트: 가독성이 높은 모던한 산세리프 폰트.
아이콘: 심플하고 명확하며, 직관적인 벡터 아이콘 사용.
애니메이션 (고려 사항): 화면 전환, 스크롤 시 부드러운 애니메이션 효과 고려.
## 1. 앱 온보딩 (App Onboarding) / 첫 사용자 경험
1.1. 스플래시 화면 (Splash Screen):
요소: 앱 로고 ("ESG궁합"), 앱 슬로건 ("나와 기업의 ESG 케미는?"), 로딩 인디케이터 (선택 사항).
디자인: 로고를 중심으로 심플하고 명확하게. 앱의 아이덴티티를 각인시키는 첫인상.
1.2. 온보딩 인트로 (Onboarding Intro) - 3페이지 슬라이드:
컨셉: 각 페이지마다 명확한 메시지와 시각적 요소로 앱의 가치를 전달. 하단에 페이지 인디케이터 (dots) 및 '다음', '건너뛰기' 버튼.
페이지 1: "ESG, 어렵지 않아요!"
메시지: ESG가 어렵다는 편견을 깨는 메시지.
이미지/일러스트: 복잡한 그래프와 서류들 사이에서 고뇌하는 사람의 모습 → ESG 정보가 심플하게 정리되는 과정.
페이지 2: "기업과의 ESG 궁합을 사주풀이처럼!"
메시지: 앱의 핵심 컨셉(사주풀이 같은 궁합) 강조.
이미지/일러스트: 스마트폰 화면에 재미있게 궁합 결과를 확인하는 밝은 표정의 사람 / 별자리, 운세 등 사주 컨셉을 은유적으로 표현.
페이지 3: "나의 가치관과 맞는 기업을 찾아보세요!"
메시지: 앱 사용의 최종적인 가치(현명한 의사결정) 제시.
이미지/일러스트: 다양한 기업 로고와 사람의 손이 연결되거나, 퍼즐 조각처럼 맞춰지는 모습.
마지막 페이지 버튼: "시작하기" 또는 "내 ESG 궁합 보러가기".
1.3. 회원가입/로그인 (Sign-up/Login):
요소: 소셜 로그인 버튼 (카카오, 네이버, 구글), 이메일 회원가입/로그인 폼, 비밀번호 찾기, 계정 없음/있음 링크.
디자인: 깔끔하고 직관적인 레이아웃.
## 2. 사용자 ESG 가치관 진단 (User ESG Value Assessment)
2.1. 진단 시작 화면:
요소: 진단 시작을 알리는 타이틀 ("나의 ESG 가치관 찾기"), 간단한 설명 ("10분 투자로 나의 ESG 유형을 알아보세요!"), '진단 시작' 버튼.
디자인: 밝고 긍정적인 분위기, 진단 과정에 대한 기대감을 높이는 디자인.
2.2. 설문 화면 (Questionnaire Screen):
요소:
상단 진행률 표시 바 (Progress Bar).
질문 텍스트 (예: "기후 변화에 대응하는 기업의 노력이 얼마나 중요하다고 생각하십니까?").
답변 옵션 (예: 5점 척도 슬라이더 또는 라디오 버튼 - "전혀 중요하지 않다" ~ "매우 중요하다").
'다음' 버튼.
디자인: 각 질문에 집중할 수 있도록 미니멀하게, 진행률 바는 시각적으로 명확하게.
2.3. 내 ESG 프로필 결과 화면:
요소:
메인 타이틀 ("내 ESG 유형은 [유형명]!"), 프로필 사진/아이콘.
'나의 ESG 유형' 카드: 사용자를 대표하는 한 줄 문구 (예: "환경 수호자", "사회 정의 실천가").
E, S, G 영역별 점수 시각화: 원형 차트, 바 차트, 또는 레이더 차트 등으로 각 영역별 점수와 가중치를 명확하게 보여줌. (각 영역별 점수 옆에 해당 영역 아이콘 배치).
'이슈 민감도' 표시: (예: "사회 안전 이슈에 매우 민감한 편").
하단에 '가중치 직접 수정' 버튼 (선택 사항), '기업 궁합 보러가기' 버튼.
디자인: 개인화된 정보임을 강조, 시각적으로 매력적이고 이해하기 쉽게.
## 3. 메인 화면 (Home Screen)
3.1. 홈 피드/대시보드:
요소:
상단: 환영 메시지 ("안녕하세요, [닉네임]님!"), 내 ESG 프로필 요약 정보 (타입, 핵심 가중치).
중앙: '궁합 볼 기업 검색하기' 검색창 (돋보기 아이콘 포함).
하단: '오늘의 ESG 뉴스', '최신 ESG 트렌드' 등 카드 형태의 콘텐츠 블록.
하단 내비게이션 바 (Home, My Compass, ESG Info, My Page).
디자인: 간결하고 사용자가 가장 필요한 기능(검색)에 쉽게 접근할 수 있도록.
## 4. 기업 검색 및 상세 정보 (Company Search & Detail)
4.1. 기업 검색 결과 화면:
요소: 검색창 (뒤로 가기/취소 버튼), 검색어 자동 완성 리스트, 검색 결과 리스트 (기업명, 로고, 간단한 ESG 요약).
디자인: 빠르고 효율적인 검색 경험 제공.
4.2. 기업 상세 정보 화면:
요소:
상단: 기업명, 로고, 산업군.
기업의 전반적인 ESG 등급/점수 (큼지막하게 표시).
기업의 ESG 개요 카드 (간단한 설명).
'궁합 보러가기' 버튼 (CTA).
하단: 기업 관련 주요 ESG 데이터 (예: 탄소 배출량 추이 그래프, 고용 다양성 지표 등).
디자인: 정보 밀도를 높이되, 시각적인 계층 구조를 명확히 하여 읽기 쉽게.
## 5. 기업 ESG 궁합 분석 결과 (Company ESG Match Result)
5.1. 궁합 결과 메인 화면:
요소:
메인 타이틀 ("나와 [기업명]의 ESG 궁합!"), 하단에 '총 궁합 점수' (크고 직관적인 숫자로).
'궁합 유형' 카드: 총 궁합 점수에 따른 한 줄 요약 (예: "천생연분!", "조금 더 알아가야 할 사이", "가치관 불일치!").
영역별 궁합 점수 시각화: E, S, G 각 영역별 점수를 게이지 바, 원형 차트, 또는 별자리/운세 테마의 그래픽으로 표현.
대표 궁합 코멘트: 사주풀이 어조의 핵심 메시지 요약.
하단: '자세한 궁합 풀이 보기' 버튼.
디자인: 재미있고 시각적으로 강렬하게, '사주풀이' 컨셉을 가장 잘 살리는 화면.
5.2. 상세 궁합 풀이 화면:
요소:
상단: [기업명]과 [내 ESG 프로필]의 간략한 정보.
영역별 상세 코멘트 블록 (E, S, G): 각 영역별 타이틀, 사주풀이 스타일의 자세한 코멘트.
핵심: '사회' 영역 코멘트 시, **최근 발생한 주요 부정 이슈(예: "[기업명]의 [사고사례]는 당신의 '사회 안전 민감도'와 큰 불일치를 보일 수 있습니다. 신중한 판단이 필요합니다.")**를 명확하게 포함.
대안 제시 (선택 사항): 부정적 이슈 발생 시, "이슈와 관련된 [대안 기업명]은 어떤가요?" 와 같은 대안을 제시하는 버튼 또는 카드.
기업 ESG 데이터 요약: 궁합 분석에 활용된 주요 데이터 포인트 나열.
하단: '내 궁합 목록에 저장하기', '다른 기업과 비교하기' 버튼.
디자인: 정보 전달에 초점, 하지만 딱딱하지 않게 적절한 일러스트나 아이콘 배치.
## 6. 내 궁합 목록 및 비교 (My Compass List & Comparison)
6.1. 내 궁합 목록 화면:
요소:
상단: 타이틀 ("나의 기업 궁합 기록").
궁합 결과를 저장한 기업 리스트: 각 리스트 아이템에 기업 로고, 기업명, 나와의 총 궁합 점수, 간단한 코멘트.
편집/삭제 기능.
'기업 비교하기' 버튼.
디자인: 깔끔한 리스트뷰, 쉽게 관리할 수 있도록.
6.2. 기업 비교 화면:
요소:
상단: 타이틀 ("기업 궁합 비교하기").
비교할 기업 선택 UI (최대 3개).
선택된 기업들의 로고 및 총 궁합 점수 나란히 표시.
영역별 궁합 점수 비교 차트: (바 차트 또는 레이더 차트)로 시각적 비교.
각 기업의 강점/약점, 주요 코멘트 요약 테이블.
디자인: 여러 기업의 정보를 한눈에 파악할 수 있도록 효율적인 레이아웃.
## 7. ESG 정보 및 트렌드 (ESG Info & Trends)
7.1. ESG 뉴스 피드:
요소: 뉴스 리스트 (썸네일 이미지, 제목, 언론사, 발행일), '더 보기' 기능.
디자인: 깔끔한 카드형 뉴스 리스트.
7.2. ESG 용어 사전:
요소: 검색창, 초성별/가나다순 용어 리스트, 용어 클릭 시 상세 설명 팝업/화면.
디자인: 사용자가 쉽게 용어를 찾고 이해할 수 있도록.
## 8. 하단 내비게이션 바 (Bottom Navigation Bar)
요소: 홈, 내 궁합, ESG 정보, 마이페이지 (각 메뉴에 직관적인 아이콘 사용).
디자인: 현재 활성화된 메뉴 시각적으로 강조.

<18기에서 배포하는 법 배운 내용>

https://firebase.google.com/?hl=ko
 - FIREBASE로 -> 콘솔로 이동 -> 프로젝트 만들기 -> 프로젝트 고유 식별자 나옴 -> 2차 도메인임 -> FIRESTOREBASE많이 씀 -> 프로젝트 개요 -> 프로젝트 설정 -> 작업한 후 CURSOR에서 작업할 예정 -> 프로젝트에 앱이 없습니다 라고 나올거임 -> 우리는 웹선택 -> 코드복사 - > CURSOR 한테 이거 보고 만들어줘라고 하면 됨 -> CURSOR로 가서 배포해달라고 에이전트한테 요청 " 지금 프로젝트를 FIREBASE에 배포할거야. FIREBASE 초기화와 빌드해야되는지 확인하고 필요하면 그 작업부터 해야돼. 아래 정보를 참고해." -> 뭔가 돌아갈텐데 Y해주고 -> "이제 FIREBASE에서 배포할거야. 프로젝트 ID는 STORY-LINGO-OJI로 배포해줘." -> 퍼플릭 디렉토리는 DIST 입력 -> 싱글페이지 앱 Y -> GITHUB N -> OVERWRITE Y -> 안되면 스크린샷을 떠서 -> 커서한테 안된다고 하기  -> 그래도 안되면 크롬 - 도구더보기 - 콘솔에 있는 내용 복사해서 같이 CURSOR에게 전달 -> EX) "이거 PUBLIC이야? DIST 아니야?" -> "다시 배포해줘" -> DEPLOY COMPLETE! -> 도메인 연결하기 위해 FIREBASE 오면 -> HOSTING -> 사이트 관리 -> 도메인 -> 커스텀 도메인 추가 -> 구매한 도메인 붙여넣기 -> 가비아가서 내가 이 도메인 주인인거를 알려줘야함. -> 가비아 - DNS툴 - 설정 - 레코드 수정 - FIREBASE에 보이는 레코드를 그대로 복사해넣기 : 호스트는 디폴트값이 @ -> TXT도 추가 -> 저장 -> 한 30분 뒤에 다시 확인하기