diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 5f15b9d..a3c5525 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -1,7 +1,9 @@
{
"permissions": {
"allow": [
- "Bash(npm run *)"
+ "Bash(npm run *)",
+ "PowerShell(New-Item *)",
+ "PowerShell(winget install *)"
]
}
}
diff --git a/frontend/about.png b/frontend/about.png
new file mode 100644
index 0000000..665cd20
Binary files /dev/null and b/frontend/about.png differ
diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css
index f6eb244..ef11ebb 100644
--- a/frontend/assets/css/main.css
+++ b/frontend/assets/css/main.css
@@ -9,10 +9,10 @@
--ink: #17181f;
--ink-soft: #6c6e78;
--line: #e6e7ec;
- --brand: #202a44;
+ --brand: #3556b0; /* 차분한 로열 블루 (톤다운된 포인트 컬러) */
--label: #5b687c;
- --accent: #202a44;
- --accent-soft: #dde1ec;
+ --accent: #3556b0;
+ --accent-soft: #e2e6f4; /* 로열 블루의 옅은 틴트 */
--danger: #c2473d;
--white: #ffffff;
--maxw: 90rem; /* 1440px */
@@ -82,7 +82,7 @@ a {
.btn-primary:hover {
transform: translateY(-0.125rem); /* -2px */
- background: #161e36;
+ background: #2a4490; /* 로열 블루 hover */
}
/* ============================================================
diff --git a/frontend/assets/images/img-innerdyset.png b/frontend/assets/images/img-innerdyset.png
deleted file mode 100644
index c882978..0000000
Binary files a/frontend/assets/images/img-innerdyset.png and /dev/null differ
diff --git a/frontend/assets/images/img-innerzen.png b/frontend/assets/images/img-innerzen.png
deleted file mode 100644
index c6e740f..0000000
Binary files a/frontend/assets/images/img-innerzen.png and /dev/null differ
diff --git a/frontend/assets/images/img-nyangtea.png b/frontend/assets/images/img-nyangtea.png
new file mode 100644
index 0000000..4fcb43d
Binary files /dev/null and b/frontend/assets/images/img-nyangtea.png differ
diff --git a/frontend/assets/images/img-recurely.png b/frontend/assets/images/img-recurely.png
index 60a839a..28b4317 100644
Binary files a/frontend/assets/images/img-recurely.png and b/frontend/assets/images/img-recurely.png differ
diff --git a/frontend/assets/images/img-retriq.png b/frontend/assets/images/img-retriq.png
deleted file mode 100644
index 737c543..0000000
Binary files a/frontend/assets/images/img-retriq.png and /dev/null differ
diff --git a/frontend/assets/images/img-selite.png b/frontend/assets/images/img-selite.png
index 62e6aae..8753212 100644
Binary files a/frontend/assets/images/img-selite.png and b/frontend/assets/images/img-selite.png differ
diff --git a/frontend/assets/videos/growth.mp4 b/frontend/assets/videos/growth.mp4
new file mode 100644
index 0000000..b2cd943
Binary files /dev/null and b/frontend/assets/videos/growth.mp4 differ
diff --git a/frontend/assets/videos/hero.mp4 b/frontend/assets/videos/hero.mp4
new file mode 100644
index 0000000..c8e92ba
Binary files /dev/null and b/frontend/assets/videos/hero.mp4 differ
diff --git a/frontend/components/AppFooter.vue b/frontend/components/AppFooter.vue
index 840bc32..5876bfc 100644
--- a/frontend/components/AppFooter.vue
+++ b/frontend/components/AppFooter.vue
@@ -11,8 +11,8 @@
@@ -65,6 +65,16 @@ footer {
line-height: 1.7;
}
+.foot-company p a {
+ color: inherit;
+ text-decoration: none;
+}
+
+.foot-company p a:hover {
+ color: var(--brand);
+ text-decoration: underline;
+}
+
.foot-company p + p {
margin-top: 0.5rem; /* 8px */
}
diff --git a/frontend/components/AppHeader.vue b/frontend/components/AppHeader.vue
index 16db8af..faaba52 100644
--- a/frontend/components/AppHeader.vue
+++ b/frontend/components/AppHeader.vue
@@ -62,7 +62,7 @@ header {
}
.nav-cta:hover {
- background: #161e36;
+ background: #2a4490; /* 로열 블루 hover */
transform: translateY(-0.0625rem);
}
diff --git a/frontend/composables/useSeo.ts b/frontend/composables/useSeo.ts
new file mode 100644
index 0000000..cbaf75f
--- /dev/null
+++ b/frontend/composables/useSeo.ts
@@ -0,0 +1,39 @@
+// 페이지별 SEO 메타 설정 — title/description/Open Graph/Twitter/canonical 일괄 처리
+// 각 페이지에서 useSeo({ ... }) 한 번만 호출하면 된다.
+
+interface SeoOptions {
+ title: string // 페이지 제목 ( + og:title)
+ description: string // 메타 설명 (검색결과/공유 미리보기)
+ path: string // 라우트 경로 (canonical·og:url 구성), 예: '/', '/coffee-chat'
+ image?: string // OG 이미지 경로 (기본 /og-image.jpg)
+ noindex?: boolean // 검색 노출 제외 여부
+}
+
+export function useSeo(opts: SeoOptions) {
+ const config = useRuntimeConfig()
+ // 끝 슬래시 제거 후 절대 URL 구성
+ const siteUrl = String(config.public.siteUrl || '').replace(/\/$/, '')
+ const url = siteUrl + opts.path
+ const image = siteUrl + (opts.image || '/og-image.jpg')
+
+ useSeoMeta({
+ title: opts.title,
+ description: opts.description,
+ ogTitle: opts.title,
+ ogDescription: opts.description,
+ ogUrl: url,
+ ogImage: image,
+ ogImageWidth: 1200,
+ ogImageHeight: 630,
+ ogImageAlt: opts.title,
+ twitterTitle: opts.title,
+ twitterDescription: opts.description,
+ twitterImage: image,
+ robots: opts.noindex ? 'noindex, nofollow' : 'index, follow',
+ })
+
+ // canonical 링크 — 중복 콘텐츠 방지
+ useHead({
+ link: [{ rel: 'canonical', href: url }],
+ })
+}
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 2ccca08..ade0157 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -22,6 +22,8 @@ export default defineNuxtConfig({
runtimeConfig: {
public: {
apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || '/api',
+ // SEO 기준 사이트 URL (canonical/og:url/sitemap 생성용)
+ siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://innertab.co.kr',
},
},
@@ -34,9 +36,20 @@ export default defineNuxtConfig({
{ charset: 'UTF-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
{ name: 'description', content: '이너탭(innertab) 채용 — 사람의 매일이 닿는 모든 곳에서 가장 앞선 답을 증명합니다.' },
+ // SEO 전역 기본값 (페이지별 값은 useSeo 컴포저블이 덮어씀)
+ { name: 'theme-color', content: '#3556b0' },
+ { name: 'format-detection', content: 'telephone=no' },
+ { property: 'og:site_name', content: '이너탭 innertab' },
+ { property: 'og:type', content: 'website' },
+ { property: 'og:locale', content: 'ko_KR' },
+ { name: 'twitter:card', content: 'summary_large_image' },
],
link: [
- { rel: 'icon', href: '/favicon.ico' },
+ // 파비콘 — 헤더 로고(ITAB) 기반
+ { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
+ { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
+ { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
+ { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
{
diff --git a/frontend/pages/coffee-chat.vue b/frontend/pages/coffee-chat.vue
index 19cf3e5..81679f0 100644
--- a/frontend/pages/coffee-chat.vue
+++ b/frontend/pages/coffee-chat.vue
@@ -2,7 +2,12 @@
// 커피챗 신청 — 클라이언트 검증 + 완료 화면 (원본 바닐라 JS → Vue 반응형 이식)
import { reactive, ref, nextTick } from 'vue'
-useHead({ title: '커피챗 신청 | innertab' })
+useSeo({
+ title: '커피챗 신청 | 이너탭(innertab)',
+ description:
+ '정식 지원 전에 이너탭 담당자와 가볍게 이야기 나눠보세요. 약 30분 내외, 온·오프라인으로 진행되는 커피챗을 신청할 수 있습니다.',
+ path: '/coffee-chat',
+})
// 폼 상태
const form = reactive({
@@ -551,7 +556,7 @@ select.ctrl {
}
.submit:hover {
- background: #161e36;
+ background: #2a4490; /* 로열 블루 hover */
transform: translateY(-0.125rem); /* -2px */
}
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index d3a1855..400e85d 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,19 +1,54 @@
<script setup lang="ts">
// 메인(채용 홈) — Hero / About / 브랜드 / Growth / People / CTA
-useHead({ title: '이너탭 (innertab)' })
+const config = useRuntimeConfig()
+const siteUrl = String(config.public.siteUrl || '').replace(/\/$/, '')
+
+useSeo({
+ title: '이너탭(innertab) — 누군가의 매일을 더 낫게 만드는 일',
+ description:
+ '이너탭(innertab)은 2023년 창립 이후 꾸준히 성장하는 D2C 스타트업입니다. 셀라이트·리큐어리 등 다양한 브랜드로 고객에게 꼭 필요한 해답을 제공합니다. 함께 성장할 동료를 찾습니다.',
+ path: '/',
+})
+
+// 조직 구조화 데이터(JSON-LD) — 검색엔진의 회사 정보 인식
+useHead({
+ script: [
+ {
+ type: 'application/ld+json',
+ innerHTML: JSON.stringify({
+ '@context': 'https://schema.org',
+ '@type': 'Organization',
+ name: '이너탭',
+ alternateName: 'innertab',
+ url: siteUrl,
+ logo: `${siteUrl}/images/img-itab.png`,
+ email: 'innertab@gmail.com',
+ foundingDate: '2023',
+ address: {
+ '@type': 'PostalAddress',
+ addressCountry: 'KR',
+ addressRegion: '서울특별시',
+ addressLocality: '강남구',
+ streetAddress: '삼성동 121-38, 304호',
+ },
+ sameAs: ['https://selite.kr', 'https://retriq.co.kr'],
+ }),
+ },
+ ],
+})
// 브랜드 타일 데이터
interface BrandTile {
name: string
img: string
feature?: boolean
+ link?: string // 외부 링크 URL (없으면 출시예정)
+ comingSoon?: boolean // 출시예정 여부
}
const brands: BrandTile[] = [
- { name: 'selite', img: '/images/img-selite.png', feature: true },
- { name: 'INNERDYSET', img: '/images/img-innerdyset.png' },
- { name: 'recurely', img: '/images/img-recurely.png' },
- { name: 'innerzen', img: '/images/img-innerzen.png' },
- { name: 'retriq', img: '/images/img-retriq.png' },
+ { name: 'selite', img: '/images/img-selite.png', link: 'https://selite.kr' },
+ { name: 'recurely', img: '/images/img-recurely.png', link: 'https://retriq.co.kr' },
+ { name: 'nyangtea', img: '/images/img-nyangtea.png', comingSoon: true },
]
// 성장 지표 데이터
@@ -30,29 +65,33 @@ const stats: Stat[] = [
{ title: '더 나은 일상을 연구한 시간', value: 1200, unit: '일', desc: '작은 변화가 만드는 큰 차이를\n매일 관찰하고 개선해왔습니다.' },
]
-// 주요 연혁
-const history: string[] = [
- '일 최대 매출 4,500만원 달성',
- '미국 법인 설립',
- '홍콩 법인 설립',
- '한국 소비자 평가 대상 2회',
+// 주요 연혁 — 년도 + 내용
+interface HistoryItem {
+ year: string
+ text: string
+}
+const history: HistoryItem[] = [
+ { year: '2026', text: '일 최대 매출 4,500만원 달성' },
+ { year: '2026', text: '미국 법인 설립' },
+ { year: '2025', text: '홍콩 법인 설립' },
+ { year: '2025', text: '한국 소비자 평가 대상 2회' },
]
-// 구성원 카드 (실제 사진 준비 전 — 플레이스홀더)
-interface PeopleCard {
- label: string
- shape: 'tall' | 'wide'
- title: string
- desc: string
-}
-const peopleColA: PeopleCard[] = [
- { label: '회사 사진 — 종무식', shape: 'tall', title: '2025 이너탭 종무식 : “Together, We Rise”', desc: '함께 만든 시간, 더 높이 올라가기 위한 시작' },
- { label: '회사 사진 — 인터뷰', shape: 'wide', title: '꿈은 크게, 실행은 집요하게!', desc: '브랜드사업본부장, 조이' },
-]
-const peopleColB: PeopleCard[] = [
- { label: '회사 사진 — 구성원', shape: 'wide', title: '2025 Innertab Superookie', desc: '최고의 순간은 함께 만든 성장 속에서 — 슈퍼루키 5인의 성장 스토리' },
- { label: '회사 사진 — 인터뷰', shape: 'tall', title: '실험·회고·학습으로 실제로 팔리는 브랜드를 만듭니다', desc: '글로벌사업본부 영미권실장, Gaby' },
-]
+// 구성원 카드 — PEOPLE 섹션 비활성화로 함께 주석 처리 (재활성화 시 아래 + 템플릿 주석 해제)
+// interface PeopleCard {
+// label: string
+// shape: 'tall' | 'wide'
+// title: string
+// desc: string
+// }
+// const peopleColA: PeopleCard[] = [
+// { label: '회사 사진 — 종무식', shape: 'tall', title: '2025 이너탭 종무식 : “Together, We Rise”', desc: '함께 만든 시간, 더 높이 올라가기 위한 시작' },
+// { label: '회사 사진 — 인터뷰', shape: 'wide', title: '꿈은 크게, 실행은 집요하게!', desc: '브랜드사업본부장, 조이' },
+// ]
+// const peopleColB: PeopleCard[] = [
+// { label: '회사 사진 — 구성원', shape: 'wide', title: '2025 Innertab Superookie', desc: '최고의 순간은 함께 만든 성장 속에서 — 슈퍼루키 5인의 성장 스토리' },
+// { label: '회사 사진 — 인터뷰', shape: 'tall', title: '실험·회고·학습으로 실제로 팔리는 브랜드를 만듭니다', desc: '글로벌사업본부 영미권실장, Gaby' },
+// ]
</script>
<template>
@@ -61,7 +100,21 @@ const peopleColB: PeopleCard[] = [
<!-- ===================== HERO ===================== -->
<section class="hero">
- <div class="hero-video"><span class="ph-label">▶ Hero Video</span></div>
+ <!-- 히어로 배경 영상 — 자동재생/무음/반복(모바일 인라인 재생)
+ poster: 실제 첫 프레임을 즉시 표시해 로딩 중 빈 섹션 제거
+ source 우선순위: WebM(VP9, 더 작음) → MP4(폴백) -->
+ <video
+ class="hero-video"
+ poster="/images/hero-poster.webp"
+ autoplay
+ muted
+ loop
+ playsinline
+ preload="auto"
+ >
+ <source src="/videos/hero.webm" type="video/webm" >
+ <source src="/videos/hero-opt.mp4" type="video/mp4" >
+ </video>
<div class="scroll-hint"><span>SCROLL</span><i /></div>
</section>
@@ -69,45 +122,78 @@ const peopleColB: PeopleCard[] = [
<section id="mission" class="about">
<div class="wrap">
<div class="inner">
- <p v-reveal class="m-eyebrow">ABOUT ITAB</p>
- <p v-reveal="{ delay: 80 }" class="m-lead">누군가의 매일을 더 낫게 만드는 일,</p>
- <h2 v-reveal="{ delay: 160 }" class="m-title">이너탭은 <mark>그 답</mark>을 제시합니다.</h2>
+ <p v-reveal class="about-eyebrow">누군가의 매일을 더 낫게 만드는 일</p>
+ <h2 v-reveal="{ delay: 100 }" class="m-title">고객만을 위한 <mark>해답</mark>을 제공합니다.</h2>
- <p v-reveal class="about-intro">매일은 당연한 의문들로 시작됩니다.</p>
- <ul class="q-list">
- <li v-reveal="{ delay: 60 }">더 가뿐한 아침은 불가능할까?</li>
- <li v-reveal="{ delay: 160 }">더 단단한 나를 만드는 방법은 무엇일까?</li>
- </ul>
+ <p v-reveal="{ delay: 160 }" class="about-intro">
+ 이너탭은 2023년 창립 이후 꾸준히 성장하고 있는 D2C 스타트업입니다.<br >
+ 올리브 캡슐 ‘올베라진’, 밀크씨슬 브랜드 ‘리필앤칸 액티브’ 등<br >
+ 다양한 비즈니스로 고객에게 다가가고 있습니다.
+ </p>
- <div v-reveal class="about-statement">
- <p>이너탭은 질문에 답하는 무게가 다릅니다.</p>
- <p>타협 없는 설계로 본질을 짚고, 데이터와 결과로 증명합니다.</p>
- <p>우리는 안주하지 않습니다.</p>
- <p class="closing">사람의 매일이 닿는 모든 곳에서,<br >우리는 가장 앞선 답을 증명합니다.</p>
- </div>
+ <!-- 미션 / 비전 — 라벨 + 영문 타이틀 + 국문 설명 (구분선 분리) -->
+ <dl class="mv-list">
+ <div v-reveal class="mv-row">
+ <dt class="mv-label">Mission</dt>
+ <dd class="mv-content">
+ <h3 class="mv-title">Build Better. Sell Bester</h3>
+ <p class="mv-desc">고객에게 필요한 제품을 잘 만들고,<br >그 가치를 누구보다 잘 전달합니다.</p>
+ </dd>
+ </div>
+ <div v-reveal="{ delay: 100 }" class="mv-row">
+ <dt class="mv-label">Vision</dt>
+ <dd class="mv-content">
+ <h3 class="mv-title">Be the Brand Found on the Desks of People We Love</h3>
+ <p class="mv-desc">우리가 만든 제품이<br >누구나 알만한 브랜드로 거듭나도록 합니다.</p>
+ </dd>
+ </div>
+ </dl>
</div>
<!-- 브랜드 벤토 그리드 -->
<div id="brands" class="brand-bento">
- <article
+ <component
+ :is="brand.link ? 'a' : 'div'"
v-for="(brand, i) in brands"
:key="brand.name"
v-reveal:scale="{ delay: i * 70 }"
class="btile"
- :class="{ feature: brand.feature }"
+ :class="{ feature: brand.feature, 'coming-soon': brand.comingSoon }"
+ :href="brand.link || undefined"
+ :target="brand.link ? '_blank' : undefined"
+ :rel="brand.link ? 'noopener noreferrer' : undefined"
+ :aria-label="brand.comingSoon ? `${brand.name} 출시예정` : `${brand.name} 바로가기`"
>
<img :src="brand.img" :alt="`${brand.name} 브랜드 이미지`" >
<div class="tile-overlay" />
<span class="tile-name">{{ brand.name }}</span>
- <span class="tile-arrow" aria-hidden="true">↗</span>
- </article>
+ <!-- 출시예정 배지 / 외부링크 화살표 -->
+ <span v-if="brand.comingSoon" class="tile-badge">출시예정</span>
+ <span v-else class="tile-arrow" aria-hidden="true">↗</span>
+ </component>
</div>
</div>
</section>
<!-- ===================== GROWTH ===================== -->
<section id="growth" class="growth">
- <div class="growth-bg"><span class="bg-label">BACKGROUND VIDEO</span></div>
+ <!-- 배경 영상 — 히어로와 동일하게 무한 반복 / poster·WebM·MP4 폴백 -->
+ <div class="growth-bg">
+ <video
+ class="growth-video"
+ poster="/images/growth-poster.webp"
+ autoplay
+ muted
+ loop
+ playsinline
+ preload="auto"
+ >
+ <source src="/videos/growth.webm" type="video/webm" >
+ <source src="/videos/growth-opt.mp4" type="video/mp4" >
+ </video>
+ <!-- 라이트 스크림 — 어두운 텍스트/글래스 카드 가독성 유지 -->
+ <div class="growth-scrim" />
+ </div>
<div class="wrap">
<div class="growth-head">
<p v-reveal class="m-eyebrow">Growth</p>
@@ -137,9 +223,15 @@ const peopleColB: PeopleCard[] = [
<div v-reveal="{ delay: 120 }" class="gcard history-card">
<div class="gcard-title">주요 연혁 내역</div>
+ <!-- 슬로건 — 연혁 카드에 메시지 부여 -->
+ <p class="history-slogan">끊임없는 도전으로 써내려간 성장의 기록</p>
<ul class="timeline">
<li v-for="(item, i) in history" :key="i" v-reveal="{ delay: 200 + i * 90 }">
- <span class="t-text">{{ item }}</span>
+ <!-- 같은 년도가 연속되면 시각적으로 묶어 표기 -->
+ <span class="t-year" :class="{ 'is-repeat': i > 0 && history[i - 1].year === item.year }">
+ {{ item.year }}
+ </span>
+ <span class="t-text">{{ item.text }}</span>
</li>
</ul>
</div>
@@ -147,7 +239,8 @@ const peopleColB: PeopleCard[] = [
</div>
</section>
- <!-- ===================== PEOPLE ===================== -->
+ <!-- ===================== PEOPLE (비활성화 — 사이트에서 숨김) ===================== -->
+ <!--
<section id="people" class="people">
<div class="wrap">
<div class="people-head">
@@ -176,6 +269,7 @@ const peopleColB: PeopleCard[] = [
</div>
</div>
</section>
+ -->
<!-- ===================== CTA ===================== -->
<section id="cta" class="cta">
@@ -200,18 +294,18 @@ const peopleColB: PeopleCard[] = [
/* ===================== HERO ===================== */
.hero {
position: relative;
- min-height: clamp(35rem, 86vh, 51.25rem); /* 560~820px */
- display: flex;
- align-items: flex-end;
overflow: hidden;
+ /* 영상 로드 전 폴백 배경 — 흰 섹션으로 즉시 표시 */
+ background: var(--white);
}
.hero-video {
- position: absolute;
- inset: 0;
- display: grid;
- place-items: center;
- background: linear-gradient(160deg, #161d33 0%, #202a44 55%, #33415f 100%);
+ display: block;
+ width: 100%; /* 가로폭을 꽉 채움 */
+ height: auto; /* 높이는 원본 비율대로 — 가로폭만큼 커짐 */
+ aspect-ratio: 16 / 9; /* 원본 1280x720 비율 — 로드 전 높이 예약 */
+ max-height: 62.5rem; /* 최대 높이 제한 */
+ object-fit: cover; /* 높이 제한에 걸리면 늘어나지 않고 크롭 (poster에도 동일 적용) */
/* 로드 시 살짝 확대된 상태에서 천천히 안착 (Ken Burns) */
animation: hero-settle 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@@ -225,15 +319,6 @@ const peopleColB: PeopleCard[] = [
}
}
-.hero-video .ph-label {
- color: rgba(255, 255, 255, 0.4);
- font-size: 0.9375rem; /* 15px */
- letter-spacing: 0.18em;
- text-transform: uppercase;
- font-weight: 600;
- animation: hero-fade-in 1.2s ease 0.4s both;
-}
-
@keyframes hero-fade-in {
from {
opacity: 0;
@@ -298,7 +383,7 @@ const peopleColB: PeopleCard[] = [
/* ===================== ABOUT ===================== */
.about {
- padding: clamp(4.5rem, 11vw, 9.375rem) 0; /* 72~150px */
+ padding: clamp(3.5rem, 8.5vw, 7.5rem) 0; /* 56~120px — 세로 간격 축소 */
background: var(--white);
}
@@ -315,11 +400,11 @@ const peopleColB: PeopleCard[] = [
letter-spacing: 0.1em;
}
-.m-lead {
+.about-eyebrow {
font-size: clamp(1rem, 1.7vw, 1.25rem); /* 16~20px */
color: var(--ink-soft);
font-weight: 500;
- margin-top: 1.875rem; /* 30px */
+ letter-spacing: -0.01em;
}
.m-title {
@@ -331,7 +416,7 @@ const peopleColB: PeopleCard[] = [
}
.m-title mark {
- background: var(--brand);
+ background: var(--ink); /* 검은색 하이라이트 */
color: var(--white);
padding: 0.04em 0.14em;
border-radius: 0.125rem; /* 2px */
@@ -340,59 +425,53 @@ const peopleColB: PeopleCard[] = [
.about-intro {
font-size: clamp(1rem, 1.5vw, 1.1875rem); /* 16~19px */
color: var(--ink-soft);
- margin-top: clamp(2.5rem, 5vw, 4rem); /* 40~64px */
+ margin-top: clamp(1.75rem, 3.5vw, 2.75rem); /* 28~44px — 세로 간격 축소 */
}
-.q-list {
- list-style: none;
- margin-top: 1.375rem; /* 22px */
- display: flex;
- flex-direction: column;
- gap: 0.875rem; /* 14px */
+/* 미션 / 비전 리스트 — 각 행을 상단 구분선으로 분리 */
+.mv-list {
+ margin: clamp(2.5rem, 5vw, 4rem) 0 0; /* 상단 40~64px — 세로 간격 축소 */
}
-.q-list li {
- font-size: clamp(1.25rem, 2.4vw, 1.875rem); /* 20~30px */
- font-weight: 700;
- letter-spacing: -0.02em;
- color: var(--ink);
- line-height: 1.35;
- padding-left: 1.625rem; /* 26px */
- position: relative;
+.mv-content {
+ margin: 0; /* dd 기본 들여쓰기 제거 */
}
-.q-list li::before {
- content: 'Q.';
- position: absolute;
- left: 0;
- top: 0.08em;
- color: var(--label);
- font-weight: 800;
- font-size: 0.78em;
-}
-
-.about-statement {
- margin-top: clamp(3.5rem, 7vw, 6rem); /* 56~96px */
- padding-top: clamp(2.5rem, 5vw, 3.75rem); /* 40~60px */
+.mv-row {
+ display: grid;
+ grid-template-columns: minmax(10rem, 18%) 1fr; /* 라벨 | 내용 */
+ gap: clamp(1.5rem, 4vw, 4rem);
+ align-items: start;
+ padding: clamp(1.5rem, 3vw, 2.25rem) 0; /* 24~36px — 세로 간격 축소 */
border-top: 0.0625rem solid var(--line);
- display: flex;
- flex-direction: column;
- gap: 0.25rem; /* 4px */
}
-.about-statement p {
- font-size: clamp(1rem, 1.6vw, 1.25rem); /* 16~20px */
- color: var(--ink-soft);
- line-height: 1.5;
+.mv-row:last-child {
+ border-bottom: 0.0625rem solid var(--line);
}
-.about-statement .closing {
- font-size: clamp(1.375rem, 2.6vw, 2.125rem); /* 22~34px */
- font-weight: 800;
- letter-spacing: -0.02em;
+.mv-label {
+ font-family: var(--font-display);
+ font-size: clamp(1.75rem, 3vw, 2.5rem); /* 28~40px — 확대 */
+ font-weight: 700;
+ letter-spacing: 0.02em;
color: var(--ink);
- line-height: 1.4;
+ line-height: 1;
+}
+
+.mv-title {
+ font-size: clamp(1.4375rem, 2.6vw, 2.0625rem); /* 23~33px — 확대 */
+ font-weight: 800;
+ letter-spacing: -0.01em;
+ color: var(--ink);
+ line-height: 1.3;
+}
+
+.mv-desc {
margin-top: 0.875rem; /* 14px */
+ font-size: clamp(1.0625rem, 1.7vw, 1.3125rem); /* 17~21px — 확대 */
+ color: var(--ink-soft);
+ line-height: 1.6;
}
/* ===================== 브랜드 벤토 ===================== */
@@ -406,11 +485,18 @@ const peopleColB: PeopleCard[] = [
.btile {
position: relative;
+ display: block;
overflow: hidden;
border-radius: 1.25rem; /* 20px */
aspect-ratio: 1;
background: #11151f;
cursor: pointer; /* 이미지 위에서 포인터 커서 */
+ text-decoration: none; /* a 태그 밑줄 제거 */
+}
+
+/* 출시예정 타일 — 클릭 불가, 기본 커서 */
+.btile.coming-soon {
+ cursor: default;
}
.btile.feature {
@@ -482,6 +568,23 @@ const peopleColB: PeopleCard[] = [
transform: translateY(-0.125rem);
}
+/* 출시예정 배지 */
+.btile .tile-badge {
+ position: absolute;
+ right: clamp(1rem, 1.6vw, 1.375rem); /* 16~22px */
+ bottom: clamp(1rem, 1.6vw, 1.375rem);
+ z-index: 3;
+ padding: 0.5rem 0.875rem; /* 8~14px */
+ border-radius: 1.25rem; /* 20px */
+ border: 0.09375rem solid rgba(255, 255, 255, 0.7); /* 1.5px */
+ background: rgba(8, 11, 18, 0.35);
+ color: #fff;
+ font-size: 0.8125rem; /* 13px */
+ font-weight: 700;
+ letter-spacing: 0.02em;
+ pointer-events: none;
+}
+
/* ===================== GROWTH ===================== */
.growth {
position: relative;
@@ -493,23 +596,26 @@ const peopleColB: PeopleCard[] = [
position: absolute;
inset: 0;
z-index: 0;
- background:
- radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.55), transparent 20%),
- radial-gradient(circle at 70% 62%, rgba(255, 255, 255, 0.4), transparent 16%),
- radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.45), transparent 13%),
- radial-gradient(circle at 38% 82%, rgba(255, 255, 255, 0.4), transparent 16%),
- radial-gradient(circle at 58% 38%, rgba(120, 128, 136, 0.45), transparent 32%),
- linear-gradient(125deg, #aeb6bc 0%, #cbd1d6 46%, #a6aeb4 100%);
+ overflow: hidden;
+ background: #c2c8cd; /* 영상 로드 전 폴백 */
}
-.bg-label {
+.growth-video {
position: absolute;
- right: 1.125rem; /* 18px */
- bottom: 0.875rem; /* 14px */
- font-family: var(--font-display);
- font-size: 0.75rem; /* 12px */
- letter-spacing: 0.18em;
- color: rgba(40, 50, 70, 0.32);
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover; /* 섹션 전체를 비율 유지하며 채움 */
+}
+
+/* 라이트 스크림 — 영상 위에 실버 톤을 덧입혀 가독성 확보 */
+.growth-scrim {
+ position: absolute;
+ inset: 0;
+ background:
+ radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.5), transparent 24%),
+ radial-gradient(circle at 84% 70%, rgba(255, 255, 255, 0.4), transparent 22%),
+ linear-gradient(125deg, rgba(190, 196, 201, 0.62) 0%, rgba(210, 215, 220, 0.55) 50%, rgba(186, 193, 199, 0.62) 100%);
}
.growth .wrap {
@@ -562,6 +668,7 @@ const peopleColB: PeopleCard[] = [
.gcard-title,
.stat-big,
.stat-desc,
+.history-slogan,
.timeline {
position: relative;
z-index: 1;
@@ -637,6 +744,15 @@ const peopleColB: PeopleCard[] = [
flex-direction: column;
}
+/* 연혁 슬로건 — 제목 아래 메시지 */
+.history-slogan {
+ margin-top: 0.5rem; /* 8px */
+ font-size: 0.875rem; /* 14px */
+ font-weight: 600;
+ color: var(--brand);
+ letter-spacing: -0.01em;
+}
+
.timeline {
list-style: none;
margin-top: clamp(1.25rem, 2.5vw, 1.875rem); /* 20~30px */
@@ -646,7 +762,7 @@ const peopleColB: PeopleCard[] = [
.timeline li {
display: flex;
- gap: 1.125rem; /* 18px */
+ gap: 1rem; /* 16px */
align-items: baseline;
padding: clamp(0.9375rem, 1.6vw, 1.1875rem) 0; /* 15~19px */
border-top: 0.0625rem solid rgba(40, 50, 70, 0.1);
@@ -656,6 +772,23 @@ const peopleColB: PeopleCard[] = [
border-top: 0;
}
+/* 년도 표기 — 좌측 고정 폭, 브랜드 컬러 강조 */
+.timeline .t-year {
+ flex: none;
+ width: 2.875rem; /* 46px */
+ font-family: var(--font-display);
+ font-size: 1.0625rem; /* 17px */
+ font-weight: 700;
+ letter-spacing: 0.02em;
+ color: var(--brand);
+ line-height: 1.4;
+}
+
+/* 직전 항목과 같은 년도면 흐리게 → 같은 해 묶음으로 인식 */
+.timeline .t-year.is-repeat {
+ opacity: 0.28;
+}
+
.timeline .t-text {
font-size: 0.9375rem; /* 15px */
color: var(--ink);
@@ -813,6 +946,12 @@ const peopleColB: PeopleCard[] = [
grid-column: span 2;
aspect-ratio: 16 / 10;
}
+
+ /* 미션/비전: 좁은 화면에서는 라벨을 내용 위로 쌓음 */
+ .mv-row {
+ grid-template-columns: 1fr;
+ gap: 0.875rem; /* 14px */
+ }
}
@media (max-width: 32.5rem) {
@@ -853,7 +992,6 @@ const peopleColB: PeopleCard[] = [
/* 모션 최소화 선호 시 히어로/호버 애니메이션 비활성화 */
@media (prefers-reduced-motion: reduce) {
.hero-video,
- .hero-video .ph-label,
.scroll-hint,
.scroll-hint i::after {
animation: none !important;
diff --git a/frontend/pages/privacy.vue b/frontend/pages/privacy.vue
index 805f658..846eb2e 100644
--- a/frontend/pages/privacy.vue
+++ b/frontend/pages/privacy.vue
@@ -1,6 +1,11 @@
<script setup lang="ts">
// 개인정보처리방침 — 채용·커피챗 과정의 개인정보 처리 안내 문서
-useHead({ title: '개인정보처리방침 | innertab' })
+useSeo({
+ title: '개인정보처리방침 | 이너탭(innertab)',
+ description: '이너탭(innertab) 채용 홈페이지 및 커피챗 운영에 관한 개인정보 수집·이용·보관·파기 방침을 안내합니다.',
+ path: '/privacy',
+ noindex: true, // 정책 페이지 — 검색 노출 제외
+})
</script>
<template>
@@ -133,8 +138,7 @@ useHead({ title: '개인정보처리방침 | innertab' })
<p>회사는 개인정보 처리에 관한 업무를 총괄하고, 지원자의 문의·불만 처리 및 피해 구제를 위하여 개인정보 보호책임자를 지정하고 있습니다.</p>
<div class="contact-card">
<p class="role">개인정보 보호책임자</p>
- <p>이메일 <span>people@innertab.co.kr</span></p>
- <p>담당 부서 <span>People 팀</span></p>
+ <p>이메일 <span>innertab@gmail.com</span></p>
</div>
</div>
</section>
diff --git a/frontend/public/apple-touch-icon.png b/frontend/public/apple-touch-icon.png
new file mode 100644
index 0000000..70c4251
Binary files /dev/null and b/frontend/public/apple-touch-icon.png differ
diff --git a/frontend/public/favicon-16x16.png b/frontend/public/favicon-16x16.png
new file mode 100644
index 0000000..c52d1b6
Binary files /dev/null and b/frontend/public/favicon-16x16.png differ
diff --git a/frontend/public/favicon-32x32.png b/frontend/public/favicon-32x32.png
new file mode 100644
index 0000000..70cf911
Binary files /dev/null and b/frontend/public/favicon-32x32.png differ
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
index df36fcf..6e702fa 100644
Binary files a/frontend/public/favicon.ico and b/frontend/public/favicon.ico differ
diff --git a/frontend/public/images/growth-poster.webp b/frontend/public/images/growth-poster.webp
new file mode 100644
index 0000000..aa28923
Binary files /dev/null and b/frontend/public/images/growth-poster.webp differ
diff --git a/frontend/public/images/hero-poster.webp b/frontend/public/images/hero-poster.webp
new file mode 100644
index 0000000..33c6dab
Binary files /dev/null and b/frontend/public/images/hero-poster.webp differ
diff --git a/frontend/public/images/img-innerdyset.png b/frontend/public/images/img-innerdyset.png
deleted file mode 100644
index c882978..0000000
Binary files a/frontend/public/images/img-innerdyset.png and /dev/null differ
diff --git a/frontend/public/images/img-innerzen.png b/frontend/public/images/img-innerzen.png
deleted file mode 100644
index c6e740f..0000000
Binary files a/frontend/public/images/img-innerzen.png and /dev/null differ
diff --git a/frontend/public/images/img-nyangtea.png b/frontend/public/images/img-nyangtea.png
new file mode 100644
index 0000000..4fcb43d
Binary files /dev/null and b/frontend/public/images/img-nyangtea.png differ
diff --git a/frontend/public/images/img-recurely.png b/frontend/public/images/img-recurely.png
index 60a839a..28b4317 100644
Binary files a/frontend/public/images/img-recurely.png and b/frontend/public/images/img-recurely.png differ
diff --git a/frontend/public/images/img-retriq.png b/frontend/public/images/img-retriq.png
deleted file mode 100644
index 737c543..0000000
Binary files a/frontend/public/images/img-retriq.png and /dev/null differ
diff --git a/frontend/public/images/img-selite.png b/frontend/public/images/img-selite.png
index 62e6aae..8753212 100644
Binary files a/frontend/public/images/img-selite.png and b/frontend/public/images/img-selite.png differ
diff --git a/frontend/public/og-image.jpg b/frontend/public/og-image.jpg
new file mode 100644
index 0000000..b4dd669
Binary files /dev/null and b/frontend/public/og-image.jpg differ
diff --git a/frontend/public/robots.txt b/frontend/public/robots.txt
new file mode 100644
index 0000000..efa5708
--- /dev/null
+++ b/frontend/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://innertab.co.kr/sitemap.xml
diff --git a/frontend/public/sitemap.xml b/frontend/public/sitemap.xml
new file mode 100644
index 0000000..d8abcaa
--- /dev/null
+++ b/frontend/public/sitemap.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+ <url>
+ <loc>https://innertab.co.kr/</loc>
+ <lastmod>2026-06-01</lastmod>
+ <changefreq>weekly</changefreq>
+ <priority>1.0</priority>
+ </url>
+ <url>
+ <loc>https://innertab.co.kr/coffee-chat</loc>
+ <lastmod>2026-06-01</lastmod>
+ <changefreq>monthly</changefreq>
+ <priority>0.8</priority>
+ </url>
+</urlset>
diff --git a/frontend/public/videos/growth-opt.mp4 b/frontend/public/videos/growth-opt.mp4
new file mode 100644
index 0000000..db9132b
Binary files /dev/null and b/frontend/public/videos/growth-opt.mp4 differ
diff --git a/frontend/public/videos/growth.webm b/frontend/public/videos/growth.webm
new file mode 100644
index 0000000..9f3ffd1
Binary files /dev/null and b/frontend/public/videos/growth.webm differ
diff --git a/frontend/public/videos/hero-opt.mp4 b/frontend/public/videos/hero-opt.mp4
new file mode 100644
index 0000000..9c59f97
Binary files /dev/null and b/frontend/public/videos/hero-opt.mp4 differ
diff --git a/frontend/public/videos/hero.webm b/frontend/public/videos/hero.webm
new file mode 100644
index 0000000..7cbbde3
Binary files /dev/null and b/frontend/public/videos/hero.webm differ