Work·Web & Brand·Cleantech & Environmental

KOAI ·/ Cleantech Drone Brand & Site

Brand, site, and CES booth for a Korean cleantech startup. A 3D interactive drone app sat alongside the web build.

What this maps to

Closest sprint

Brand + Site Express

Duration

약 8–10주(웹), 3D 드론 프레젠테이션 별도 빌드

Team

2 + network

KOAI: 해양 오염 대응 클린테크의 브랜드와 사이트

Client: KOAI Services: 웹 디자인·개발, 브랜드 시스템, 인터랙티브 3D(병행 프로젝트) Duration: 약 8–10주(웹), 3D 드론 프레젠테이션 별도 빌드 Tech: WordPress, Elementor, Three.js, Verge3D

문제 정의

KOAI는 해양 오염 대응 장비를 만드는 한국 클린테크 스타트업입니다. 플래그십 제품은 KOBOT, 원격 조종 방식의 자항형 유출유 회수 로봇이며, 여기에 오일펜스, 스키밍 머신, 회수 탱크가 결합돼 엔드 투 엔드 유출 사고 대응 시스템을 이룹니다.

창업팀은 두 가지 작업을 동시에 굴리고 있는 상태로 들어왔습니다. 하나는 한국 해양경찰 조달, KIST 연구 파트너십, 수출 디스트리뷰터(초기 파트너 중 Elastec 등)를 겨냥한 브랜드와 마케팅 사이트. 다른 하나는 CES 2023 부스를 위한 드론 인터랙티브 3D 쇼케이스. 두 가지를 모두 만들었습니다.

사이트 브리프는 영어 중심(KOAI의 수출 지향이 한국어보다 영어를 앞세웠습니다), UN SDG 14.1 프레이밍이 강하고(해양 오염 예방은 글자 그대로 SDG 타깃이고 KOAI는 그 포지셔닝에 무게를 둡니다), 실제 사고 영상 자료를 담을 수 있도록 설계되어야 했습니다. 플래그십 영상은 부산 감천항 1부두에서의 실제 유출 대응 현장에서 KOBOT이 운용되는 장면입니다.

만든 것

영어 중심의 클린테크 브랜드 사이트와 CES 부스급 3D 인터랙티브 드론 프레젠테이션. 둘은 브랜드 방향과 비주얼 에셋을 공유했습니다.

KOAI 제품 라인업을 담은 영어 우선 사이트: KOBOT 유출유 회수 로봇, 오일펜스, 스키머, 회수 탱크
홈페이지의 UN SDG 14.1 프레이밍과 ESG 포지셔닝(이건 장식이 아니라 제품 스토리의 실제 일부입니다)
부산 감천항 1부두를 포함한 실제 유출 대응 사고 현장의 YouTube 영상 3편 임베드
파트너·연구 제휴 표시: KIST, 해양경찰청, 서울대학교, Elastec
원격 조종과 자항 기능 사양이 포함된 제품 상세 페이지
뉴스와 컨택트 섹션
별도 빌드: CES 2023 부스에서 운영된 KOBOT 드론의 인터랙티브 3D 프레젠테이션. 방문객이 드론을 회전시키고, 회수 모듈을 살펴보고, 배치 시퀀스를 따라갈 수 있었습니다. 우리의 표준 3D 런타임에 맞춰 Three.js와 Verge3D로 제작(인터랙티브 3D 서비스 페이지 참고)

작업 방식

1–2주차. 브랜드 방향. 2023년 클린테크 브랜드는 시각적 패턴 문제가 있었습니다. 다 똑같이 생겼다는 점. 블루 그라데이션, 추상화된 물, 드론 같은 일러스트레이션. 두 주 동안 KOAI의 비주얼 시스템을 해양 오염 대응 작업에 더 구체적인 방향으로 밀었습니다. 실제 유출 현장 사진, 실제 항만 인프라, 덜 추상적인 톤.

3–4주차. 사이트 빌드(Elementor + WordPress). 홈페이지, 제품 페이지, 파트너 표시, SDG 프레이밍.

5–6주차. CES 부스 3D 프레젠테이션을 3D 팀이 병렬로 빌드. 드론 CAD를 소스로 삼아 브라우저 딜리버리에 최적화하고, 부스 방문객이 튜토리얼 없이 다가가 조작할 수 있도록 인터랙션 스크립트를 작성했습니다.

7–8주차. YouTube 영상 통합, 뉴스 모듈, 최종 콘텐츠 패스.

9–10주차. CES 부스 리허설, 사이트 QA, 트레이드 쇼와 함께 런칭.

달라진 점

KOAI는 CES 2023에 비주얼 아이덴티티, 사이트, 3D 부스 프레젠테이션을 가지고 등장했고, 셋이 하나의 제품처럼 읽혔습니다. 당연해 보이지만, 같은 시기에 출시한 클린테크 스타트업들이 일관되게 실패한 지점입니다. 부스를 찾은 투자자와 수출 디스트리뷰터는 드론을 보고, 3D 버전을 조작한 다음, QR 코드를 찍어 같은 톤·같은 이야기로 이어지는 사이트로 들어왔습니다.

배운 것

하나의 팀이 만든 웹+3D는 웹 따로 3D 따로와 다른 제품입니다. KOAI는 브랜드 시스템, 사이트 빌드, 3D 인터랙티브를 단일 내부 팀이 굴린 초기 프로젝트입니다. 사이트와 부스 프레젠테이션의 비주얼 정합성은 스타일 가이드에서 나온 게 아니라 거기서 나왔습니다. 브랜드 작업과 3D 작업을 별도 팀으로 쪼개면 이음새가 보입니다. 한 팀이면 보이지 않습니다.

SDG 프레이밍은 제품이 곧 SDG일 때 통합니다. 우리가 보는 클린테크 브랜드의 절반은 SDG를 어바웃 페이지의 한 단락으로 끌어옵니다. KOAI 제품은 해양 오염을 직접 예방·저감합니다. 이건 UN SDG 14.1의 문구 그 자체입니다. 그 프레이밍을 앞에 두는 건 마케팅이 아니라 제품 설명입니다. 주장이 하중을 견디기 때문에 통합니다.

실제 사고 영상은 데모 영상을 이깁니다. 감천항 영상은 연출된 테스트가 아닌 실제 유출 대응입니다. 사이트 방문 분석을 보면 실사고 영상의 시청 시간이 제품 데모보다 훨씬 깁니다. 조달 담당자는 테스트 패드가 아니라 실제 부하 상황에서의 제품을 보고 싶어 합니다.