본문 바로가기
포트폴리오[기업]

[파인씨앤아이] 기업발전을 위한 반응형홈페이지제작 고퀄리티 다국어홈페이지제작은 "매스티지"에서 !

by (주)매스티지 2024. 7. 4.

안녕하세요~!

20년노하우, 국내 최다 홈페이지제작 매스티지입니다^^

오늘 소개해드릴 기업홈페이지는!

데이터에 가치를 더하는

스마트산업 디지털 전환 솔루션 전문기업 

파인씨앤아이의 반응형 홈페이지입니다^^

 

 

PC, 노트북, 태블릿, 스마트폰과 같은 다양한 디바이스 해상도에서

최적의 화면으로 볼 수 있도록 모바일에 최적화된 반응형 홈페이지로 제작되었어요^^

모바일에 최적화되어 제작된 파인씨앤아이 홈페이지

사용자가 언제 어디서든 모든 해상도에서 쾌적환 화면으로 볼 수 있도록

스마트폰에서 완벽하게 구현되었답니다.

 

 

 

파인씨앤아이

파인씨앤아이

www.pinecni.com


 

파인씨앤아이스마트 데이터허브(PINE-V1) 제품이

한국정보통신기술협회(TTA)의 스마트시티 데이터 허브 제품 인증을 획득한

데이터 플랫폼 전문기업입니다.

스마트시티 및 산업디지털 전환을 위한

데이터 솔루션 프로세스 제공하여 도시 및 산업 전반에 걸쳐 생성되는

빅데이터를 효율적으로 수집하고 효과적으로 활용해

데이터 선순환 생태계를 조성하고 있습니다.

또한 파인씨앤아이는 데이터 허브의 원천 기술 개발사이며,

본 솔루션을 지자체 및 공공기관에 구축하여 다양한 데이터의 연계·수집을 통한

스마트 서비스 구현 경험을 다수 보유하고 있습니다.

 


​ 메인페이지

 

 

풀페이지 형태의 와이드한 레이아웃으로 구조로 제작했어요^^

파인씨앤아이라는 브랜드와 비즈니스를 잘 소개할 수 있는 컨텐츠로 구성해

사용자입장에서 

직관적이면서 가독성 높게 만들었습니다.


 

 

깨끗하면서 신뢰를 상징하는 블루컬러를 활용해

데이터 플랫폼 기업 파인씨앤아이상징성을 강조시켰답니다:)

블루컬러는 일반적으로 데이터하면 떠오르는 색상이기 때문에

파인씨앤아이와 이질감없이 참 잘 어울리는 컬러라는 생각이 드네요^^

또, 마우스 오버시 효과와 다양한 요소의 그래픽 디자인에 적용시켜 제작되었어요.

 


 

 

 

파인씨앤아이의 대표기술 스마트산업, 데이터와

잘 어울리는 이미지를 제작해 백그라운드로 넣었고,

슬라이드 형식의 레이아웃을 3Page로 구성했답니다!

스마트산업 디지털 전환 솔루션 전문기업을 문구를 집어넣어

다시 한번 데이터플랫폼 기업을 강조시켰어요^^

일정 시간이 지나면 페이지가 자동으로 이동되며

좌우에 화살표 버튼을 클릭하여 페이지를 직접 이동이 가능하답니다.

하단에 슬라이드 페이지탭을 통해 해당 페이지 인지가  쉽도록 제작되었어요.

 


 

 

GNB가 마우스 스크롤에 상관없이 상단에 계속 고정되어

홈페이지를 이용하는데 접근성을 높였고,

각 컨텐츠별 백그라운드에 따라 GNB 레이아웃을 변형시켜

가독성이 높아지게 제작되었어요^^

내비게이션 메뉴에 마우스를 올리면 서브페이지 전체 메뉴가 보여지는데요!

역시 포인트 컬러를 활용해 마우스 오버시 효과를 주었답니다:)

 


 

 

파인씨앤아이 다국어 홈페이지로도 제작되었는데요!

