01
제한된 자료에서, 정보의 순서를 찾다.
- Challenge
- 기존 홈페이지가 없어 참고할 웹 콘텐츠와 화면 구조가 없었습니다.
- Approach
- 기업 카탈로그와 고객사 제공 자료를 분석해 사업 영역별 정보의 우선순위를 정했습니다.
- Implementation
- 주요 사업을 빠르게 이해할 수 있도록 메인과 서브페이지를 구성하고, 장황한 설명보다 핵심 내용을 명확하게 전달했습니다.
03 / PROJECT / CASE STUDY
자료의 한계를, 표현의 가능성으로.
환경을 생각하는 기술,
경험으로 전하다.
(주)에코산업개발
카탈로그에서 출발한 콘텐츠 기획부터 이미지와 스크롤로 완성한 기업 웹사이트까지.
02 / PROJECT OVERVIEW
처음부터 설계한 기업의 디지털 공간.
기존 홈페이지가 없는 상태에서 기업 카탈로그와 고객사가 제공한 제한된 자료를 기반으로 신규 웹사이트를 구축했습니다.
고객사가 제시한 영상 기반 인터랙티브 레퍼런스와 달리 영상 리소스는 제공되지 않았습니다. 활용 가능한 이미지와 텍스트로 콘텐츠를 재구성하고, GSAP 기반 스크롤 인터랙션으로 역동적인 사용자 경험을 구현했습니다.
하수도 설비 및 수처리 사업의 특성을 고려해 깨끗하고 신뢰감 있는 시각적 이미지, 핵심 정보 중심의 화면을 목표로 했습니다.
KEY CONTRIBUTIONS
- 제한된 자료를 활용한 콘텐츠 및 화면 기획
- 신규 기업 홈페이지 UI 디자인 및 퍼블리싱
- GSAP ScrollTrigger 기반 스크롤 인터랙션
- 이미지 확대 및 텍스트 전환 애니메이션
- 사업분야 펼침형 UI 구현
- 환경 산업의 특성을 반영한 비주얼 디자인
- 핵심 정보 중심의 서브페이지 및 반응형 레이아웃
03 / CHALLENGES & SOLUTIONS
다섯 가지 질문, 구현으로 찾은 답.
사용 가능한 리소스와 실제 동작을 기준으로 각 화면의 표현 방식을 결정했습니다.
02
영상 대신, 스크롤을 표현의 재료로.
- Challenge
- 고객사는 자체 제작 영상과 GSAP 인터랙션을 활용한 레퍼런스를 제시했지만, 대응하는 영상 리소스는 제공되지 않았습니다.
- Approach
- 사용 가능한 이미지와 텍스트를 재구성하고 스크롤 진행을 시각적 전환의 기준으로 삼았습니다.
- Implementation
- ScrollTrigger와 타임라인의 Pin·Scrub을 활용했습니다. 이미지 확대와 모서리 변화, 글자별 순차 등장, 이미지 진입에 따른 텍스트 색상 전환을 구현했습니다.
03
다섯 가지 사업을, 한눈에.
- Challenge
- 여러 사업을 제한된 메인 화면 안에서 직관적으로 소개해야 했습니다.
- Approach
- 사업별 이미지와 핵심 설명을 연결하고, 사용자의 탐색에 따라 내용을 드러내도록 구성했습니다.
- Implementation
- PC에서는 5개 사업 항목을 나란히 배치하고, 호버 시 배경 이미지 확대와 설명 등장을 구현했습니다. 펼침형 탐색은 실제 원본의 동작 범위에 맞춰 소개합니다.
04
환경 산업의 언어를 시각으로 옮기다.
- Challenge
- 하수도 설비와 수처리 기업의 전문성과 신뢰감을 전달해야 했습니다.
- Approach
- 물·청결함·신뢰감을 연상시키는 이미지와 정돈된 여백·타이포그래피를 중심으로 방향을 잡았습니다.
- Implementation
- 환경 산업의 사진과 간결한 정보 구획을 사용했습니다. 사업별 서브페이지는 복잡한 설명보다 핵심 사업과 설비 정보를 우선했습니다.
05
작은 화면에서도, 설명은 남도록.
- Challenge
- 넓은 화면의 사업분야와 주요 콘텐츠를 작은 화면에서도 이해할 수 있어야 했습니다.
- Approach
- 화면 너비에 따라 배치와 읽기 순서를 조정하고 모바일에서 호버 의존을 줄였습니다.
- Implementation
- 원본은 PC의 5개 병렬 항목을 768px 이하에서 세로로 전환합니다. 모바일에서는 사업 설명을 항상 표시하고 주요 콘텐츠도 화면 너비에 맞게 재배치했습니다.
04 / DESIGN & IMPLEMENTATION
화면으로 연결한 정보와 움직임.
01 / MAIN VISUAL
이미지가 먼저 전하는 신뢰감
수처리 시설 이미지와 정돈된 타이포그래피로 기업의 전문성을 전달합니다. PC와 모바일은 같은 메시지를 서로 다른 화면 비율에 맞춰 보여줍니다.
02 / SCROLL INTERACTION
영상 없이 만드는 장면의 전환
원본 js/scroll.js는 start: top top, end: +=100%, scrub: 1.2, pin: true와 invalidateOnRefresh를 사용합니다. 이미지의 scale 0.85→1, 모서리 40px→0과 글자별 등장이 하나의 타임라인으로 이어집니다.
SCROLL TO EXPLORE ↓
원본 이미지·문구를 사용한 축약 동작 예시. 아래로 스크롤하면 이미지와 글자가 전환됩니다. 원본 전체 스크립트와 독립적으로 동작합니다.
03 / BUSINESS UI
사업을 탐색하는 다섯 개의 입구
PC 호버에서는 이미지가 확대되고 설명이 나타납니다. 768px 이하에서는 세로 배치로 바뀌며 설명을 항상 표시합니다. 아래는 실제 데모를 캡처한 화면입니다.
04 / SUBPAGE
핵심 사업을 간결하게 설명하다
메인에서 관심을 만든 뒤, 사업별 서브페이지에서는 설비와 핵심 정보를 정리해 전달합니다. 사진과 텍스트의 위계를 분명히 하고 읽는 흐름을 정돈했습니다.
05 / OUTCOME & REFLECTION
레퍼런스의 모양보다, 리소스에 맞는 표현을.
제한된 콘텐츠와 이미지 자료를 활용하면서도 고객사가 기대하는 인터랙티브 웹사이트의 경험을 구현한 프로젝트입니다.
단순히 레퍼런스를 재현하기보다 실제 사용 가능한 리소스에 맞춰 콘텐츠 표현 방식을 설계하고, GSAP을 통해 시각적 완성도를 높이는 경험을 쌓았습니다.
06 / EXPLORE PROJECT