웹소품-드라마
완료
프로젝트 설명
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
line-height: 1.8;
color: #222;
background: #f5f5f5;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0;
background: white;
}
header {
background: #2c3e50;
padding: 50px 60px;
border-bottom: 4px solid #34495e;
}
h1 {
color: white;
font-size: 2em;
margin-bottom: 15px;
font-weight: 700;
letter-spacing: -0.5px;
}
.subtitle {
color: #ecf0f1;
font-size: 1.1em;
font-weight: 400;
}
.main-content {
background: white;
padding: 60px;
}
h2 {
color: #2c3e50;
font-size: 1.8em;
margin: 50px 0 25px 0;
padding-bottom: 12px;
border-bottom: 3px solid #34495e;
font-weight: 700;
}
h2:first-of-type {
margin-top: 0;
}
h3 {
color: #34495e;
font-size: 1.3em;
margin: 25px 0 15px 0;
font-weight: 600;
}
.service-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin: 30px 0;
}
.service-card {
background: white;
padding: 30px;
border: 2px solid #e0e0e0;
transition: border-color 0.3s ease;
}
.service-card:hover {
border-color: #34495e;
}
.service-card h3 {
color: #2c3e50;
margin-top: 0;
font-size: 1.2em;
margin-bottom: 15px;
font-weight: 600;
}
.service-card p {
line-height: 1.8;
font-size: 1em;
color: #555;
}
.features-list {
background: #fafafa;
padding: 35px;
border-left: 4px solid #34495e;
margin: 25px 0;
}
.features-list ul {
list-style: none;
padding-left: 0;
}
.features-list li {
padding: 12px 0;
padding-left: 25px;
position: relative;
font-size: 1em;
border-bottom: 1px solid #e8e8e8;
color: #444;
}
.features-list li:last-child {
border-bottom: none;
}
.features-list li:before {
content: "•";
position: absolute;
left: 0;
color: #34495e;
font-weight: bold;
font-size: 1.5em;
}
.tech-stack {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 15px;
margin: 25px 0;
}
.tech-badge {
background: white;
color: #2c3e50;
padding: 12px 20px;
border: 2px solid #34495e;
font-weight: 600;
font-size: 0.95em;
text-align: center;
}
.cta-section {
background: #34495e;
color: white;
padding: 60px;
margin: 60px 0 0 0;
}
.cta-section h2 {
color: white;
border-bottom: 3px solid white;
padding-bottom: 15px;
margin-bottom: 35px;
}
.contact-info {
background: #2c3e50;
padding: 30px;
margin: 30px 0;
border: 2px solid #445566;
}
.contact-info p {
font-size: 1.05em;
margin: 12px 0;
line-height: 1.8;
}
.contact-info strong {
color: white;
font-weight: 600;
}
.btn-primary {
display: inline-block;
background: white;
color: #2c3e50;
padding: 15px 40px;
text-decoration: none;
font-weight: 600;
font-size: 1.1em;
margin-top: 25px;
border: 2px solid white;
transition: all 0.3s ease;
}
.btn-primary:hover {
background: #2c3e50;
color: white;
border-color: white;
}
.portfolio-section {
background: #fafafa;
padding: 35px;
margin: 30px 0;
border-left: 4px solid #34495e;
}
.portfolio-item {
background: white;
padding: 30px;
margin: 20px 0;
border: 2px solid #e0e0e0;
}
.portfolio-item h3 {
margin-top: 0;
}
.portfolio-item p {
color: #555;
margin: 10px 0;
line-height: 1.8;
}
footer {
background: #2c3e50;
padding: 40px 60px;
color: white;
border-top: 4px solid #34495e;
}
footer p {
color: #ecf0f1;
margin: 8px 0;
}
@media (max-width: 768px) {
h1 {
font-size: 1.6em;
}
header, .main-content, footer {
padding: 30px;
}
.service-grid {
grid-template-columns: 1fr;
}
.cta-section {
padding: 40px 30px;
}
.tech-stack {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
}
@media print {
body {
background: white;
}
.btn-primary {
display: none;
}
}
{
"@context": "https://schema.org",
"@type": "ProfessionalService",
"name": "방송용 웹소품 제작",
"description": "방송용 웹 기반 그래픽 콘텐츠 제작 전문 서비스",
"provider": {
"@type": "Organization",
"name": "J-IoT Co., Ltd.",
"telephone": "+82-XX-XXXX-XXXX",
"email": "contact@j-iot.co.kr"
},
"areaServed": "KR",
"serviceType": [
"방송용 웹소품 제작",
"실시간 데이터 시각화",
"인터랙티브 그래픽",
"웹 애니메이션"
],
"offers": {
"@type": "Offer",
"availability": "https://schema.org/InStock"
}
}
방송용 웹소품 제작 전문
HTML5 기반 고품질 방송 그래픽 솔루션
서비스 소개
방송에 특화된 웹 기반 그래픽 콘텐츠를 제작합니다. 실시간 데이터 시각화부터 인터랙티브 차트, 애니메이션 그래픽까지 방송 환경에 최적화된 고품질 웹소품을 제공합니다.
주요 제작 서비스
실시간 데이터 시각화
선거 개표 현황, 주식 시세, 날씨 정보 등 실시간으로 변화하는 데이터를 시각적으로 표현하는 웹 그래픽을 제작합니다.
인터랙티브 차트
막대그래프, 파이차트, 라인차트 등 다양한 형태의 애니메이션 차트를 방송에 맞게 커스터마이징합니다.
애니메이션 그래픽
오프닝 타이틀, 자막 효과, 전환 효과 등 방송을 더욱 생동감 있게 만드는 웹 기반 애니메이션을 제작합니다.
MQTT 실시간 모니터링
IoT 센서 데이터를 실시간으로 수집하여 방송에서 활용 가능한 대시보드 형태로 시각화합니다.
회로도 시각화
전력 변환기, 전자 회로 등 기술적 콘텐츠를 애니메이션으로 표현하여 이해하기 쉽게 제작합니다.
반응형 디자인
다양한 방송 환경과 해상도에 최적화된 반응형 웹 그래픽을 제공합니다.
제공 기능
- OBS Studio, vMix 등 방송 소프트웨어와 완벽 호환
- 실시간 API 연동으로 자동 데이터 업데이트
- 크로마키(투명 배경) 지원
- 부드러운 CSS3 애니메이션 효과
- 모바일 및 태블릿 환경 지원
- WebSocket 기반 실시간 통신
- JSON, CSV 등 다양한 데이터 포맷 지원
- 사용자 정의 색상 및 브랜딩 적용
- 고해상도(4K) 지원
- 빠른 로딩 속도 및 최적화
기술 스택
HTML5 CSS3 JavaScript Canvas API WebSocket MQTT Chart.js D3.js Three.js SVG Animation Responsive Design
포트폴리오 예시
정부 지원사업 MQTT 모니터링 대시보드
실시간 센서 데이터를 수집하여 시각화하는 웹 기반 모니터링 시스템
기술: HTML5, CSS3, JavaScript, MQTT, WebSocket
전력 변환기 회로도 애니메이션
전자 회로의 동작 원리를 시각적으로 표현하는 인터랙티브 다이어그램
기술: SVG, CSS Animation, JavaScript
기업 소개 웹 프레젠테이션
정부 기관 대상 사업 소개를 위한 반응형 웹 페이지
기술: HTML5, CSS3, Responsive Design
왜 웹 기반 방송소품인가?
- 실시간 업데이트: 방송 중에도 데이터를 즉시 반영
- 가볍고 빠른 로딩: 영상 파일 대비 용량이 작아 빠른 전환 가능
- 쉬운 수정: 코드 수정만으로 빠르게 내용 변경 가능
- 고품질: 벡터 기반으로 어떤 해상도에서도 선명함
- 비용 효율적: 영상 렌더링 없이 즉시 사용 가능
- 인터랙티브: 사용자 입력에 반응하는 동적 콘텐츠
견적 문의 및 상담
회사명: 주식회사 제이 (J-IoT Co., Ltd.)
전화: 연락처를 여기에 입력하세요
이메일: contact@j-iot.co.kr
상담시간: 평일 09:00 - 18:00
방송용 웹소품 제작이 필요하신가요?
무료 상담 및 견적을 받아보세요!
주식회사 제이 (J-IoT Co., Ltd.)
임베디드 시스템 개발 | IoT 디바이스 | MCU 아웃소싱 | 웹/앱 개발
© 2025 J-IoT Co., Ltd. All rights reserved.