상단 다국어 메뉴 KOR/ENG를 클릭해 국문, 영문홈페이지 이용이 가능하답니다^^

국내뿐만 아니라 해외시장으로 뻗어 나가기 위해서

기업의 다국어홈페이지 제작은 필수라고 말씀드렸었죠~?

국문홈페이지와 영문홈페이지의 동일화면이 역시 이질감없이

자연스럽게 구현되도록 다국어 맞춤으로 제작되었답니다:)


 

가로가 긴 3단 그리드 형태의 레이아웃으로 구성했으며

요소에 어울리는 백그라운드 이미지를 넣고 하단에 텍스트를 배치했답니다.

각 요소에 마우스를 올리면 텍스트가 올라감과 동시에

포인트 컬러로 백그라운드 컬러가 바뀌는데요

클릭하면 해당 내용 상세페이지로 이동해

저 자세한 내용을 확인할 수 있습니다^^

 


 

 

 

 

파인씨앤아이와 협업한 많은 기업들을 노출시켜

전문성을 부각시키고 신뢰가는 이미지를 구축했습니다.

하단 뉴스룸 컨텐츠를 통해 파인씨앤아이

다양한 뉴스소식, 근황을 살펴볼 수 있으며,

하단 더보기 버튼을 클릭해 더 많은 정보확인이 가능하답니다^^

 


 

 

 

가운데 MORE 버튼을 클릭하면 파인씨앤아이위치,

전화번호, 이메일 주소 등을 확인할 수 있는

상세정보 페이지로 이동합니다:)

 


서브페이지

 

 

상단에 서브비주얼 이미지와 어울리는 백그라운드를 삽입하고

그 위에 페이지명을 배치했답니다.

또, 하단 서브 하위메뉴 뎁스 탭을 만들어

서브페이지 별 페이지 이동을 용이하게 만들었어요.

파인씨앤아이의 기업경영 비전, 가치를 소개하는 컨텐츠로

포인트 컬러를 활용해 서브페이지 컨텐츠내 레이아웃 강약을 조절했답니다^^

 


 

 

 

데이터 플랫폼 전문기업 파인씨앤아이설립일, 위치, 대표번호 등을

간단히 소개하는 컨텐츠를 포인트 컬러그라데이션을 활용해

제작해 기업 브랜드를 강조시켰는데요,

여기서는 컨텐츠가 상하로 반복 움직이는 애니메이션 효과를 넣어

사용자의 몰입감을 높이고 흥미를 유발시키도록 만들었답니다:0

 


기술소개페이지

 

 

 
 

 

파인씨앤아이의 기술력을 고객들이 이해하기 쉽게 돕기 위해

최대한 직관적인 아이콘과 일러스트를 활용해 제작했는데요!

컨텐츠 내용들을 강조하기위해 포인트 컬러와 이질감없이

잘 어울리는 컬러를 함께 강조되는 포인트에 사용했답니다^^


사업영역

 
 

 

파인씨앤아이가 하는 사업영역을

다이어그램, 도형 등 다양한 레이아웃으로 제작했습니다^^

 


구축사례페이지

 

 

 

파인씨앤아이의 사업 구축사례를 소개하는 컨텐츠로

갤러리 형식의 배너형태 레이아웃으로 제작했습니다.

좌측 상단에 파인씨앤아이사업영역을 박스형태로 띄우고

하단에 구축 날짜를 보여줌으로써 페이지로

직접 들어가지 않아도 간단한 구축사례 정보를 확인할 수 있답니다~!

 


해당 구축사례를 클릭하면 자세한 구축사례 내용을 확인하는 상세페이지로 이동합니다:)

 

 

20년의 노하우로 고객의 니즈를 정확하게 파악하고,
먼저 제시하는 기획중심 홈페이지 제작 매스티지가 귀하와 함께 하겠습니다.

 

 

▼ 홈페이지 제작 및 문의▼

매스티지 홈페이지 바로가기 클릭