고가의 유료 프로그램과 플러그인이
전부 무료 입니다.
단순 디자인이 아닙니다. 멤버십, 예약, 자동화, 보안 등 수십만 원 상당의
프리미엄 기능을 IDC.KR은 아낌없이 지원하여 완벽한 시스템을 구축합니다.
HTML/CSS 퍼블리싱
웹표준 및 접근성을 준수한 클린 코딩.
워드프레스 개발
확장성 높은 테마 및 플러그인 커스텀.
이커머스 쇼핑몰
우커머스, 쇼피파이 등 판매 최적화.
인트라넷 & LMS
사내 업무망, 이러닝 교육 시스템 구축.
멤버십 & 구독시스템
정기 결제 및 회원 전용 콘텐츠 차단 기능.
SNS 간편 로그인
카카오, 네이버, 구글 등 소셜 원클릭 가입.
지도 API 연동
네이버/카카오맵 기반 스토어 및 위치 표시.
고급 신청서/설문
조건부 로직이 적용된 스마트 웹 폼 개발.
유료 보안 솔루션
해킹 방지 방화벽 및 악성코드 실시간 스캔.
프리미엄 SEO
Yoast/RankMath Pro 버전 설치 지원.
Elementor Pro
필수 유료 빌더 라이선스 무료 적용.
다국어 시스템
WPML 등 유료 번역 플러그인 완벽 세팅.
예약/일정 관리
호텔, 병원, 상담 예약 유료 시스템 구축.
캐시 & 속도 가속
WP Rocket 등 유료 캐싱 플러그인 탑재.
마케팅 팝업 솔루션
타겟 고객에게 노출되는 팝업/배너 관리.
한국형 게시판
Kboard, 망보드 등 한국형 게시판 커스텀.
React/Vue 개발
SPA 방식의 인터랙티브 웹앱 프론트 개발.
AI 챗봇 연동
ChatGPT API 및 채널톡, 카카오톡 상담.
자동 백업 시스템
실시간 클라우드 백업 및 1클릭 복구.
로그분석 & 마케팅
GA4 설치 및 전환 추적 픽셀 정밀 세팅.
웹프로그램 개발 목록
모든 카드에 데모와 코드가 연결되어 있습니다. (Canvas/WebGL 0px 방지 적용)
HTML5 Canvas 배경(트렁크 파형)
Canvas 코드 보기
<canvas id="trunkCanvas"></canvas>
<script>(function(){const c=document.getElementById('trunkCanvas');const x=c.getContext('2d');let w=0,h=0,t=0;function R(){const cw=c.clientWidth||c.parentElement.clientWidth;const ch=c.clientHeight||c.parentElement.clientHeight; if(!cw||!ch)return; w=c.width=cw;h=c.height=ch;} new ResizeObserver(R).observe(c.parentElement||c); function D(){const cw=c.clientWidth||c.parentElement.clientWidth;const ch=c.clientHeight||c.parentElement.clientHeight;if(!cw||!ch){requestAnimationFrame(D);return;} if(w!==cw||h!==ch)R(); t+=.012;x.clearRect(0,0,w,h);x.fillStyle='#0b1220';x.fillRect(0,0,w,h); for(let i=0;i<130;i++){const X=(i/129)*w;const Y=h*.5+Math.sin(i*.18+t*2.2)*28+Math.sin(i*.05+t*.8)*16;const r=1.2+Math.cos(i*.3+t)*1.2; x.beginPath();x.arc(X,Y,r,0,Math.PI*2);x.fillStyle='rgba(43,110,231,.85)';x.fill(); if(i%6===0){x.strokeStyle='rgba(19,194,154,.25)';x.lineWidth=1;x.beginPath();x.moveTo(X,Y);x.bezierCurveTo(X-30,Y-20,X+30,Y+20,X+60,Y+Math.sin(t+i)*8);x.stroke();}} requestAnimationFrame(D);} R(); D();})();</script>
SVG 라인/스트로크 애니메이션
SVG 코드 보기
<svg viewBox="0 0 600 180" style="width:100%;height:100%;background:#0b1220">
<path d="M10 120 C 120 20, 240 180, 360 60 S 520 140, 590 90" fill="none" stroke="#13c29a" stroke-width="4" stroke-dasharray="8 12">
<animate attributeName="stroke-dashoffset" from="0" to="-200" dur="3s" repeatCount="indefinite"/>
</path>
</svg>
IntersectionObserver 스크롤 액션
IO 코드 보기
<style>.io-box{opacity:0;transform:translateY(16px);transition:.6s}.io-box.show{opacity:1;transform:none}</style>
<div class="io-box">등장 박스</div>
<script>const io=new IntersectionObserver(es=>es.forEach(e=>e.isIntersecting&&e.target.classList.add('show')),{threshold:.25});document.querySelectorAll('.io-box').forEach(b=>io.observe(b));</script>
WebGL 파형/노이즈(셰이더)
WebGL 코드 보기
<canvas id="glCanvas"></canvas>
<script>(function(){const cv=document.getElementById('glCanvas');let w=0,h=0,t0=performance.now();function R(){const cw=cv.clientWidth||cv.parentElement.clientWidth;const ch=cv.clientHeight||cv.parentElement.clientHeight;if(!cw||!ch)return;w=cv.width=cw;h=cv.height=ch;}new ResizeObserver(R).observe(cv.parentElement||cv);const gl=cv.getContext('webgl');const vs=\`attribute vec2 p;void main(){gl_Position=vec4(p,0.0,1.0);} \`;const fs=\`precision mediump float;uniform vec2 u_res;uniform float u_time;void main(){vec2 uv=gl_FragCoord.xy/u_res;float y=.5+.1*sin((uv.x+u_time*.4)*10.0)+.08*sin((uv.x*3.0+u_time*.9)*7.0);float d=abs(uv.y-y);float line=smoothstep(.015,.0,d);vec3 col=mix(vec3(0.05,0.1,0.2),vec3(0.1,0.6,1.0),uv.x);col += line*vec3(0.1,0.8,0.6);gl_FragColor=vec4(col,1.0);} \`;function C(src,type){const s=gl.createShader(type);gl.shaderSource(s,src);gl.compileShader(s);if(!gl.getShaderParameter(s,gl.COMPILE_STATUS))throw gl.getShaderInfoLog(s);return s;}const pr=gl.createProgram();gl.attachShader(pr,C(vs,gl.VERTEX_SHADER));gl.attachShader(pr,C(fs,gl.FRAGMENT_SHADER));gl.linkProgram(pr);if(!gl.getProgramParameter(pr,gl.LINK_STATUS))throw gl.getProgramInfoLog(pr);const buf=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,buf);gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),gl.STATIC_DRAW);const loc=gl.getAttribLocation(pr,'p');gl.enableVertexAttribArray(loc);gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0);const ures=gl.getUniformLocation(pr,'u_res');const ut=gl.getUniformLocation(pr,'u_time');function draw(){const cw=cv.clientWidth||cv.parentElement.clientWidth;const ch=cv.clientHeight||cv.parentElement.clientHeight;if(!cw||!ch){requestAnimationFrame(draw);return;} if(w!==cw||h!==ch)R(); gl.viewport(0,0,w,h);gl.useProgram(pr);gl.uniform2f(ures,w,h);gl.uniform1f(ut,(performance.now()-t0)/1000.0);gl.drawArrays(gl.TRIANGLES,0,6);requestAnimationFrame(draw);} R();draw();})();</script>
폼 검증 + 마스킹
폼 코드 보기
<form id="demoForm">
<label>이메일<input type="email" required placeholder="name@example.com"></label>
<label>휴대전화<input type="tel" required pattern="^01[0-9]-?[0-9]{3,4}-?[0-9]{4}$" placeholder="010-1234-5678"></label>
<button>검증</button>
</form>
<script>document.getElementById('demoForm').addEventListener('submit',e=>{if(!e.target.checkValidity()){e.preventDefault();alert('형식 확인: 이메일/휴대전화')} });</script>
슬라이더/캐러셀(A11y)
슬라이더 코드 보기
<div class="sldr" tabindex="0">
<div class="trk"><div class="it">Slide 1</div><div class="it">Slide 2</div><div class="it">Slide 3</div></div>
<button class="prv">Prev</button><button class="nxt">Next</button>
</div>
<style>.sldr{background:#0b1220;color:#e6edf3;display:grid;grid-template-rows:1fr auto;gap:10px}
.trk{display:flex;overflow:hidden;scroll-snap-type:x mandatory}
.it{min-width:100%;scroll-snap-align:center;display:grid;place-items:center;border:1px solid #1f2937}
.prv,.nxt{padding:8px 10px;border:0;border-radius:8px;background:#e5e7eb}</style>
<script>(function(){const s=document.querySelector('.sldr'),t=s.querySelector('.trk'),n=s.querySelector('.nxt'),p=s.querySelector('.prv');let i=0;function go(k){i=(k+3)%3;t.scrollTo({left:i*t.clientWidth,behavior:'smooth'})}n.onclick=()=>go(i+1);p.onclick=()=>go(i-1);let a=setInterval(()=>go(i+1),3000);s.addEventListener('focus',()=>clearInterval(a));s.addEventListener('blur',()=>a=setInterval(()=>go(i+1),3000));s.addEventListener('keydown',e=>{if(e.key==='ArrowRight')go(i+1);if(e.key==='ArrowLeft')go(i-1)})})();</script>
카운트업/진행바
카운트업 코드 보기
<div class="kpi">0</div><div class="bar"><span></span></div>
<style>.kpi{color:#e6edf3;font:800 40px/1 system-ui;text-align:center}.bar{height:3px;background:#1f2937}.bar>span{display:block;height:100%;width:0;background:linear-gradient(90deg,#13c29a,#2b6ee7)}</style>
<script>(function(){const K=document.querySelector('.kpi'),B=document.querySelector('.bar>span');let v=0;const T=2500,st=16,inc=100/(T/st);const i=setInterval(()=>{v=Math.min(100,v+inc);K.textContent=Math.round(v*95);B.style.width=v+'%';if(v>=100)clearInterval(i)},st)})();</script>
탭/아코디언(단일 열림)
탭 코드 보기
<div class="tabs" role="tablist">
<button role="tab" aria-selected="true" aria-controls="p1" id="t1">Tab 1</button>
<button role="tab" aria-selected="false" aria-controls="p2" id="t2">Tab 2</button>
</div>
<div id="p1" role="tabpanel" aria-labelledby="t1">내용 1</div>
<div id="p2" role="tabpanel" hidden aria-labelledby="t2">내용 2</div>
<script>document.querySelectorAll('[role=tab]').forEach(b=>b.addEventListener('click',()=>{const gp=b.parentNode;gp.querySelectorAll('[role=tab]').forEach(t=>t.setAttribute('aria-selected',t===b));document.getElementById('p1').hidden=b.id!=='t1';document.getElementById('p2').hidden=b.id!=='t2'}));</script>
모달/바텀시트
모달 코드 보기
<button id="openM">열기</button>
<dialog id="dlg"><p>모달 내용</p><button id="closeM">닫기</button></dialog>
<script>const d=document.getElementById('dlg');openM.onclick=()=>d.showModal();closeM.onclick=()=>d.close();d.addEventListener('click',e=>{const r=d.getBoundingClientRect();if(!(e.clientX>=r.left&&e.clientX<=r.right&&e.clientY>=r.top&&e.clientY<=r.bottom))d.close()});</script>
