# E&C Slashpage 상담센터형 디자인 적용안

## 1. 사이트 기본 설정

- 사이트 이름: `E&C 질문을 만나다`

- 공개 URL: `https://slashpage.com/enc`

- 대표 문장: `글자로 외운 추상어는 오래 남지 않습니다.`

- 검색 설명: `E&C 감각-어휘 통합 세상읽기. 몸의 감각에서 시작해 감정, 관계, 추상어와 문해력으로 이어지는 학습상담센터 프로그램입니다.`

- 공개/검색: 검색 엔진 공유 켜기, SEO/GEO 메뉴에서 제목과 설명 입력

## 2. 디자인 톤

- 전체 분위기: 상담센터형, 따뜻함, 안정감, 전문성

- 배경: 크림/아이보리 계열

- 포인트 컬러: 딥블루 + 세이지그린 + 클레이오렌지

- 권장 색상값

    - 배경: `#FBF6EE`

    - 본문 카드: `#FFFDF9`

    - 메인 블루: `#236DA8`

    - 딥블루: `#184C73`

    - 세이지그린: `#7D9A7A`

    - 클레이오렌지: `#C27755`

    - 본문 글자: `#241F1B`

    - 보조 글자: `#665C52`

## 3. Slashpage 설정값

- 페이지 폭: 넓게

- 헤더: floating header 켜기

- 사이드바 아이콘: 숨김

- 메뉴 정렬: 오른쪽

- 배경: 아이보리 단색 또는 은은한 그라데이션

- 구분선: 얇게, `#E0D4C6`, solid

- 버튼: 둥근 버튼, 메인 버튼은 딥블루 배경 / 흰색 글자

- 카드: 흰색 또는 아이보리, 둥근 모서리, 약한 그림자 느낌

## 4. 블록 구성 순서

### Hero

- 블록 형태: 넓은 커버/히어로 섹션

- 배경: 크림 → 연한 블루 그라데이션

- 왼쪽: 큰 제목과 CTA 버튼

- 오른쪽: 상담 대화 예시 카드 2개

입력 문구:

```text
E&C 감각-어휘 통합 세상읽기

글자로 외운 추상어는
오래 남지 않습니다.

몸으로 느끼고, 언어로 이해할 때 비로소 아이의 말이 됩니다.
E&C는 아이가 단어를 외우는 것이 아니라 자신의 경험을 언어로 설명하는 힘을 갖도록 돕습니다.
```

버튼:

- `첫 상담 문의하기` → `mailto:eandc.lcc@gmail.com`

- `프로그램 살펴보기` → 아래 배움 흐름 섹션

오른쪽 카드:

```text
before
"몰라요. 그냥 짜증나요."

after
"가슴이 답답해서 화가 난 것 같아요."
```

### 핵심 방향 3카드

3열 카드로 배치:

1. 몸에서 출발합니다

- 아이의 실제 감각과 경험을 먼저 듣습니다.

2. 언어로 정리합니다

- 감정, 상황, 관계를 말로 연결합니다.

3. 문해력으로 이어집니다

- 추상어를 자기 경험과 연결해 이해합니다.

### 소개 섹션

- 제목: `읽기는 되는데, 왜 이해는 어려울까요?`

- 3열 카드:

    - 읽기는 가능하지만 이해는 어렵습니다

    - 감정은 느끼지만 표현은 서툽니다

    - 생각은 있지만 말로 정리하기 어렵습니다

- 강조 박스: 딥블루 배경

강조 문구:

```text
우리는 아이가 단어를 외우는 것이 아니라,
자신만의 언어를 만들어 가도록 돕습니다.
```

### 배움 흐름 섹션

- 블록 형태: 타임라인 또는 번호 카드 4개

- 카드 색상: 흰색 카드, 번호 원형 배지

1. 몸의 감각을 알아차리기

2. 감정을 언어로 표현하기

3. 관계를 이해하는 언어 배우기

4. 추상어와 문해력으로 확장하기

추상어 태그:

```text
배려 · 책임 · 공정 · 존중 · 정의 · 공동체
```

### 과학적 바탕 섹션

- 배경: 아주 연한 블루/아이보리

- 3열 카드:

    - 몸·마음·관계가 함께 자라는 모델

    - 신체화된 인지

    - 메타인지 기반 자기관찰

### 아이에게 생기는 변화 섹션

- 2열 카드:

    - 자신의 상태를 설명할 수 있습니다

    - 감정 표현이 풍부해집니다

    - 글을 이해하는 힘이 깊어집니다

    - 스스로 질문하는 아이가 됩니다

### 철학 섹션

- 블록 형태: 풀폭 강조 배너

- 배경: 딥블루 → 세이지그린 그라데이션

- 제목: `감정과 학습을 따로 보지 않습니다.`

### 문의 섹션

- 블록 형태: CTA 카드

- 제목: `아이의 말이 막히는 지점부터 함께 살펴봅니다.`

- 버튼/링크:

    - Email: `eandc.lcc@gmail.com`

    - Instagram: `https://www.instagram.com/eandc.lcc/`

    - Threads: `https://www.threads.com/@eandc.lcc`

## 5. 바로 참고할 완성 HTML 시안

완성형 상담센터 홈페이지 디자인은 아래 파일에 구현되어 있습니다.

`/Volumes/LEARNING/E&C/04_브랜딩/홈페이지/E&C_상담센터형_홈페이지_시안_2026-06-29.html`

For the site tree, see the [root Markdown](https://slashpage.com/enc.md).