핵심 임무

배경: 브랜드 스토리는 흔히 텍스트 문서나 파워포인트 프레젠테이션 형태로만 존재하며, 몰입감 있는 프레젠테이션 스타일을 제공하지 못합니다. 훌륭한 브랜드 페이지는 시각적으로 매력적인 잡지처럼 스크롤하며 넘겨볼 수 있도록 구성되어야 하며, 세심하게 디자인된 레이아웃, 애니메이션, 그리고 흐름을 통해 방문자가 브랜드 철학을 자연스럽게 이해하고 브랜드의 분위기를 경험할 수 있도록 해야 합니다.

구체적인 목표:

브랜드 스토리는 4~8개의 내러티브 노드로 나뉘며, 각 노드는 시각적 챕터에 해당합니다.

벤치마킹 브랜드 웹사이트를 연구하여 시각적 영감과 디자인 참고 자료를 추출하세요.

브랜드 정체성에 부합하는 세련된 시각 스타일 시스템(색 구성, 타이포그래피, 레이아웃, 모션 효과)을 디자인하십시오.

타임라인, 주요 이정표, 제품 개발 과정 등의 모듈을 포함하는 스크롤 가능한 대화형 웹페이지를 생성하세요.

페이지가 시각적으로 세련되고 우아하며 미니멀한 느낌을 주도록 하고, 저렴하거나 과도하게 장식된 디자인은 피하십시오.

주요 제약 조건:

시각적 스타일은 브랜드의 분위기와 일관성이 있어야 합니다(예: 테크 브랜드 → 차분하고 절제된 느낌, 뷰티 브랜드 → 따뜻하고 부드러운 느낌).

애니메이션 효과는 기술적인 기량을 과시하기보다는 이야기의 흐름을 돕는 데 초점을 맞춰 절제되고 적절하게 사용해야 합니다.

페이지 로딩 속도와 원활한 상호 작용은 좋은 사용자 경험을 보장하는 데 필수적입니다.

작업을 수행하기 전에 사용자는 브랜드 스토리, 배경 및 가치와 같은 관련 정보를 제공해야 합니다.

1단계: 브랜드 스토리 이해 및 내러티브 구조 추출

목표: 브랜드 스토리의 핵심 내용을 심층적으로 이해하고 주요 서사 포인트와 감정적 흐름을 파악한다.

행동:

사용자가 제공한 브랜드 스토리 문구를 주의 깊게 읽고 다음 요소들을 파악하십시오.

-브랜드 탄생 배경/창립 배경

-핵심 개념/가치

- 주요 성과 (제품 출시, 수상, 사용자 성과 향상 등)

- 창업자 이야기 또는 팀 이야기 (있는 경우)

-브랜드 비전/미래 방향

- 이야기를 4~8개의 내러티브 노드로 나누고, 각 노드에는 다음 내용이 포함됩니다.

- 노드 제목 (간결하고 임팩트 있게, 5-10단어)

-핵심 정보 (1~2문장으로 요약)

- 감정적 어조 (예: 따뜻함, 결단력, 돌파구, 전망)

이야기의 흐름을 구성하고, 각 요소 간의 논리적 관계와 감정적 진행 과정을 결정하십시오.

품질 기준:

- 이야기의 핵심 요소(노드) 수는 적절해야 합니다(너무 적으면 이야기가 빈약해 보이고, 너무 많으면 길어집니다).

- 각 노드는 명확한 서사적 목적을 가지고 있어 정보 중복을 방지합니다.

전체적인 서사는 시작, 전개, 절정, 결말의 구조를 가지고 있으며, 감정적인 절정을 담고 있습니다.

2단계: 벤치마크 브랜드를 조사하고 시각적 영감을 수집합니다.

목표: 브랜드 톤을 기반으로 유사하거나 비교 가능한 스타일의 우수 브랜드 웹사이트를 검색 및 분석하여 시각적 영감과 디자인 참고 자료를 추출한다.

행동:

1. 벤치마크 검색 방향을 결정합니다.

1단계에서 추출한 브랜드 톤 키워드(예: "{브랜드 톤 키워드}")를 기반으로 검색 전략을 수립합니다.

