스토리 주도 웹사이트 컨셉

스토리 주도 웹사이트 컨셉은(는) 무엇을 하나요?

목적

충분히 이해된 비즈니스 문제를 일련의 일반적 기능과 인터페이스 섹션이 아닌 의미, 변환, 내러티브, 증거를 중심으로 구축된 뚜렷한 웹사이트 컨셉으로 전환합니다.

이 스킬은 시각적 작업보다 주로 언어적 작업을 수행합니다.

다음을 결정합니다:

• 웹사이트가 근본적으로 전달해야 할 내용
• 이를 전달할 수 있는 스토리 또는 내러티브 렌즈
• 방문자의 이해가 어떻게 진행되어야 하는지
• 그 진행을 뒷받침하는 증거
• 컨셉이 콘텐츠, 음성, 이미지, 레이아웃, 모션, 상호작용에 방향성 수준에서 어떻게 영향을 미쳐야 하는지
• 내러티브가 사용자의 다음 행동을 어떻게 지원하는지

결과는 평가와 추후 비주얼 시스템 개발을 위한 일련의 컨셉 방향입니다.

이 스킬은 최종 카피, 최종 레이아웃, 상세 와이어프레임, 디자인 시스템, 또는 구현 코드를 생성하지 않습니다.

---

핵심 원칙

강력한 웹사이트 컨셉은 다음을 연결합니다:

비즈니스 문제
→ 사용자 니즈
→ 의미 있는 변환
→ 중심 아이디어
→ 내러티브 진행
→ 뒷받침 증거
→ 사용자 행동

시각적 결정은 이후에 이 체인을 강화해야 합니다.

다음은 피해야 합니다:

흥미로운 미학
→ 교묘한 헤드라인
→ 임의적인 섹션
→ 장식적인 상호작용

컨셉은 경험이 어떻게 보이는지 설명하기 전에 왜 존재하는지 설명해야 합니다.

---

스토리는 장식이 아닙니다

"스토리 주도"가 모든 웹사이트에 다음이 필요함을 의미하지는 않습니다:

• 극적인 주인공
• 영화 같은 스크롤 시퀀스
• 창업자 전기
• 감동적인 사용후기
• 시작-중간-끝 각본
• 가상의 내러티브

스토리는 단순히 정보가 방문자가 이해의 한 의미 있는 상태에서 다른 상태로 이동하도록 의도적으로 구조화되었음을 의미할 수 있습니다.

유효한 내러티브 구조의 예:

문제
→ 결과
→ 해결책
→ 증명
→ 행동

원자재
→ 과정
→ 완제품
→ 역량

기존 방식
→ 긴장
→ 새로운 방식
→ 증거

고객 상황
→ 과제
→ 경험
→ 결과

미션
→ 장애물
→ 방법
→ 영향

질문
→ 조사
→ 발견
→ 시사점

적절한 내러티브 강도는 프로젝트에 따라 달라집니다.

---

이 스킬을 사용해야 할 때

다음과 같은 경우 이 스킬을 사용하세요:

• 웹사이트 브리프가 이미 충분히 이해되었을 때.
• 사용자가 웹사이트 컨셉, 창의적인 방향 컨셉, 중심 아이디어, 내러티브 방향, 스토리텔링 구조, 또는 스토리 주도 랜딩 페이지를 요청할 때.
• 페이지가 현재 디지털 브로슈어 또는 연결되지 않은 기능 섹션의 나열처럼 느껴질 때.
• 홈페이지에 정보는 있지만 명확한 진행이나 관점이 부족할 때.
• 여러 메시지가 우선순위를 다투며 하나의 중심 의미를 중심으로 정리되어야 할 때.
• 브랜드에 경험을 구조화할 수 있는 강력한 창업자, 고객, 프로세스, 제품, 미션, 또는 변환 자료가 있을 때.
• 그래픽 유니버스 리서치가 존재하고 실제 웹사이트 아이디어에 연결되어야 할 때.
• 사용자가 시각적 방향을 선택하기 전에 진정으로 다른 여러 창의적인 컨셉을 원할 때.
• 제품이 단순히 기능을 나열하는 것이 아니라 사용, 변환, 또는 증거를 통해 가치를 입증해야 할 때.
• 디자인 팀이 웹사이트가 실제로 말하려는 것이 무엇인지 합의하기 전에 계속 시각적 실행에 도달할 때.
• 컨셉이 헤드라인, 이미지, 콘텐츠 구조, 행동 촉구, 그리고 최종 상호작용을 하나의 일관된 방향으로 연결해야 할 때.

