dream-interpretation-pages/about.html at main · KIM3310/dream-interpretation-pages · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="달빛해몽소의 해몽 기준과 이용 원칙을 안내합니다." />
    <meta name="google-adsense-account" content="ca-pub-4973160293737562" />
    <meta name="theme-color" content="#f7f2e8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="manifest" href="/site.webmanifest" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&family=Noto+Serif+KR:wght@600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/src/style.css" />
    <title>소개 | 달빛해몽소</title>
  </head>
  <body class="subpage-body">
    <main class="legal-page">
      <header class="legal-header">
        <a class="legal-brand" href="/">
          <span class="brand-mark">月</span>
          <span>
            <strong>달빛해몽소</strong>
            <small>About the project</small>
          </span>
        </a>
        <nav class="legal-nav" aria-label="보조 메뉴">
          <a href="/">홈</a>
          <a href="/symbols">상징 모음</a>
          <a href="/privacy">개인정보</a>
          <a href="/contact">문의</a>
        </nav>
      </header>

      <section class="legal-hero">
        <p class="eyebrow">About</p>
        <h1>미래를 단정하기보다<br />지금의 감정과 맥락을 살펴봅니다.</h1>
        <p>
          달빛해몽소는 꿈을 단순한 운세 콘텐츠로 소비하기보다, 최근 감정 상태와 삶의 맥락을
          함께 읽어보는 참고 도구로 설계되었습니다. OpenAI API는 서버측에서만 호출하고,
          결과는 행동 가능한 문장 중심으로 정리합니다.
        </p>
      </section>

      <section class="legal-grid">
        <article class="legal-card">
          <h2>해석 원칙</h2>
          <ul>
            <li>길몽/흉몽 단정 대신 상징과 감정 패턴을 설명합니다.</li>
            <li>의료, 투자, 법률 판단을 대신하지 않습니다.</li>
            <li>짧고 자극적인 문구보다 실제 참고 가능한 카피를 우선합니다.</li>
          </ul>
        </article>

        <article class="legal-card">
          <h2>어떻게 해석하나요?</h2>
          <p>
            같은 상징도 꿈속 감정과 최근 상황에 따라 의미가 달라질 수 있습니다. 장면, 감정, 현실 맥락을
            함께 살피되 미래를 단정하지 않고 스스로 돌아볼 질문을 제안합니다.
          </p>
        </article>

        <article class="legal-card">
          <h2>기술 구조</h2>
          <ul>
            <li>프런트엔드: Vite + Vanilla TypeScript</li>
            <li>배포: Cloudflare Pages</li>
            <li>서버 API: Pages Functions</li>
            <li>모델 호출: OpenAI API, 서버 환경변수 사용</li>
          </ul>
        </article>
      </section>

      <footer class="legal-footer">
        <p>꿈 해석은 정답을 맞히는 일이 아니라 지금의 감정과 생각을 천천히 들여다보는 과정입니다.</p>
        <nav class="legal-nav">
          <a href="/">홈</a>
          <a href="/privacy">개인정보</a>
          <a href="/contact">문의</a>
        </nav>
      </footer>
    </main>
  </body>
</html>