2~3가지 검색 기준을 정의하세요:

동일 업종 내 벤치마크 (예: 국내 우수 화장품 브랜드)

유사한 주제를 다루는 업계 간 협업(예: 차 음료 및 가정용품과 같이 "동양적 미학"을 강조하는 다른 카테고리의 브랜드).

수상 경력에 빛나는 디자인 사례 (예: Awwwards 및 FWA에 소개된 유사한 스타일의 수상 경력에 빛나는 웹사이트)

2. 유사한 브랜드를 검색하고 필터링하세요:

검색 도구를 사용하여 다음과 같은 키워드를 검색하세요.

"{산업} + 브랜드 웹사이트 + 디자인"

"{톤 키워드} + 브랜드 웹사이트 + 수상 경력"

"2024년 최고의 {산업} 웹사이트 디자인"

시각적 스타일이 참고할 만한 브랜드 웹사이트 3~5개를 선택하세요.

고급 포지셔닝, 뛰어난 디자인, 스크롤 방식의 스토리텔링 기능을 갖춘 웹사이트를 우선적으로 고려하세요.

3. 벤치마크 웹사이트에 대한 심층 분석:

각 벤치마크 웹사이트를 시각적으로 분석하고 다음 요소들을 기록하십시오:

색 구성표: 주색, 배경색, 강조색의 조합

글꼴 사용: 제목과 본문 텍스트의 글꼴 선택 및 크기 계층 구조

타이포그래피 특징: 여백 비율, 그리드 시스템, 정렬.

애니메이션 스타일: 스크롤링 트리거 방식, 애니메이션 지속 시간, 패럴랙스 효과

서술 구조: 장 구분, 내용 전개 속도, 시각적 초점

핵심 페이지 또는 모듈을 추출하여 시각적 참고 자료로 활용하세요.

4. 디자인 영감 추출:

벤치마크 웹사이트들의 공통적인 특징을 요약하세요(예: "이러한 브랜드들은 일반적으로 넓은 여백, 세리프체 제목, 그라데이션 애니메이션을 사용합니다").

배울 만한 독창적인 디자인 기법을 찾아보세요 (예: "브랜드 A의 타임라인은 가로 스크롤 방식을 사용하는데, 이는 매우 혁신적입니다").

피해야 할 디자인상의 함정을 표시하세요(예: "브랜드 B는 애니메이션이 너무 많아 화려해 보인다").

향후 디자인 작업의 지침이 될 3~5가지의 명확한 디자인 영감을 개발하십시오.

품질 기준:

벤치마크 브랜드의 수는 적당한 수준(3~5개)이며, 동종 업계 브랜드와 여러 산업 분야의 참고 브랜드를 모두 포함합니다.

이 분석은 색 구성표, 글꼴, 타이포그래피, 애니메이션 및 구조를 포괄하는 종합적인 분석입니다.

디자인은 모호한 "고차원적" 개념보다는 구체적이고 실행 가능한 아이디어를 불러일으켜야 합니다.

참고할 만한 디자인 요소와 피해야 할 디자인 요소를 명확하게 구분해야 합니다.

연구를 완료한 후 사용자에게 결과에 만족하는지 확인하십시오. 만족하지 않는다면 사용자의 피드백을 바탕으로 만족할 때까지 조정하십시오.

3단계: 브랜드 시각 스타일 시스템 정의

목표: 벤치마킹 조사 결과를 바탕으로 브랜드 고유의 스타일을 접목하여 세련되고 우아하며 미니멀한 시각적 스타일 시스템을 디자인한다.

행동:

1단계의 브랜드 톤 분석과 2단계의 벤치마킹 조사 결과를 바탕으로 시각적 톤 키워드를 도출했습니다.

색상 구성 디자인:

주요 색상 구성: 브랜드의 특징을 나타내는 주요 색상 1~2가지를 선택하세요(색상 값 제공).

보조색: 레이어링 및 시각적 장식을 위해 2~3가지 보조색을 사용합니다.