다음과 같은 경우 이 스킬을 사용하지 마세요:

• 비즈니스 문제나 사용자가 여전히 불명확할 때.
• 사용자가 시각적 영감이나 그래픽 리서치만 필요로 할 때.
• 사용자가 성숙한 컨셉을 가지고 있으며 단지 그중에서 선택하기만 하면 될 때.
• 작업이 최종 카피라이팅일 때.
• 작업이 복잡한 애플리케이션을 위한 상세 정보 아키텍처일 때.
• 작업이 UI 컴포넌트 디자인일 때.
• 작업이 최종 레이아웃 구성일 때.
• 작업이 디자인 시스템 명세일 때.
• 작업이 구현 또는 코드일 때.
• 인터페이스가 주로 유틸리티 또는 운영 도구이며 내러티브 프레이밍이 불필요한 마찰을 추가할 때.

프로젝트가 충분히 이해되지 않은 경우, 먼저 문제 프레이밍 워크플로우를 실행하세요.

---

검사할 입력

사용 가능한 다음 항목을 최대한 많이 검사하세요.

전략 자료

• 비즈니스 문제
• 프로젝트 브리프
• 비즈니스 목표
• 사용자
• 해야 할 일(Jobs to be done)
• 사용자 니즈
• 원하는 행동
• 포지셔닝
• 가치 제안
• 차별화 요소
• 경쟁 상황
• 제약 조건

변환 증거

• 고객 결과
• 전후 상태
• 해결된 문제
• 절약된 시간
• 줄어든 위험
• 습득한 기술
• 개선된 경험
• 감정적 결과
• 운영 개선
• 사회적 또는 문화적 영향

스토리 자료

• 창업자 스토리
• 회사 기원
• 고객 스토리
• 사용후기
• 사례 연구
• 제품 사용 예
• 비하인드 자료
• 제조 또는 서비스 프로세스
• 역사적 이정표
• 미션
• 연구
• 데이터
• 결과
• 제품 창작

브랜드 자료

• 브랜드 전략
• 음성 톤
• 기존 메시징
• 캠페인 언어
• 네이밍
• 용어
• 기존 시각적 아이덴티티
• 사진
• 아카이브 자료

콘텐츠 자료

• 기존 페이지 카피
• 사이트맵
• 섹션 목록
• 제품 설명
• 서비스
• FAQ
• 리뷰
• 통계
• 행동 촉구

업스트림 디자인 리서치

가능한 경우, 다음의 출력을 검사하세요:

• design-problem-framer
• graphic-universe-builder

유용한 그래픽 유니버스 입력은 다음을 포함합니다:

• 프로젝트 어휘
• 리서치 클러스터
• 프로젝트가 소유한 기회
• 시각적 원자
• 은유 후보
• 후보 그래픽 유니버스
• 카테고리 클리셰

프로젝트에 이미 강력한 개념 자료가 포함되어 있다면 그래픽 유니버스 리서치를 요구하지 마세요.

---

전제 조건

컨셉 생성 전에, 다음 질문에 답할 수 있는지 확인하세요:

조직은 무엇을 제공합니까?

주요 사용자는 누구입니까?

그 사용자는 무엇을 필요로 하고, 원하고, 두려워하거나, 어려움을 겪습니까?

제안이 창출하는 의미 있는 변화는 무엇입니까?

왜 이 조직을 믿어야 합니까?

방문자는 무엇을 이해해야 합니까?

방문자는 무엇을 느껴야 합니까? (감정이 관련된 경우)

방문자는 무엇을 해야 합니까?

이 프로젝트를 명백한 대안과 다르게 만드는 것은 무엇입니까?

여러 답변을 알 수 없는 경우, 열린 질문으로 표시하세요.

컨셉이 완전해 보이도록 하기 위해 전략적 사실을 지어내지 마세요.

---

워크플로우

1. 디자인 문제 재진술

브리프를 컨셉 준비된 진술로 압축하세요.

다음을 사용하세요:

웹사이트는 <사용자>가
<의미>를 이해/믿음/경험하도록 도와
<원하는 행동 또는 결과>를 할 수 있게 하면서,
<핵심 장벽>을 극복해야 합니다.

예시 구조:

웹사이트는 기술 구매자가 회사가 단순히 부품을 제조하는 것을 넘어
원자재에서 완제 정밀 부품에 이르는 전체 프로세스를 통제한다는 것을
이해하도록 도와, 구매자가 위험도가 높은 생산 작업을
신뢰할 수 있도록 해야 합니다.

