① 문제점
기존 홈페이지에는 제공되는 정보가 적어, 더 다양한 콘텐츠 보강이 필요한 상황
서비스와 제품 소개가 혼재되어 있어, 브랜드 정체성이 명확히 드러나지 않음
모바일 환경에서 레이아웃 깨짐·속도 저하 등으로 사용자 경험 저하

② 프로젝트 목표
브랜드 아이덴티티 강화: 기술력과 디자인 철학을 명확히 표현
정보 접근성 향상: SI·SM·DID 등 주요 사업 영역을 직관적으로 구분
반응형 웹 구현: PC, 태블릿, 모바일 환경에서 동일한 경험 제공

③ 주안점
브랜드 컬러와 캐릭터를 활용한 일관된 비주얼 아이덴티티 구축
모션·인터랙션 설계(GSAP, ScrollTrigger) 로 생동감 있는 사용자 경험 제공
간결한 IA(Information Architecture) 로 핵심 콘텐츠 중심의 구성
향후 제품 페이지, 블로그, 관리자 영역 확장을 고려한 유연한 구조 설계

① 포트폴리오 소개
B2B 중심의 IT 서비스 기업의 기업 브랜드 사이트를 리뉴얼했습니다.
복잡하게 느껴질 수 있는 IT 기술 내용을, 브랜드 캐릭터를 활용해 쉽고 직관적으로 전달하고자 했습니다.
SI·SM / 디지털사이니지 등 다양한 사업영역을 시각적으로 명확히 구분하고
방문자가 목적에 따라 빠르게 접근할 수 있는 구조로 설계했습니다.


② 작업 범위
- 기획 및 정보 구조 설계 (IA, 콘텐츠 구성)
- UI/UX 디자인 및 프론트엔드 퍼블리싱 (HTML, CSS, JS)
- 반응형 웹 구현 (PC, Tablet, Mobile 최적화)
- 웹페이지에 들어가는 모든 시각적 콘텐츠 제작


③ 주요 업무
PC뿐 아니라 태블릿·모바일에서도 동일하게 자연스러운 UX가 되도록 레이아웃·폰트·인터랙션을 세부적으로 조정
메인 페이지 인터랙션(스크롤 모션, 비디오 히어로 섹션) 구현
masonry layout을 활용한 포트폴리오 페이지 구현
문의(Contact) 폼 유효성 검증, 개인정보 처리방침 모달 팝업 기능 개발
SI·SM / 디지털사이니지 사업 영역별 탭 네비게이션 및 콘텐츠 자동 활성화 기능
관리자 페이지용 문의 리스트 레이아웃 제작


④ 주안점
기업의 기술적 전문성과 브랜드 정체성을 시각적으로 일관되게 표현하고자 했습니다.
특히 다양한 디바이스 환경에서도 품질이 유지되도록 반응형 최적화에 가장 큰 비중을 두었으며,
뷰포트가 작은 갤럭시 폴드(320px)부터 UHD(3840×2160)까지 폭넓은 해상도에서도 레이아웃이 무너지지 않도록 세밀하게 조정했습니다.
또한 정보 접근성을 높이기 위해 구조를 간결하게 설계하고,
플로팅 버튼과 고정 헤더를 통해 페이지 간 이동을 직관적으로 구현했습니다.

<위시켓 이용 약관에 의해 수정된 내용입니다.>