배경색: 부드러운 미색, 밝은 회색 또는 어두운 배경을 우선적으로 사용하고 순백색(#FFFFFF)은 피하십시오.

강조색: CTA 버튼이나 주요 정보를 강조하기 위해 사용되는 고대비 색상입니다.

벤치마크 브랜드의 색상 구성 패턴을 참고하여, 해당 색상 구성이 업계의 미적 기준에 부합하는지 확인하십시오.

글꼴 조합을 선택하세요:

제목 글꼴: 디자인과 브랜드 정체성을 반영하는 글꼴을 선택하세요(예: 세리프체는 우아하고, 산세리프체는 현대적인 느낌을 줍니다).

본문 글꼴: 제목과 뚜렷한 대비를 이루는 가독성이 뛰어난 글꼴입니다.

흔히 사용되는 시스템 글꼴(예: Arial, SimSun)은 사용하지 마십시오.

레이아웃 원칙을 정의하세요:

여백 활용 전략: 충분한 여백은 세련된 느낌을 주고 정보 과부하를 방지합니다.

그리드 시스템: 규칙적인 그리드 레이아웃을 사용하여 시각적 질서를 유지합니다.

정렬: 왼쪽 또는 가운데 정렬을 우선시하고, 양쪽 정렬은 피하십시오.

애니메이션 스타일을 결정하세요:

시차 효과: 서로 다른 높이에 있는 요소들이 서로 다른 속도로 움직여 공간감을 만들어냅니다.

페이드인 애니메이션: 스크롤할 때 콘텐츠가 우아한 리듬으로 서서히 나타납니다.

마이크로 애니메이션: 마우스 오버 상태 및 버튼 상호 작용과 같은 세부적인 애니메이션은 전반적인 세련미를 높입니다.

애니메이션 지속 시간: 너무 빠르거나 너무 느리지 않도록 0.3초에서 0.8초 사이로 조절합니다.

벤치마크 브랜드들의 효과적인 모션 그래픽 기법을 배우고, 이미 지적된 디자인 함정을 피하세요.

품질 기준:

색 구성은 브랜드 이미지와 잘 어울리며, 색상들은 조화롭고 눈에 거슬리지 않습니다.

디자인 감각이 돋보이는 글꼴을 선택하고, 저렴하거나 구식인 글꼴은 피하세요.

레이아웃은 탁 트인 공간감, 충분한 여백, 그리고 명확한 정보 계층 구조를 가지고 있습니다.

모션 효과는 절제되고 균형 잡혀 있으며, 기술적 기량을 과시하기보다는 이야기 전개에 기여합니다.

이 스타일 시스템은 벤치마킹 연구에서 우수한 사례들과 동일한 품질 수준을 유지합니다.

정의를 확정한 후 사용자에게 제공된 내용에 만족하는지 확인하십시오. 만족하지 않는다면 사용자의 피드백을 바탕으로 만족할 때까지 수정하십시오.

4단계: 페이지 구조 및 상호작용 흐름 설계

목표: 페이지의 전체적인 구조와 스크롤링 상호작용 흐름을 계획하여 매끄러운 스토리 전개를 구현한다.

행동:

전체 페이지 구조는 다음과 같은 모듈을 포함하여 설계되었습니다.

시작 모듈(히어로 섹션):

브랜드명/로고

한 문장으로 된 브랜드 슬로건 또는 핵심 개념

스크롤을 유도하는 시각적 신호(예: 아래쪽 화살표 애니메이션).

선택 사항: 전체 화면 배경 비디오 또는 큰 이미지

서술형 챕터 모듈(1단계의 노드를 기반으로 설계됨):

각 노드는 독립적인 시각적 챕터에 해당합니다.

챕터 간 전환은 스크롤, 구분선, 공백 또는 전환 애니메이션을 사용하여 수행할 수 있습니다.

각 장에는 제목, 본문, 삽화/이미지, 그리고 타임스탬프(해당하는 경우)가 포함됩니다.

타임라인 모듈(선택 사항, 특정 타임라인이 있는 브랜드에 적합):

수직 또는 수평 시간축

주요 연도/날짜 표시

각 시점별 사건 설명 및 관련 이미지.

제품/주요 성과 표시 모듈:

그리드 또는 카드 레이아웃

제품 이미지 + 간단한 설명

마우스 오버 효과: 확대, 추가 정보 표시 등

창업자/팀 스토리 모듈(해당되는 경우):

사람들의 사진 + 스토리 캡션

화면 분할 또는 전체 화면 몰입형 레이아웃을 사용할 수 있습니다.

마무리 부분:

브랜드 비전 또는 미래지향적 카피라이팅

CTA 버튼(예: "자세히 알아보기", "제품 살펴보기", "문의하기")

소셜 미디어 링크 또는 연락처 정보

스크롤링 인터랙티브 프로세스를 계획하세요:

각 모듈에 대한 스크롤 트리거 지점을 결정합니다(예: 뷰포트의 50%까지 스크롤했을 때 애니메이션을 트리거).

모듈 간 디자인 전환 효과(페이드 인/아웃, 패럴랙스 스크롤링, 요소 이동 등).

자연스러운 스크롤 리듬을 유지하고 시각적 피로를 유발할 수 있는 지나치게 잦은 애니메이션은 피하십시오.

벤치마크 브랜드의 효과적인 인터랙션 디자인을 참고하여

반응형 레이아웃 전략을 설계하여 데스크톱과 모바일 기기 모두에서 좋은 사용자 경험을 보장하십시오.

품질 기준:

페이지 구성이 논리적으로 명확하고, 이야기의 흐름이 자연스럽고 매끄럽다.

각 모듈은 정보의 혼란을 방지하기 위해 명확한 시각적 초점을 가지고 있습니다.

스크롤링 속도는 사용자가 갑작스럽거나 피로감을 느끼지 않도록 적당한 속도로 진행됩니다.

반응형 디자인은 모바일 환경에서도 최상의 경험을 제공하도록 세심하게 설계되었습니다.

5단계: 웹페이지 생성 명령어를 작성합니다.

목표: 시각적 스타일 시스템과 페이지 구조를 웹페이지 생성 도구가 실행할 수 있는 명확하고 상세한 웹페이지 생성 지침으로 변환합니다.

행동:

다음 부분을 포함하는 체계적인 지침을 작성하세요:

1. 전체적인 스타일 설명:

3단계 스타일 시스템을 기반으로 자연어를 사용하여 시각적 스타일을 자세히 설명하십시오.

예시: "동양적인 미학을 연상시키는 절제되고 우아한 스타일을 채택했습니다. 배경은 부드러운 미색(#F9F7F2)을 사용하고, 주요 색상은 따뜻한 차색(#8B7355)과 섬세한 분홍색(#E8D5C4)입니다. 제목은 세리프체를, 본문은 산세리프체를 사용했으며, 충분한 여백을 통해 세련된 느낌을 더했습니다. 애니메이션은 주로 페이드인과 패럴랙스 스크롤링으로 구성되어 부드럽고 우아한 리듬을 연출합니다."

2. 페이지 구조 설명:

모듈 순서대로 페이지 구조를 설명하세요.

예시: "페이지는 브랜드 이름과 슬로건을 브랜드의 주요 시각적 이미지 배경에 표시하고 스크롤을 내리면 더 많은 콘텐츠를 볼 수 있는 전체 화면 히어로 섹션으로 시작합니다. 그 다음에는 제목, 본문, 이미지가 각각 포함된 네 개의 스토리 섹션이 좌우 열이 번갈아 배치된 레이아웃으로 이어집니다. 그다음에는 브랜드의 발전 과정을 보여주는 세로형 타임라인 모듈이 나옵니다. 마지막으로 브랜드 비전과 CTA 버튼이 있는 마무리 모듈이 있습니다."

3. 상호작용 세부 정보:

주요 인터랙티브 효과 및 애니메이션에 대해 설명하십시오.

예시: "스크롤할 때 챕터 콘텐츠가 페이드인 애니메이션과 함께 화면에 나타납니다. 배경 이미지는 더 느린 속도로 스크롤되어 시차 효과를 만들어냅니다. 타임라인 노드는 해당 위치로 스크롤할 때 강조 표시됩니다. 제품 카드는 마우스를 올리면 약간 커지고 그림자가 나타납니다."

4. 콘텐츠 자리 표시자 마커:

사용자가 제공한 자료에서 어떤 내용을 추출해야 하는지 명확하게 표시하십시오.

예시: "브랜드 이름은 '{Brand Name}'을, 슬로건은 '{Brand Slogan}'을, 스토리 콘텐츠는 '{Brand Story Copy}'에서, 타임라인 이벤트는 '{Milestone List}'에서, 제품 이미지는 '{Product Image Resources}'를 사용합니다."

5. 기술 구현 관련 팁 (선택 사항):

특별한 기술적 요구사항이 있는 경우 간략하게 설명해 주십시오.

예시: "스크롤에 의해 트리거되는 애니메이션을 구현하려면 Intersection Observer API를 사용하세요. 반응형 레이아웃을 구현하려면 CSS Grid를 사용하세요."

품질 기준:

지침이 명확하고 상세하여 AI가 설계 의도를 정확하게 이해할 수 있습니다.

시각적 스타일은 상세하게 설명됩니다(색상은 색상 값을, 글꼴은 유형을, 애니메이션은 지속 시간을 가집니다).

콘텐츠 자리 표시자가 명확하게 정의되어 있으면 AI는 데이터를 어디에서 가져와야 하는지 알 수 있습니다.

전체적인 강의 시간은 적당합니다 (너무 짧으면 정보가 부족하고, 너무 길면 오해를 불러일으킬 수 있습니다).

인터랙티브 브랜드 페이지(HTML 웹페이지)를 출력합니다.

브랜드 스토리 전체가 포함되어 있습니다.

스크롤링 상호작용 및 애니메이션 효과를 제공합니다.

반응형 디자인으로 데스크톱과 모바일 기기 모두에 적응합니다.

시각적 스타일은 "고급스럽고 우아하며 미니멀한" 기준에 부합합니다.

콘텐츠 구조:

영웅 섹션 (오프닝 모듈)

4~8개의 이야기 챕터

타임라인/마일스톤 모듈(해당되는 경우)

제품 표시 모듈(해당되는 경우)

창업자/팀 스토리 모듈(해당되는 경우)

마무리 부분

품질 기준:

시각적 품질: 조화롭고 세련된 색상 구성, 적절한 글꼴 선택, 명확하고 우아한 레이아웃, 그리고 충분한 여백.

상호작용 경험: 부드러운 스크롤링, 자연스럽고 절제된 애니메이션, 신속한 반응, 그리고 훌륭한 모바일 환경.

콘텐츠 완성도: 브랜드 스토리는 핵심 정보를 포함하고, 명확한 서사적 논리를 가지며, 텍스트와 이미지가 정확하게 일치합니다.

미적 기준: 전체적인 미적 감각은 세련됨, 우아함, 그리고 간결함을 전달해야 하며, 저렴해 보이거나 과도한 장식을 피해야 합니다.

업계 벤치마킹: 시각적 품질이 벤치마크 브랜드와 동일한 수준에 도달했습니다.

스타일과 표현

핵심 미적 원칙:

세련된 느낌: 절제된 색채 구성, 정교한 타이포그래피, 충분한 여백, 그리고 은은한 애니메이션 효과를 통해 구현되었습니다.

우아함: 부드러운 리듬, 자연스러운 전환, 그리고 갑작스럽거나 거친 시각적 요소의 회피.

단순함: 불필요한 장식을 제거하고, 각 요소는 명확한 기능과 의미를 지닙니다.

시각적 참조 방향:

고급 브랜드(예: 애플, 이솝, 무지)의 공식 웹사이트

디자인 잡지 웹사이트(예: It's Nice That, Awwwards 수상작)

미술 전시 웹사이트 (여백과 시각적 리듬을 강조)

2단계에서 연구한 벤치마크 브랜드 웹사이트

피해야 할 스타일:

과하게 장식되고 어수선한 "타오바오 스타일"

지나치게 화려하고 효과가 큰 "과시적인 스타일"

어울리지 않는 색채와 어수선한 배치는 "저렴해 보이는" 느낌을 자아낸다.

지나치게 보수적이고 독창성이 부족한 "템플릿 스타일"