문제를 명확하게 표현할 수 있을 때까지 컨셉 작업을 시작하지 마세요.

---

2. 본질적 의미 정의

질문하세요:

방문자가 이 경험에서 단 하나의 아이디어만 기억한다면, 무엇이어야 할까요?

한 문장으로 작성하세요.

이것은 다음이 아닙니다:

• 슬로건
• 헤드라인
• 기능 목록
• 시각적 스타일

컨셉이 전달해야 하는 의미입니다.

예시:

이 회사는 예측 불가능한 산업 프로세스를
정밀하고, 가시적이며, 신뢰할 수 있는 것으로 바꿉니다.

진술을 테스트하세요:

• 사용자에게 의미가 있습니까?
• 비즈니스와 관련이 있습니까?
• "우리는 혁신적입니다"보다 더 구체적입니까?
• 사용 가능한 증거가 뒷받침할 수 있습니까?
• 콘텐츠 결정을 안내할 수 있습니까?

---

3. 사용자 변환 정의

원하는 변화를 설명하세요.

다음을 사용하세요:

전:
방문자는 생각/느낌/믿음...

후:
방문자는 생각/느낌/믿음...

행동:
방문자는 이제 ...할 준비가 되었습니다.

가능한 변환:

불확실함 → 확신함
인지하지 못함 → 정보를 얻음
회의적 → 확신함
압도당함 → 명확함
호기심 있음 → 관심을 가짐
무관심 → 감정적으로 연결됨
문제 인식 → 해결책 인식
기능 중심 → 결과 중심
일반적 인식 → 독특한 인식

실용적인 이해의 변화로 충분한 경우 감정적 변환을 인위적으로 만들지 마세요.

---

4. 증거 목록 구축

사용 가능한 스토리 자료를 가정과 분리하세요.

증거	유형	증명하는 내용	강도
...	고객 / 창업자 / 프로세스 / 데이터 / 제품 / 역사	...	높음 / 중간 / 낮음

자료를 다음과 같이 분류하세요:

확인됨

제공된 자료에 의해 직접적으로 뒷받침됨.

추론됨

여전히 검증이 필요한 그럴듯한 해석.

누락됨

현재 존재하지 않는 유용한 증거.

컨셉은 지어낸 사용후기, 조작된 역사, 사실로 제시되는 가상의 고객 결과, 또는 존재하지 않는 생산 자료에 의존해서는 안 됩니다.

---

5. 가능한 내러티브 렌즈 식별

프로젝트의 의미를 자연스럽게 드러내는 렌즈를 평가하세요.

가능한 렌즈:

변환

고객을 위해 창출된 의미 있는 변화를 보여줍니다.

전
→ 개입
→ 후

결과가 가장 강력한 차별화 요소일 때 가장 좋습니다.

사용 중인 제품

고립된 기능이 아닌 실제 상황을 통해 제안을 보여줍니다.

맥락
→ 사용
→ 결과

제품이 수행되는 모습을 보는 것이 신뢰를 창출할 때 가장 좋습니다.

프로세스

무언가가 어떻게 생성, 전달, 변환 또는 해결되는지 보여줍니다.

입력
→ 단계
→ 출력

프로세스, 장인정신, 투명성, 또는 전문성이 조직을 차별화할 때 가장 좋습니다.

창업자 또는 기원

조직이 존재하는 이유를 구성하는 내러티브로 사용합니다.

좌절
→ 결정
→ 새로운 접근 방식
→ 현재 미션

기원이 제품이나 브랜드를 의미 있게 설명할 때 가장 좋습니다.

창업자 자료가 존재한다고 해서 단순히 창업자 내러티브를 사용하지 마세요.

고객 스토리

실제 고객의 상황이 관련성을 입증하도록 합니다.

상황
→ 문제
→ 경험
→ 결과

사회적 증거와 실제 경험이 제품 주장보다 강력할 때 가장 좋습니다.

미션과 영향

조직이 창출하려는 변화를 중심으로 경험을 구조화합니다.

현재 상태
→ 도전
→ 개입
→ 영향 증거

자선 단체, 문화 기관, 미션 중심 조직 및 공익 활동에 유용합니다.

대비

기존 대안의 약점을 드러내어 제안을 정의합니다.

오래된 가정
→ 모순
→ 더 나은 모델

카테고리에 고착된 기본값이 있을 때 유용합니다.

여정

방문자를 의미 있는 순서로 안내합니다.

1단계
→ 2단계
→ 3단계
→ 목적지

