sweech · 위시켓(Wishket)

프로젝트 배경

구일파인텍은 산업기계 제조 및 엔지니어링 사업을 병행하는 복합 기업으로, 각기 다른 두 사업 부문의 정체성을 분리해 보여줄 수 있는 홈페이지가 필요했습니다.
기존에는 명확한 콘텐츠 구분 없이 단일 레이아웃으로 구성되어 있어, 고객사별 정보 전달력이 떨어지는 문제가 있었습니다. 이에 따라 각 사업 부문에 특화된 콘텐츠 구성과 UI/UX 설계를 통해 기업 신뢰도를 높이는 홈페이지를 구축하였습니다.

프로젝트 성과

사업별 정보 구조 이원화

2개 사업부를 분리 구성함으로써 방문자의 정보 탐색 효율이 개선되었습니다.

브랜드 이미지 향상

주요 B2B 고객사의 피드백을 반영해, 신뢰성 중심의 UI 설계로 기업 이미지가 강화되었습니다.

장기 운영 유지

개발 완료 이후 현재까지 5년 이상 서버 운영·유지보수를 안정적으로 수행 중입니다.

핵심 기능

✅ 반응형 콘텐츠 및 구조 설계

PC 및 모바일 환경에 최적화된 반응형 레이아웃을 구현하여, 다양한 디바이스에서 동일한 사용성을 확보했습니다.

✅ 사업부문별 콘텐츠 분리

산업기계 사업부와 엔지니어링 부문을 시각적으로 구분해 콘텐츠 흐름을 분리 구성했습니다.

✅ 서버 유지보수 자동화

Docker 기반 환경에서 배포한 뒤, 연간 점검 및 업데이트를 포함한 서버 유지보수 체계를 구축했습니다.

진행 단계

요구사항 정의 및 기획

2019.08.

• 2개 사업 부문의 콘텐츠 분리 구성 기획
• 경쟁사 기업 홈페이지 UI/구조 벤치마킹 수행

디자인 및 화면 설계

2019.09.

• 기업 이미지에 맞는 톤앤매너 설계
• 반응형 화면 구성 및 관리자 협업을 통한 시안 확정

개발 및 배포

2019.10.

• HTML/CSS/JS 기반 정적 웹사이트 개발
• Docker 환경 배포 및 점검/유지보수 체계 수립

프로젝트 상세

포트폴리오 소개
구일파인텍은 제조업 기반의 B2B 기업으로, 자사의 기술력과 사업 영역을 소개하기 위한 반응형 홈페이지를 구축하는 프로젝트였습니다.
사업부문이 2개로 구분되어 있어 콘텐츠 분기 구조가 필요했으며, 고객 접점 확보를 위한 게시판 및 문의 시스템도 함께 구현하였습니다.
이후 클라이언트의 요청에 따라, "매년 연속적인 유지보수"까지 안정적으로 수행해왔습니다.

작업 범위
• 기획: 사업부문 분기 콘텐츠 구성, 기본 메뉴 구성 및 정보 설계
• 디자인: 부문별 톤앤매너 반영한 UI 설계, 반응형 레이아웃 디자인
• 개발: HTML/CSS/JavaScript 기반 프론트엔드, Docker 기반 배포
• 운영환경: 연 단위 서버 운영 및 보안 패치, 클라이언트 교육 지원

주요 기능 및 업무
• 회사소개, 사업소개, 고객지원 메뉴 구조 구현
• 부문별 콘텐츠 구분 설계 (예: 산업 부문 vs 건축 부문 등)
• 게시판(공지/문의) 및 기본 검색·첨부 기능 제공
• 관리자 페이지를 통한 콘텐츠 편집 기능 구축

주안점
• 비개발 인력을 위한 관리자 콘텐츠 등록 기능 간소화
• PC/모바일 환경 모두에서 최적화된 콘텐츠 전달 구조 설계
• 정기적 서버 관리 및 보안 대응 체계 수립
• 두 개의 독립된 콘텐츠 흐름을 반영한 유연한 IA 설계