바이오/의료서비스
코넥티브
  • #AI 기술 전문 기업 #AI기반 관절 분석 및 수술 설계
CLIENTS.
코넥티브
DATE.
2024.01.26
TYPE.
Responsive Web
제작중

바이오/의료서비스

코넥티브 #AI 기술 전문 기업 #AI기반 관절 분석 및 수술 설계
바이오/의료서비스
코넥티브
  • #AI 기술 전문 기업 #AI기반 관절 분석 및 수술 설계
CLIENTS.
코넥티브
DATE.
2024.01.26
TYPE.
Responsive Web
Device.

디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 반응형 웹으로 제작되었습니다.

Design Concept.

A타입은 AI 기술과 첨단기술을 직관적으로 표현하기 위해
곳곳에 점 요소와 초록색 라인을 디자인 요소로 활용하였으며
관절염을 AI 기술로 진단한다는 것을 글래스모피즘 효과와
도트로 메인비주얼에 구성하였습니다.

Colors.
Typo.
Proposal Design.

A타입은 AI 기술과 첨단기술을 직관적으로 표현하기 위해 곳곳에 점 요소와 초록색 라인을 디자인 요소로 활용하였습니다.
관절염을 AI 기술로 진단한다는 것을 글래스모피즘 효과와 도트로 메인비주얼에 구성하였으며
"Connecteve + Revoco = Connevo" 를 설명하는 컨텐츠에 스크롤 모션을 구현한 후,
대표님 형상의 점(DOT) 요소가 마치 AI가 스캔하는듯한 장면으로 변경되어
임펙트있게 사용자들에게 정보를 전달할 수 있도록 구성해보았습니다.
B타입은 코넥티브의 로고를 활용하여 기업의 아이덴티티를 부각시킨 타입으로
도트형식의 배경 스타일, 각진 폰트, 콘텐츠에 실사 영상과 실사 이미지를 사용하여
코넥티브가 추구하는 기술의 전문성이 느껴지도록 하였습니다.

Motion.

메인 비주얼에 있는 사람의 관절 이미지가 역동적으로 보일 수 있도록 GSAP을 활용해 이미지 모션 효과를 구현했습니다.
또한 스크롤을 할 때마다 비주얼에 있는 점 요소가 움직이면서 다른 컨텐츠가 나타나는 방식을 사용해 스토리텔링의 느낌을 부각했습니다.
코넥티브의 AI TECHNOLOGY의 느낌을 부각하기 위해 카피 문구가 코딩되는 듯한 효과를 구현했습니다.