| | <!DOCTYPE html> |
| | <html lang="ko"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>시각디자인업 - 케이미디어</title> |
| | <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| | <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap'); |
| | body { font-family: 'Noto Sans KR', sans-serif; scroll-behavior: smooth; } |
| | .glass-effect { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } |
| | .gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } |
| | .mosaic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; } |
| | .mosaic-item { border-radius: 1rem; overflow: hidden; position: relative; transition: transform .4s ease; } |
| | .mosaic-item:hover { transform: scale(1.05) rotate(-1deg); } |
| | .mosaic-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(102,126,234,.2), rgba(118,75,162,.2)); opacity: 0; transition: opacity .4s; } |
| | .mosaic-item:hover::after { opacity: 1; } |
| | .morph-card { background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%); border-radius: 2rem; padding: 2.5rem; position: relative; overflow: hidden; } |
| | .morph-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(102,126,234,.1) 0%, transparent 70%); transform: rotate(30deg); transition: transform .6s; } |
| | .morph-card:hover::before { transform: rotate(0deg) scale(1.2); } |
| | .neon-btn { background: linear-gradient(45deg, #667eea, #764ba2); color: #fff; border: none; padding: .75rem 1.5rem; border-radius: 999px; font-weight: 600; position: relative; overflow: hidden; z-index: 1; } |
| | .neon-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, #fff, #fff); opacity: 0; transition: opacity .3s; z-index: -1; } |
| | .neon-btn:hover::before { opacity: .2; } |
| | .floating { animation: float 4s ease-in-out infinite; } |
| | @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } } |
| | </style> |
| | </head> |
| | <body class="bg-gray-50 text-gray-800"> |
| | |
| | <nav class="fixed w-full z-50 glass-effect py-4 px-6"> |
| | <div class="container mx-auto flex justify-between items-center"> |
| | <a href="index.html" class="text-2xl font-bold text-white">KMedia</a> |
| | <div class="hidden md:flex space-x-8"> |
| | <a href="about.html" class="text-white hover:text-purple-200 transition">회사소개</a> |
| | <a href="index.html#business" class="text-white hover:text-purple-200 transition">사업영역</a> |
| | <a href="index.html#promotion" class="text-white hover:text-purple-200 transition">홍보마당</a> |
| | <a href="index.html#communication" class="text-white hover:text-purple-200 transition">소통마당</a> |
| | </div> |
| | <button class="md:hidden text-white"><i data-feather="menu"></i></button> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section class="relative pt-32 pb-20 bg-gradient-to-br from-purple-600 via-indigo-600 to-indigo-700 text-white overflow-hidden"> |
| | <div class="absolute -top-20 -left-20 w-96 h-96 bg-purple-500 rounded-full opacity-20 blur-3xl floating"></div> |
| | <div class="absolute -bottom-16 -right-16 w-80 h-80 bg-indigo-500 rounded-full opacity-20 blur-3xl floating" style="animation-delay: 2s;"></div> |
| | <div class="container mx-auto px-6 text-center relative z-10"> |
| | <h1 class="text-4xl md:text-6xl font-bold mb-6" data-aos="fade-up">시각디자인업</h1> |
| | <p class="text-xl md:text-2xl max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100"> |
| | 기업과 상품의 브랜드 가치를 시각적으로 표현하고 감동을 전합니다 |
| | </p> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-white"> |
| | <div class="container mx-auto px-6"> |
| | <div class="max-w-4xl mx-auto text-center mb-16" data-aos="fade-up"> |
| | <h2 class="text-3xl font-bold mb-6">시각으로 전하는 감동</h2> |
| | <p class="text-lg text-gray-600 leading-relaxed"> |
| | 케이미디어는 단순히 예쁜 디자인을 넘어, 브랜드의 이야기와 가치를 |
| | 시각적 언어로 풀어내어 타깃에게 깊은 감동을 전달합니다. |
| | </p> |
| | </div> |
| | <div class="grid md:grid-cols-3 gap-8"> |
| | <div class="morph-card text-center box-3d" data-aos="zoom-in"> |
| | <div class="relative z-10"> |
| | <div class="inline-block p-4 rounded-2xl bg-indigo-100 mb-4"><i data-feather="eye" class="text-indigo-600 text-2xl"></i></div> |
| | <h3 class="text-xl font-bold mb-2">심미적 완성도</h3> |
| | <p class="text-gray-600 text-sm">완성도 높은 시각 표현으로 브랜드 품격을 높입니다</p> |
| | </div> |
| | </div> |
| | <div class="morph-card text-center box-3d" data-aos="zoom-in" data-aos-delay="100"> |
| | <div class="relative z-10"> |
| | <div class="inline-block p-4 rounded-2xl bg-purple-100 mb-4"><i data-feather="target" class="text-purple-600 text-2xl"></i></div> |
| | <h3 class="text-xl font-bold mb-2">전략적 접근</h3> |
| | <p class="text-gray-600 text-sm">브랜드 전략에 기반한 효과적 시각 커뮤니케이션</p> |
| | </div> |
| | </div> |
| | <div class="morph-card text-center box-3d" data-aos="zoom-in" data-aos-delay="200"> |
| | <div class="relative z-10"> |
| | <div class="inline-block p-4 rounded-2xl bg-pink-100 mb-4"><i data-feather="heart" class="text-pink-600 text-2xl"></i></div> |
| | <h3 class="text-xl font-bold mb-2">감성적 연결</h3> |
| | <p class="text-gray-600 text-sm">감성을 자극하는 디자인으로 소비자와의 깊은 연결</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-gray-50"> |
| | <div class="container mx-auto px-6"> |
| | <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Portfolio Mosaic</h2> |
| | <div class="mosaic-grid" data-aos="fade-up"> |
| | <div class="mosaic-item h-40 bg-gradient-to-br from-purple-400 to-indigo-500 flex items-end p-4 text-white font-semibold">Brand Identity</div> |
| | <div class="mosaic-item h-56 bg-gradient-to-br from-indigo-400 to-purple-500 flex items-end p-4 text-white font-semibold">Package Design</div> |
| | <div class="mosaic-item h-40 bg-gradient-to-br from-pink-400 to-purple-500 flex items-end p-4 text-white font-semibold">Editorial Design</div> |
| | <div class="mosaic-item h-48 bg-gradient-to-br from-indigo-500 to-pink-400 flex items-end p-4 text-white font-semibold">Web Graphic</div> |
| | <div class="mosaic-item h-56 bg-gradient-to-br from-purple-500 to-indigo-400 flex items-end p-4 text-white font-semibold">Poster Design</div> |
| | <div class="mosaic-item h-40 bg-gradient-to-br from-pink-500 to-indigo-500 flex items-end p-4 text-white font-semibold">Logo Design</div> |
| | <div class="mosaic-item h-48 bg-gradient-to-br from-indigo-400 to-pink-500 flex items-end p-4 text-white font-semibold">UI/UX Design</div> |
| | <div class="mosaic-item h-48 bg-gradient-to-br from-purple-400 to-pink-500 flex items-end p-4 text-white font-semibold">Motion Graphic</div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-white"> |
| | <div class="container mx-auto px-6"> |
| | <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Design Spectrum</h2> |
| | <div class="max-w-5xl mx-auto grid md:grid-cols-2 gap-8"> |
| | <div data-aos="fade-right"> |
| | <img src="http://static.photos/studio/640x360/1" alt="Studio" class="rounded-2xl shadow-lg w-full"> |
| | </div> |
| | <div class="flex flex-col justify-center space-y-4" data-aos="fade-left"> |
| | <div class="flex items-start"><span class="inline-block px-3 py-1 rounded-full bg-indigo-100 text-indigo-700 text-xs font-bold mr-3 mt-1">01</span><div><h4 class="font-bold">Brand Identity</h4><p class="text-gray-600 text-sm">로고, 컬러, 타이포, 패턴까지 통합 브랜드 시스템 설계</p></div></div> |
| | <div class="flex items-start"><span class="inline-block px-3 py-1 rounded-full bg-purple-100 text-purple-700 text-xs font-bold mr-3 mt-1">02</span><div><h4 class="font-bold">Package Design</h4><p class="text-gray-600 text-sm">제품의 매력을 극대화하는 창의적 패키지 디자인</p></div></div> |
| | <div class="flex items-start"><span class="inline-block px-3 py-1 rounded-full bg-pink-100 text-pink-700 text-xs font-bold mr-3 mt-1">03</span><div><h4 class="font-bold">Promotion Design</h4><p class="text-gray-600 text-sm">포스터, 배너, 브로셔 등 프로모션 전반의 시각물</p></div></div> |
| | <div class="flex items-start"><span class="inline-block px-3 py-1 rounded-full bg-gray-100 text-gray-700 text-xs font-bold mr-3 mt-1">04</span><div><h4 class="font-bold">UI/UX Design</h4><p class="text-gray-600 text-sm">사용자 경험을 고려한 인터페이스 디자인</p></div></div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-gray-50"> |
| | <div class="container mx-auto px-6"> |
| | <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Design Journey</h2> |
| | <div class="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-6"> |
| | <div class="text-center box-3d bg-white p-4 rounded-2xl" data-aos="zoom-in"><div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-3"><i data-feather="edit-3" class="text-indigo-600"></i></div><h4 class="font-bold">Sketch</h4><p class="text-xs text-gray-500">아이디어 스케치</p></div> |
| | <div class="text-center box-3d bg-white p-4 rounded-2xl" data-aos="zoom-in" data-aos-delay="100"><div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3"><i data-feather="layout" class="text-purple-600"></i></div><h4 class="font-bold">Design</h4><p class="text-xs text-gray-500">시각적 구현</p></div> |
| | <div class="text-center box-3d bg-white p-4 rounded-2xl" data-aos="zoom-in" data-aos-delay="200"><div class="w-14 h-14 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-3"><i data-feather="message-circle" class="text-pink-600"></i></div><h4 class="font-bold">Feedback</h4><p class="text-xs text-gray-500">피드백 반영</p></div> |
| | <div class="text-center box-3d bg-white p-4 rounded-2xl" data-aos="zoom-in" data-aos-delay="300"><div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3"><i data-feather="check-circle" class="text-green-600"></i></div><h4 class="font-bold">Launch</h4><p class="text-xs text-gray-500">최종 완성</p></div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-gradient-to-r from-purple-600 to-indigo-600 text-white"> |
| | <div class="container mx-auto px-6 text-center"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-6" data-aos="fade-up">당신의 브랜드를 빛나게 할 디자인을 만나보세요</h2> |
| | <p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">지금 바로 상담을 신청하시면 전문 디자이너가 함께합니다.</p> |
| | <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200"> |
| | <button class="neon-btn">무료 상담 신청</button> |
| | <button class="neon-btn bg-transparent border-2 border-white">포트폴리오 보기</button> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="bg-gray-900 text-white py-12"> |
| | <div class="container mx-auto px-6"> |
| | <div class="grid md:grid-cols-4 gap-8"> |
| | <div><h4 class="text-lg font-semibold mb-4">KMedia</h4><p class="text-gray-400">사람 중심의 창의적인 미디어 솔루션</p></div> |
| | <div><h4 class="text-lg font-semibold mb-4">연락처</h4><p class="text-gray-400">Tel: 02-1234-5678</p><p class="text-gray-400">Email: info@kmedia.com</p></div> |
| | <div><h4 class="text-lg font-semibold mb-4">주소</h4><p class="text-gray-400">서울특별시 강남구 테헤란로 123</p></div> |
| | <div><h4 class="text-lg font-semibold mb-4">Follow Us</h4><div class="flex space-x-4"><a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a><a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a><a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a><a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a></div></div> |
| | </div> |
| | <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"><p>© 2023 KMedia. All rights reserved.</p></div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | AOS.init({ duration: 1000, once: true }); |
| | feather.replace(); |
| | </script> |
| | </body> |
| | </html> |
