Convention Solution
11년간 쌓아온 정교한 기획은 행사의 모든 순간을
특별한 기억으로 완성합니다.
# OPENER 홈페이지 재현 가이드
## 🎨 디자인 분석 요약
OPENER는 **미니멀하고 엘레강트한 디자인**에 **큰 타이포그래피**와 **전체 화면 이미지**를 사용하는 프리미엄 브랜드 웹사이트입니다.
### 핵심 디자인 특징
- ✨ **다크 테마** 기반 (검은색 배경, 흰색 텍스트)
- 📐 **전체 화면 섹션** (Full-viewport sections)
- 🔤 **대형 타이포그래피** (Hero 섹션의 큰 헤드라인)
- 🖼️ **배경 이미지 오버레이**
- ⚪ **미니멀 색상 팔레트** (흰색, 검정, 골드 악센트)
- 📱 **모바일 최적화** 레이아웃
---
## 1️⃣ 색상 팔레트 수정
### 기존 변수 교체
```css
:root {
/* Primary Colors - OPENER Style */
--color-primary: #D4AF37; /* 골드 악센트 */
--color-primary-dark: #B8960C; /* 다크 골드 */
--color-secondary: #FFFFFF; /* 흰색 */
--color-accent: #D4AF37; /* 골드 */
/* Text Colors - Dark Theme */
--color-text-primary: #FFFFFF; /* 메인 텍스트 (흰색) */
--color-text-secondary: #CCCCCC; /* 보조 텍스트 */
--color-text-light: #999999; /* 연한 텍스트 */
/* Background Colors - Dark Theme */
--color-bg-primary: #000000; /* 메인 배경 (검정) */
--color-bg-secondary: #1A1A1A; /* 보조 배경 */
--color-bg-overlay: rgba(0, 0, 0, 0.5); /* 이미지 오버레이 */
/* Border */
--color-border: #333333; /* 어두운 테두리 */
}
```
---
## 2️⃣ 타이포그래피 수정
### 폰트 스타일
```css
:root {
/* Font Families */
--font-primary: 'Noto Sans KR', 'Pretendard', -apple-system, sans-serif;
--font-heading: 'Montserrat', 'Noto Sans KR', sans-serif;
--font-display: 'Oswald', 'Montserrat', sans-serif; /* 큰 헤드라인용 */
/* Typography Scale - LARGER for OPENER style */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-md: 1.125rem; /* 18px */
--font-size-lg: 1.5rem; /* 24px */
--font-size-xl: 2rem; /* 32px */
--font-size-2xl: 3rem; /* 48px */
--font-size-3xl: 4rem; /* 64px */
--font-size-4xl: 5rem; /* 80px */
--font-size-5xl: 6rem; /* 96px - Hero용 */
/* Letter Spacing */
--letter-spacing-tight: -0.02em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.05em;
--letter-spacing-wider: 0.1em;
}
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Noto+Sans+KR:wght@300;400;500;700&family=Oswald:wght@400;500;600;700&display=swap');
```
---
## 3️⃣ 레이아웃 구조 수정
### Hero 섹션 - 전체 화면 스타일
```css
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: url('hero-bg.jpg') center/cover no-repeat;
background-attachment: fixed; /* Parallax effect */
color: white;
text-align: center;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: var(--color-bg-overlay);
z-index: 1;
}
.hero .container {
position: relative;
z-index: 2;
max-width: 1400px;
}
.hero-headline {
font-family: var(--font-display);
font-size: clamp(2.5rem, 8vw, 6rem); /* 반응형 크기 */
font-weight: 700;
line-height: 1.1;
letter-spacing: var(--letter-spacing-tight);
margin-bottom: var(--space-lg);
text-transform: uppercase;
/* OPENER 스타일 텍스트 효과 */
background: linear-gradient(to bottom, #FFFFFF 0%, #CCCCCC 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subheadline {
font-size: clamp(1rem, 2vw, 1.5rem);
font-weight: 300;
letter-spacing: var(--letter-spacing-wide);
max-width: 800px;
margin: 0 auto;
line-height: 1.8;
}
```
### HTML 구조 수정
```html
BEYOND BOUNDARIES,
```
---
## 4️⃣ Value Proposition 섹션
```css
.value-proposition {
padding: var(--space-5xl) 0;
background: var(--color-bg-primary);
text-align: center;
}
.value-proposition h2 {
font-family: var(--font-heading);
font-size: var(--font-size-3xl);
font-weight: 300;
margin-bottom: var(--space-xl);
color: var(--color-text-primary);
}
.value-proposition .highlight {
color: var(--color-primary);
font-weight: 500;
}
.value-text {
font-size: var(--font-size-lg);
font-weight: 300;
letter-spacing: var(--letter-spacing-wide);
line-height: 2;
max-width: 900px;
margin: 0 auto;
color: var(--color-text-secondary);
}
```
```html
```
---
## 5️⃣ Services 섹션 - 이미지 배경 스타일
```css
.services {
padding: 0; /* No padding for full-bleed sections */
}
.service-card {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
color: white;
text-align: center;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
transition: background var(--transition-slow);
}
.service-card:hover::before {
background: rgba(0, 0, 0, 0.4);
}
.service-card-content {
position: relative;
z-index: 2;
max-width: 800px;
padding: var(--space-3xl);
}
.service-title {
font-family: var(--font-heading);
font-size: var(--font-size-3xl);
font-weight: 700;
margin-bottom: var(--space-xl);
letter-spacing: var(--letter-spacing-wide);
}
.service-description {
font-size: var(--font-size-md);
font-weight: 300;
line-height: 2;
letter-spacing: var(--letter-spacing-wide);
}
```
```html
```
---
## 6️⃣ Membership 섹션
```css
.membership {
padding: var(--space-5xl) 0;
background: var(--color-bg-secondary);
text-align: center;
}
.membership .section-title {
font-size: var(--font-size-2xl);
font-weight: 300;
margin-bottom: var(--space-lg);
color: var(--color-text-primary);
}
.membership-subtitle {
font-size: var(--font-size-md);
font-weight: 300;
letter-spacing: var(--letter-spacing-wide);
line-height: 2;
color: var(--color-text-secondary);
margin-bottom: var(--space-3xl);
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.membership-logos {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-xl);
flex-wrap: wrap;
max-width: 1000px;
margin: 0 auto;
}
.membership-logos img {
height: 60px;
filter: brightness(0) invert(1); /* 로고를 흰색으로 */
opacity: 0.7;
transition: opacity var(--transition-base);
}
.membership-logos img:hover {
opacity: 1;
}
```
```html
```
---
## 7️⃣ Metrics 섹션 - 배경 이미지 스타일
```css
.metrics {
position: relative;
padding: var(--space-5xl) 0;
background: url('metrics-bg.jpg') center/cover no-repeat;
background-attachment: fixed;
color: white;
text-align: center;
}
.metrics::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
}
.metrics .container {
position: relative;
z-index: 2;
}
.metrics-title {
font-size: var(--font-size-2xl);
font-weight: 300;
letter-spacing: var(--letter-spacing-wide);
margin-bottom: var(--space-4xl);
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3xl);
max-width: 1000px;
margin: 0 auto;
}
.metric-item {
text-align: center;
}
.metric-number {
display: block;
font-family: var(--font-display);
font-size: var(--font-size-5xl);
font-weight: 700;
color: var(--color-primary);
margin-bottom: var(--space-md);
line-height: 1;
}
.metric-label {
display: block;
font-size: var(--font-size-xl);
font-weight: 300;
color: white;
text-transform: capitalize;
letter-spacing: var(--letter-spacing-wider);
}
@media (max-width: 768px) {
.metrics-grid {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
}
```
```html
숫자가 증명하는
```
---
## 8️⃣ Partners 섹션
```css
.partners {
padding: var(--space-5xl) 0;
background: var(--color-bg-primary);
text-align: center;
}
.partners .section-title {
font-size: var(--font-size-2xl);
font-weight: 300;
margin-bottom: var(--space-lg);
color: var(--color-text-primary);
}
.partners-subtitle {
font-size: var(--font-size-md);
font-weight: 300;
letter-spacing: var(--letter-spacing-wide);
line-height: 2;
color: var(--color-text-secondary);
margin-bottom: var(--space-3xl);
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-xl);
max-width: 1200px;
margin: 0 auto;
}
.partner-logo {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-lg);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: all var(--transition-base);
}
.partner-logo:hover {
background: var(--color-bg-primary);
border-color: var(--color-primary);
transform: translateY(-4px);
}
.partner-logo img {
max-width: 120px;
height: auto;
filter: brightness(0) invert(1);
opacity: 0.6;
transition: opacity var(--transition-base);
}
.partner-logo:hover img {
opacity: 1;
}
```
```html
```
---
## 9️⃣ CTA 섹션
```css
.cta {
position: relative;
padding: var(--space-5xl) 0;
background: url('cta-bg.jpg') center/cover no-repeat;
background-attachment: fixed;
text-align: center;
color: white;
}
.cta::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
}
.cta .container {
position: relative;
z-index: 2;
}
.cta-title {
font-size: var(--font-size-3xl);
font-weight: 300;
letter-spacing: var(--letter-spacing-wide);
margin-bottom: var(--space-lg);
}
.cta-text {
font-size: var(--font-size-lg);
font-weight: 300;
letter-spacing: var(--letter-spacing-wide);
margin-bottom: var(--space-3xl);
color: var(--color-text-secondary);
}
.cta-button {
display: inline-block;
padding: var(--space-lg) var(--space-3xl);
font-size: var(--font-size-md);
font-weight: 500;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-bg-primary);
background: var(--color-primary);
border: 2px solid var(--color-primary);
border-radius: 0; /* Sharp corners for OPENER style */
text-decoration: none;
text-transform: uppercase;
transition: all var(--transition-base);
cursor: pointer;
}
.cta-button:hover {
background: transparent;
color: var(--color-primary);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}
```
```html
```
---
## 🔟 Footer
```css
.footer {
background: var(--color-bg-primary);
border-top: 1px solid var(--color-border);
padding: var(--space-4xl) 0 var(--space-xl);
color: var(--color-text-secondary);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-3xl);
margin-bottom: var(--space-3xl);
}
.footer-section h3,
.footer-section h4 {
color: var(--color-text-primary);
font-size: var(--font-size-lg);
font-weight: 500;
margin-bottom: var(--space-md);
letter-spacing: var(--letter-spacing-wide);
}
.footer-section p,
.contact-list li {
font-size: var(--font-size-sm);
line-height: 2;
letter-spacing: var(--letter-spacing-wide);
}
.contact-list {
list-style: none;
}
.social-links {
display: flex;
gap: var(--space-md);
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
text-decoration: none;
transition: all var(--transition-base);
}
.social-links a:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-bg-primary);
}
.footer-bottom {
padding-top: var(--space-xl);
border-top: 1px solid var(--color-border);
text-align: center;
font-size: var(--font-size-xs);
letter-spacing: var(--letter-spacing-wide);
}
```
---
## 1️⃣1️⃣ 추가 인터랙션
### Scroll Indicator (Hero 섹션 하단)
```css
.scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
}
.scroll-indicator span {
display: block;
width: 1px;
height: 50px;
background: white;
position: relative;
}
.scroll-indicator span::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-primary);
animation: scroll-bounce 2s infinite;
}
@keyframes scroll-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(10px); }
}
```
### Smooth Reveal Animations
```css
/* Fade in on scroll */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
```
```javascript
// main.js에 추가
function initScrollReveal() {
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
}
});
}, { threshold: 0.1 });
reveals.forEach(reveal => observer.observe(reveal));
}
document.addEventListener('DOMContentLoaded', () => {
initScrollReveal();
// ... other initializations
});
```
---
## 1️⃣2️⃣ 네비게이션 스타일
```css
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-fixed);
background: transparent;
transition: all var(--transition-base);
}
.header.scrolled {
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-lg) var(--space-xl);
}
.logo {
font-family: var(--font-heading);
font-size: var(--font-size-xl);
font-weight: 700;
letter-spacing: var(--letter-spacing-wider);
color: white;
text-decoration: none;
}
.nav-menu {
display: flex;
gap: var(--space-xl);
list-style: none;
}
.nav-menu a {
font-size: var(--font-size-sm);
font-weight: 500;
letter-spacing: var(--letter-spacing-wide);
color: white;
text-decoration: none;
text-transform: uppercase;
transition: color var(--transition-base);
position: relative;
}
.nav-menu a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 1px;
background: var(--color-primary);
transition: width var(--transition-base);
}
.nav-menu a:hover {
color: var(--color-primary);
}
.nav-menu a:hover::after {
width: 100%;
}
```
```javascript
// Navbar scroll effect
window.addEventListener('scroll', () => {
const header = document.querySelector('.header');
if (window.scrollY > 100) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
```
---
## 🎯 체크리스트: OPENER 스타일 구현
### 디자인 요소
- [ ] 다크 테마 색상 적용 (검정 배경, 흰색 텍스트)
- [ ] 골드 악센트 컬러 (#D4AF37)
- [ ] 대형 타이포그래피 (Hero 6rem 이상)
- [ ] 전체 화면 섹션 (100vh)
- [ ] 배경 이미지 오버레이 효과
### 레이아웃
- [ ] Fixed navigation with scroll effect
- [ ] Full-viewport hero section
- [ ] Background image sections
- [ ] Centered text layouts
- [ ] Minimal spacing, breathing room
### 타이포그래피
- [ ] Montserrat/Oswald for headings
- [ ] Noto Sans KR for body
- [ ] Wide letter-spacing
- [ ] Light font weights (300)
- [ ] Uppercase for labels
### 인터랙션
- [ ] Scroll indicator animation
- [ ] Navbar transparency → solid on scroll
- [ ] Hover effects on cards
- [ ] Counter animations for metrics
- [ ] Smooth scroll to sections
- [ ] Fade-in animations on scroll
### 이미지
- [ ] High-quality background images
- [ ] Dark overlays (rgba(0,0,0,0.5-0.7))
- [ ] Parallax scrolling (background-attachment: fixed)
- [ ] Logo filters (brightness/invert for white logos)
---
## 📝 최종 권장사항
1. **이미지 준비**: 고해상도 배경 이미지 (최소 1920x1080) 필수
2. **폰트 로딩**: Google Fonts에서 Montserrat, Oswald 임포트
3. **모바일 최적화**: 모든 큰 텍스트는 `clamp()` 함수로 반응형 처리
4. **성능**: 이미지 최적화 (WebP 포맷, lazy loading)
5. **접근성**: 다크 테마에서도 충분한 대비율 유지
이 가이드를 따라하면 OPENER와 매우 유사한 프리미엄 웹사이트를 구현할 수 있습니다!
BEYOND BOUNDARIES,
INFINITE EXPLORATION
시간이 지나도 행복한 기억처럼,
프로세스를 넘어 새로운 경험으로.
Limitless All Event Solution
불가능을 해결하는 심플한 솔루션.
오프너는 새로운 경험을 만듭니다.
Exhibition Creation
우리는 전시공간을 새롭게 정의합니다.
감각적인 기획과 연출을 통해 깊은 여운을 남기는
몰입형 경험을 선사합니다.
Design Essence
디자인은 우리만의 또다른 언어입니다.
단순한 시각적 요소가 아닌 잊을 수 없는 비주얼 경험을
만들어 냅니다.
MEMBERSHIP
오프너는 국내외 다양한 협단체 회원사로
산업의 발전과 글로벌 네트워크 확장을 이루고 있습니다.
숫자가 증명하는
신뢰와 성장의 발자취
0
Years
0
Projects
0
Partners
PARTNERS
오프너는 단순한 고객 관계를 넘어,
함께 성장하고 가치를 만드는 진정한 파트너십을 추구합니다.