인터랙티브 자연 보전 웹사이트 디자인

쓰러진 나무를 중심으로 구축한 인터랙티브 자연 보전 웹사이트

Second Spring은 후원 양식이 아니라 쓰러진 통나무로 시작합니다. 나뭇가지가 대형 세리프체 헤드라인 아래에서 화면을 대각선으로 가로지르고, 나뭇잎이 바깥쪽 가장자리를 둘러쌉니다. 나무 위에서 포인터를 움직이면 일시적인 이끼이 자랍니다. 캡처된 상태에서 인터페이스는 이끼 피복률을 20%로 표시하지만, 이 수치는 복원된 서식지가 아니라 화면 효과를 설명합니다.

이 구성은 각 레이어에 서로 다른 역할을 부여합니다. 옅은 색의 중앙부는 헤드라인의 가독성을 유지하고, 질감이 살아 있는 나무껍질은 상호작용할 수 있는 표면을 나타내며, 좁은 컨트롤 행에는 회전, 비, 모션 감소, 초기화, 캡처 동작이 모여 있습니다. 방문자는 컨트롤을 먼저 자세히 살펴보지 않아도 기본적인 참여 방식을 이해할 수 있습니다.

01

만져볼 만한 표면

통나무는 페이지에서 가장 큰 촉각적 오브젝트입니다. 대각선 배치는 화면 전체로 시선을 유도하고 포인터가 향할 대상을 쉽게 알아볼 수 있게 합니다. 효과를 나무에 한정하면 상호작용이 주제와 연결됩니다. 커서를 어디든 따라다니는 애니메이션은 이보다 덜 구체적인 이야기를 전달했을 것입니다.

02

점수판 없는 피드백

이끼 피복률은 장면 컨트롤 옆에 절제된 텍스트로 표시됩니다. 캠페인 헤드라인과 경쟁하지 않으면서 상호작용에 따른 변화가 있었음을 확인해 줍니다. 자란 이끼는 나중에 사라지므로, 이 비율을 누적 성과로 취급하면 경험을 잘못 나타내게 됩니다. 정지 상태 레이블은 비활성 상태와 장면이 작동하지 않는 상태를 구분하는 데 도움이 됩니다.

03

분위기를 조절하는 컨트롤

회전과 비에는 별도의 컨트롤이 있으므로 움직임과 날씨를 분리할 수 없는 하나의 효과로 묶을 필요가 없습니다. 캡처된 히어로 장면에서는 회전을 일시 중지한 반면 비는 계속 내리게 했습니다. 이는 탐색형 장면에 유용합니다. 방문자는 장면을 독특하게 만드는 분위기를 모두 잃지 않으면서 한 영역을 살펴볼 수 있습니다.

후원 금액을 구체적인 활동과 연결하기

후원 섹션은 3개의 금액을 서로 다른 3가지 작업으로 전환합니다. 각 열은 금액, 활동, 짧은 설명, 동작이라는 동일한 순서를 반복합니다. 이 반복 구조를 통해 옵션을 비교할 수 있으며, 활동 이름은 숫자가 임의적인 가격 등급으로 변하는 것을 방지합니다.

각 단위는 의도적으로 다르므로 페이지는 영향 대비 가격 비교를 설정하지 않습니다. 실제 캠페인이라면 이러한 관계를 뒷받침하는 근거가 필요합니다. 여기서는 모든 버튼에 Support (simulated)라고 표시되며, 로컬 확인 메시지에서도 결제가 이루어지지 않는다고 다시 안내합니다. 이 디자인은 거래 시스템을 연결하기 전에 사람들이 선택지를 어떻게 이해하는지 테스트하는 데 유용합니다.

숲 바닥 이야기에서 자원봉사 신청 양식까지

히어로 장면 다음에는 토양, 물, 균류, 수관을 소개하는 4가지 관찰 내용이 나옵니다. 이는 이끼를 키워 잠금 해제하는 보상이 아니라 편집 콘텐츠의 흐름으로 제시됩니다. 페이지에는 읽을거리가 상호작용 진행도에 좌우되지 않는다고 명시되어 있습니다. 따라서 장면을 건너뛴 사람도 동일한 설명과 참여 옵션을 확인할 수 있습니다.

1. 먼저 오브젝트 설명하기

   첫 번째 관찰 내용은 고사목을 숲 바닥과 연결합니다. 이어서 물, 균류, 수관이 동일한 오브젝트를 중심으로 주제를 확장합니다. 이를 통해 이미 방문자가 본 통나무와 읽기 흐름을 연결하며, 관련 없는 캠페인 문구로 갑자기 전환되는 것을 방지합니다.

2. 기부 외에도 참여할 방법 제공하기

   Give a morning은 후원 옵션 다음에 별도의 자원봉사 신청 양식으로 이어집니다. 이 양식에서는 이름, 이메일, 현장 활동일을 요청합니다. 활동일 선택 항목에는 고사목 조사, 묘목 심기, 이끼 모니터링 걷기가 명시되어 있어, 설명 없는 날짜가 아니라 활동을 기준으로 선택할 수 있습니다.

3. 양식의 경계를 명확히 표시하기

   모의 신청 안내문은 필드 위에 있어 정보를 입력하기 전에 읽을 수 있습니다. 이는 푸터에 숨겨진 면책 문구보다 더 중요합니다. 실제 서비스라면 같은 영역에서 정보가 어디로 전송되고 다음에 어떤 일이 일어나는지 사실대로 설명해야 합니다.

이 자연 보전 프로토타입이 보여주는 것

로컬 미리보기는 렌더링된 인터랙티브 장면, 설정 가능한 모션, 편집 콘텐츠, 모의 참여 인터페이스를 보여줍니다. £15 후원 대화상자는 로컬에서 열고 확인했습니다. 그 결과 결제, 이메일 전송 또는 복원 작업은 이루어지지 않았습니다. 현장 활동일 이름과 후원 금액은 가상의 예시이며, 장면의 이끼 비율을 환경적 영향으로 보고해서는 안 됩니다.