플러스프로젝트 배경
1) 문제점 AI 기반 함정·해양 예지정비 및 디지털트윈 솔루션 기업이 한화에어로스페이스·LIG넥스원 수준의 하이엔드 브랜딩 사이트로 전면 개편하려 했습니다. 그러나 동적 임팩트의 핵심인 영상·이미지·모션그래픽 소스를 구하기 어려운 상황이었습니다. '무게감 있는 국방 브랜드 + 영상급 동적 인터랙션'을 미디어 자산 없이 구현하는 것이 핵심 난제였습니다. 2) 프로젝트 목표 ① 레이더·소나
프로젝트 성과
영상 없는 시네마틱 임팩트 구현
스톡 영상 0개, Canvas API만으로 레이더·소나·디지털트윈 인터랙션을
구현해 한화·LIG급 하이엔드 임팩트를 달성했다.
구현해 한화·LIG급 하이엔드 임팩트를 달성했다.
WCAG CRITICAL+MAJOR 5건 접근성 달성
포커스 링, nav focus-trap, aria, prefers-reduced-motion 정지
프레임 등 5건을 충족해 동적 사이트의 접근성 확보
프레임 등 5건을 충족해 동적 사이트의 접근성 확보
범환경 방어 폴백 완성
iframe 임베드 환경에서 CSS 트랜지션이 동작하지 않는 'frozen'
상태를 감지해 콘텐츠를 즉시 노출시키는 방어 코드로 어느 환경
에서도 작동하는 데모를 완성했다.
상태를 감지해 콘텐츠를 즉시 노출시키는 방어 코드로 어느 환경
에서도 작동하는 데모를 완성했다.
핵심 기능
Canvas 레이더·소나·디지털트윈 인터랙션
rAF 기반 Canvas API로 레이더 스윕·소나 링·블립 글로우를 코드
렌더링해 스톡 영상 없이 방산 브랜드에 맞는 시네마틱 임팩트를
제공한다.
렌더링해 스톡 영상 없이 방산 브랜드에 맞는 시네마틱 임팩트를
제공한다.
진행 단계
정보구조 설계 및 개발 계획 수립
2026.06.
메뉴 구조를 그대로 반영한 4페이지(Main·About·Support·Solution Detail), 사업분야 8개·AI-Fleet 4제품군 IA를 설계하고 vanilla 스택으로 계획
프로젝트 상세
1) 포트폴리오 소개 방산·해양 AI 기업(함정 예지정비·디지털트윈 솔루션)의 하이엔드 브랜딩 사이트를 목표로 선제 제작한 1인 콘셉트 PoC입니다. 영상·이미지 소스가 없다는 제약 조건을 걸고, 레이더·소나·디지털트윈을 Canvas API 코드로 직접 렌더링하는 방식으로 한화에어로스페이스·LIG넥스원 수준의 시네마틱 임팩트를 달성했습니다. 영상 0개 · 4페이지 · 2,900줄 · KO