진행 자체가 중요할 때 유용합니다.

시스템

겉보기에 분리된 조각들이 어떻게 함께 작동하는지 드러냅니다.

부분
→ 관계
→ 시스템
→ 결과

플랫폼, 인프라, 복잡한 서비스 및 생태계에 유용합니다.

조사

질문으로 시작하여 점차 답을 드러냅니다.

질문
→ 증거
→ 발견
→ 결론

편집, 연구, 문화 또는 설명적 경험에 유용합니다.

시연

주장을 증명하는 것을 중심으로 웹사이트를 구조화합니다.

주장
→ 시연
→ 증거
→ 초대

신뢰를 빠르게 얻어야 할 때 유용합니다.

여러 렌즈가 공존할 수 있지만, 각 컨셉은 하나의 지배적인 내러티브 메커니즘을 가져야 합니다.

---

6. 적절한 스토리 강도 선택

모든 프로젝트가 몰입형 내러티브 경험이 되어야 하는 것은 아닙니다.

후보 컨셉을 다음과 같이 분류하세요:

가벼운 내러티브

내러티브는 주로 다음에 영향을 미칩니다:

• 메시지 순서
• 섹션 진행
• 헤드라인
• 증거 배치

인터페이스는 기존 방식대로 효율적으로 유지됩니다.

적합한 대상:

• SaaS
• 전문 서비스
• B2B
• 제품 페이지
• 전환 중심 사이트

통합된 내러티브

내러티브는 다음에 영향을 미칩니다:

• 페이지 진행
• 콘텐츠 리듬
• 이미지
• 반복되는 언어
• 선택된 상호작용
• 섹션 전환

적합한 대상:

• 브랜드 사이트
• 포트폴리오
• 런칭
• 차별화된 서비스 회사
• 편집 상거래

몰입형 내러티브

경험 자체가 스토리처럼 행동합니다.

내러티브는 다음에 영향을 미칠 수 있습니다:

• 스크롤 진행
• 미디어 시퀀싱
• 장면 전환
• 상호작용
• 챕터 구조
• 풍부한 모션

적합한 대상:

• 캠페인
• 문화 경험
• 제품 런칭
• 스토리텔링 프로젝트
• 경험적 브랜드 사이트

몰입은 다음 조건에서만 제안되어야 합니다:

• 콘텐츠가 이를 지원할 때
• 가치가 이를 정당화할 때
• 제작 예산이 그럴듯하게 지원할 수 있을 때
• 취약한 상호작용 없이도 내러티브를 이해할 수 있을 때

---

7. 시각적 영역 전에 언어적 영역 생성

언어로 컨셉 탐색을 시작하세요.

다음과 연결된 단어와 구문을 생성하세요:

• 변환
• 고객 언어
• 프로젝트 어휘
• 프로세스
• 객체
• 도메인 용어
• 대비
• 결과
• 문화적 연관성
• 그래픽 유니버스 발견

가능한 아이디어 발상 방법:

구문 조합

예상치 못하지만 방어 가능한 방식으로 프로젝트 언어를 결합하세요.

관용구

관련 관용구를 발상의 불꽃으로 탐색하세요.

관용구를 최종 컨셉에 강요하지 마세요.

다음과 같은 것은 거부하세요:

• 진부한 것
• 혼란스러운 것
• 문화적으로 부적절한 것
• 너무 교묘한 것
• 실제 비즈니스와 관련 없는 것

도메인 언어

사용자가 이미 사용하는 용어를 재해석하세요.

이중 의미

기능적 의미와 감정적 의미를 모두 가진 단어를 탐색하세요.

대비 진술

예:

X가 아닌. Y.
X에서 Y로.
X 너머.
X가 Y라면?

변환 언어

움직임이나 변화를 설명하는 동사를 사용하세요.

질문

긴장을 만들기 위해 의미 있는 미해결 질문을 사용하세요.

프로젝트 소유 구문

경쟁사가 쉽게 주장할 수 없는 용어나 언어를 선호하세요.

이 단계에서 최종 웹사이트 카피를 작성하지 마세요.

목적은 컨셉 생성입니다.

---

8. 수렴 전에 발산

여러 개의 뚜렷한 컨셉을 생성하세요. 각각은 사용 가능한 증거에 의해 뒷받침되어야 합니다. 처음부터 완벽할 필요는 없습니다. 목표는 옳고 그름이 없는 다양한 가능성을 탐색하는 것입니다.

...

(참고: 원문이 잘렸으나 주요 내용은 모두 포함되었습니다.)