JEEIN Co., Ltd. — Design Proposal 2026
JEEIN
Renewal
홈페이지 리뉴얼
기존 홈페이지 분석을 바탕으로 두 가지 방향의
디자인 컨셉을 제안합니다.
기존 홈페이지
문제점
정보 접근성 부족
한 번의 클릭으로 원하는 정보를 쉽게 확인하기 어려운 구조. 사용자가 원하는 정보를 찾기까지 다수의 클릭이 필요.
아이덴티티 부재
정형적인 폰트와 레이아웃으로 회사 고유의 아이덴티티가 드러나지 않음. 경쟁사와 차별화된 브랜드 인상을 주지 못함.
UX 비효율
문의하기 폼 이용률이 낮아 실질적인 커뮤니케이션 창구로서의 역할이 미흡. 방문자가 원하는 행동을 유도하는 동선 설계 부재.
개선
목표
직관적 UX
한 번의 클릭으로 원하는 정보를 확인할 수 있는 직관적인 구조. 수직 스크롤 중심의 단순하고 명확한 탐색 경험.
타임리스 미니멀리즘
유행을 타지 않는 디자인으로 시간이 지나도 품질이 유지되는 홈페이지. 군더더기 없이 시각적으로 쉽고 깔끔한 방향성.
브랜드 아이덴티티 강화
지인(주)만의 고유한 디자인 언어를 정립. 포트폴리오가 중심이 되는 레이아웃으로 작업물이 스스로 브랜드를 대변하도록.
제안 GNB 구조 (공통)
메인 홈페이지
포트폴리오 / 관련글
About
소개 / 프로세스 / 서비스 / 연혁
Contact
구성원 / 주소 / 연락처
인스타그램 계정 연동
Naver Blog
네이버 블로그 연동
본사 자료
기반
디벨롭
본사에서 제시한 '타임리스 미니멀리즘' 방향성을 충실히 구현하되, 각 페이지별 UX 요구사항을 세밀하게 반영한 디자인 방향입니다. Sebastian Wolf, Henry Wilson 등 참고 사이트의 미학을 지인(주)의 브랜드 아이덴티티에 맞게 재해석합니다.
메인 페이지
수직 스크롤
포트폴리오
풀스크린 이미지 기반의 수직 스크롤 레이아웃. 프로젝트 이미지에 마우스를 올리면 프로젝트명과 연도가 오버레이로 표시됩니다. 이미지 비율은 통일하여 일관된 시각적 리듬감을 만들어냅니다.
핵심 UX 요소
- —이미지 호버 시 프로젝트명 + 연도 표시
- —수평 스크롤 갤러리 (선택적)
- —고정 GNB + 투명 배경 처리
- —반응형 이미지 그리드
프로젝트 페이지
고정 정보 +
이미지 스크롤
프로젝트 개요(제목, 클라이언트, 연도, 면적, 서비스 유형)는 좌측에 고정되고, 우측에서 프로젝트 이미지만 스크롤됩니다. 이미지 비율은 모두 동일하게 통일하여 일관된 시각적 경험을 제공합니다.
핵심 UX 요소
- —좌측 프로젝트 정보 sticky 고정
- —우측 이미지만 독립 스크롤
- —통일된 이미지 비율 (16:9 또는 4:3)
- —이전/다음 프로젝트 하단 네비게이션
어바웃 페이지
그래픽 +
타이포 중심
2D 그래픽과 타이포그래피 레이아웃으로만 구성된 미니멀한 어바웃 페이지. 소개 → 워크 프로세스 다이어그램 → 서비스 내용 → 라이센스 → 연혁의 순서로 스크롤하며 회사를 경험하는 구조입니다.
페이지 구성 순서
- 01소개 이미지 + 핵심 문구
- 02워크 프로세스 다이어그램
- 03제공 서비스 목록
- 04회사 라이센스 정보
- 05프로젝트 연혁 타임라인
컨택트 페이지
필요한 정보만
깔끔하게
기존의 문의하기 폼을 제거하고, 실제 커뮤니케이션이 가능한 정보만 깔끔하게 배치합니다. 구성원 사진, 이메일, 전화번호, 주소, 운영시간을 타이포그래피 중심으로 표현합니다.
표시 정보
- —[email protected]
- —+82 (041) 564-5057
- —불당동 1374 / 31169, Republic of Korea
- —Mon–Fri 09:00–18:00
Direction A — 디자인 시스템
컬러 팔레트
Pure White
#FFFFFF
Deep Charcoal
#111111
Cool Slate
#6B7280
Light Gray
#F3F4F6
타이포그래피
Cormorant
히어로 전용 세리프 — Light, Italic (히어로 외 미사용)
Outfit
UI / 본문 / 캡션 — Light, Regular, Medium
Noto Sans KR
한국어 본문 — Light, Regular
모션 & 인터랙션
페이지 전환
Fade + Slide Up, 600ms ease-out
이미지 호버
Scale 1.03 + 오버레이 텍스트 Fade
스크롤 리빌
Clip-path Reveal, 900ms cubic-bezier
링크 호버
Underline Draw, 300ms ease
섹션 전환선
ScaleX 0→1, 800ms ease-out
새로운
컨셉
제안
본사 자료의 방향성을 존중하면서도, 지인(주)의 포트폴리오 규모와 클라이언트 수준에 걸맞은 더 강렬한 브랜드 존재감을 구축하는 새로운 접근입니다. '에디토리얼 아키텍처' 미학을 통해 건축/인테리어 회사만의 정밀함과 예술성을 동시에 표현합니다.
컨셉 핵심 원칙
타이포그래피가 구조물
대형 세리프 타이포그래피가 단순한 텍스트가 아닌 레이아웃의 건축적 요소로 기능합니다. 글자 자체가 공간을 구성하고 시선을 유도합니다.
다크 히어로 + 라이트 콘텐츠
메인 히어로 섹션은 딥 다크 배경으로 강렬한 첫인상을 만들고, 스크롤 시 라이트 콘텐츠 영역으로 자연스럽게 전환됩니다. 이 대비가 브랜드의 깊이를 표현합니다.
커스텀 커서 인터랙션
마우스 커서를 원형 커스텀 커서로 교체하고, 프로젝트 이미지 위에서는 프로젝트명이 커서 주변에 표시됩니다. 탐색 자체가 브랜드 경험이 됩니다.
비대칭 그리드 레이아웃
균등한 그리드 대신 의도적으로 비대칭적인 레이아웃을 사용합니다. 이는 건축 도면의 정밀함과 예술적 긴장감을 동시에 표현하는 방식입니다.
Direction B — 디자인 시스템
컬러 팔레트
Ink Black
#0A0A0A
Pure White
#FFFFFF
Cool Slate
#6B7280
Steel Gray
#374151
타이포그래피
Cormorant
히어로 전용 세리프 — Italic 강조
OUTFIT LIGHT
서브 헤드라인 / 캡션 — 자간 넓게
차별화 기능
Direction B — 히어로 섹션 컨셉
We Design
Space
& Experience
JEEIN Co., Ltd. — Architecture & Interior Design
Cheonan · Seoul
Direction B — 페이지 시안 탐색
두 방향의
비교
| 항목 | Direction A 본사 자료 기반 디벨롭 | Direction B 새로운 컨셉 제안 |
|---|---|---|
| 디자인 무드 | 타임리스 미니멀리즘 — 조용하고 정제된 고급스러움 | 에디토리얼 아키텍처 — 강렬하고 예술적인 존재감 |
| 배경 컬러 | 순백 (#FFFFFF) 기반 라이트 테마 | 잉크 블랙 (#0A0A0A) 히어로 + 오프화이트 콘텐츠 |
| 타이포그래피 | Cormorant + Outfit — 우아하고 읽기 쉬운 조합 | Cormorant Italic 강조 + Outfit 와이드 트래킹 |
| 레이아웃 | 단일 컬럼 + 풀블리드 이미지 교차 | 비대칭 그리드 + 대형 배경 섹션 번호 |
| 인터랙션 | 부드러운 스크롤 리빌 + 이미지 호버 오버레이 | 커스텀 커서 + 클립패스 리빌 + 다크↔라이트 전환 |
| 개발 난이도 | 중간 — 표준 React + CSS 애니메이션 | 높음 — 커스텀 커서, 복잡한 레이아웃 전환 필요 |
| 유지보수 | 쉬움 — 구조가 단순하고 직관적 | 중간 — 인터랙션 요소 관리 필요 |
| 적합한 상황 | 빠른 론칭, 안정적인 브랜드 구축 | 차별화된 브랜드 포지셔닝, 어워드 수상 목표 |
어떤 방향을
선택할까요?
두 방향 모두 지인(주)의 브랜드 가치를 효과적으로 표현할 수 있습니다. 선택은 회사가 추구하는 브랜드 포지셔닝과 론칭 일정에 따라 달라집니다.
안정적인 리뉴얼을 원한다면
본사의 방향성을 충실히 반영하면서 현재 홈페이지의 문제점을 해결합니다. 개발 기간이 짧고 유지보수가 용이하며, 타임리스한 디자인으로 장기간 품질을 유지할 수 있습니다.
차별화된 존재감을 원한다면
삼성SDI, 한국기술교육대학교 등 대형 클라이언트와의 작업 수준에 걸맞은 강렬한 브랜드 존재감을 구축합니다. 업계 내 차별화된 포지셔닝과 어워드 수상을 목표로 한다면 이 방향이 적합합니다.
두 방향의 장점을 결합
Direction A의 구조적 안정성과 Direction B의 다크 히어로 + 커스텀 커서 인터랙션을 결합하는 방법도 있습니다. 메인 히어로는 B의 강렬함으로, 내부 페이지는 A의 미니멀리즘으로 구성하는 하이브리드 접근입니다.
지인(주) — 지혜로운 사람들