리포트 신청하기

신청완료

신청마감

이벤트 종료

리포트 다운로드하기

<script>
(function () {
    if (!document.documentElement.classList.contains('js')) return;
    if (document.documentElement.classList.contains('reduce-motion')) return;
    // 데스크탑/모바일 KV 각각, gray가 yellow보다 path가 길어 같은 px/초 속도가 되도록 duration 보정
    document.querySelectorAll('.heroKvSvg').forEach(function (svg) {
        var gray = svg.querySelector('.kvGrayPath');
        var yellow = svg.querySelector('.kvLinePath');
        if (!gray || !yellow) return;
        var yLen = yellow.getTotalLength();
        var gLen = gray.getTotalLength();
        if (!yLen) return;
        var base = svg.classList.contains('heroKvMobile') ? 1.3 : 2.2;   // 데스크탑 드로잉 duration(2.2s)에 맞춰 gray 속도 보정 (모바일은 드로잉 미사용)
        gray.style.animationDuration = (base * (gLen / yLen)) + 's';
    });
})();
</script>

<script>
(function () {
    var docEl = document.documentElement;
    if (docEl.classList.contains('reduce-motion')) return;
    if (!('IntersectionObserver' in window)) return;
    var cards = Array.prototype.slice.call(document.querySelectorAll('.bCard'));
    if (!cards.length) return;

    // 스크립트가 살아 있을 때만 '멈춤' 상태가 적용된다 → 실행되지 않으면 그냥 계속 움직인다
    docEl.classList.add('anim-gate');

    var observer = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
            if (!entry.isIntersecting) return;
            entry.target.classList.add('is-anim');
            observer.unobserve(entry.target);
        });
    }, { threshold: 0.3 });
    cards.forEach(function (c) { observer.observe(c); });

    // 안전장치: 관찰이 동작하지 않는 환경에서도 5초 뒤에는 반드시 움직인다
    setTimeout(function () {
        cards.forEach(function (c) { c.classList.add('is-anim'); });
        observer.disconnect();
    }, 5000);
})();
</script>


<script>
(function () {
    var viewer = document.querySelector('.bookViewer');
    if (!viewer) return;
    var track = viewer.querySelector('.book');
    var leaves = Array.prototype.slice.call(track.querySelectorAll('.bookLeaf'));
    var N = leaves.length;
    if (!N) return;

    var reduce = document.documentElement.classList.contains('reduce-motion');
    var prevBtn = viewer.querySelector('.bookPrev');
    var nextBtn = viewer.querySelector('.bookNext');
    var mq = window.matchMedia('(max-width: 767px)');
    var current = 0, autoTimer = null;
    var AUTO_MS = 3000;

    function render() {
        track.style.transform = 'translateX(' + (-current * 100) + '%)';
        if (prevBtn) prevBtn.disabled = (current <= 0);
        if (nextBtn) nextBtn.disabled = (current >= N - 1);
    }
    function goTo(i) {
        if (i < 0) i = 0;
        if (i > N - 1) i = N - 1;
        if (i === current) return;
        current = i;
        render();
    }
    function next() { goTo(current + 1); }
    function prev() { goTo(current - 1); }

    /* 아직 내려받지 않은 페이지로는 넘기지 않는다 (빈 화면 노출 방지) */
    function ready(i) {
        var im = leaves[i].querySelector('img');
        return !im || im.complete;
    }
    /* 모바일 자동 롤링 — 마지막 장 다음은 처음으로 되돌아간다.
       다음 장이 아직 준비되지 않았으면 이번 차례는 건너뛰고 다음 주기에 다시 시도한다. */
    function autoNext() {
        var n = (current + 1) % N;
        if (!ready(n)) return;
        current = n;
        render();
    }
    function stopAuto() { if (autoTimer) { clearInterval(autoTimer); autoTimer = null; } }
    function startAuto() { if (reduce) return; stopAuto(); autoTimer = setInterval(autoNext, AUTO_MS); }

    viewer.addEventListener('click', function (e) {
        if (e.target.closest('.bookNav')) return;   // 화살표는 아래에서 따로 처리
        if (mq.matches) { autoNext(); startAuto(); return; }
        var r = viewer.getBoundingClientRect();
        if (e.clientX < r.left + r.width / 2) prev(); else next();
    });
    if (prevBtn) prevBtn.addEventListener('click', function (e) { e.stopPropagation(); prev(); });
    if (nextBtn) nextBtn.addEventListener('click', function (e) { e.stopPropagation(); next(); });

    /* 모바일: 미리보기가 화면에 충분히 들어왔을 때만 자동 롤링 (주소창 때문에 이르게 시작하는 것 방지) */
    var inView = false;
    var observer = ('IntersectionObserver' in window) ? new IntersectionObserver(function (entries) {
        var vis = entries[0].isIntersecting && entries[0].intersectionRatio >= 0.6;
        if (vis === inView) return;
        inView = vis;
        if (!mq.matches) return;
        if (inView) { current = 0; render(); startAuto(); }
        else stopAuto();
    }, { threshold: [0, 0.6, 1], rootMargin: '0px 0px -15% 0px' }) : null;
    if (observer) observer.observe(viewer);

    function applyMode() {            // 모드 전환(리사이즈 포함) 시 첫 장으로 초기화
        stopAuto();
        current = 0;
        render();
        if (mq.matches && (!observer || inView)) startAuto();
    }
    if (mq.addEventListener) mq.addEventListener('change', applyMode);
    else if (mq.addListener) mq.addListener(applyMode);
    applyMode();
})();
</script>

<script>
(function () {
    var list = document.querySelector('.askList');
    if (!list) return;
    var items = Array.prototype.slice.call(list.querySelectorAll('.askItem'));
    if (items.length < 2) return;
    if (document.documentElement.classList.contains('reduce-motion')) return;
    if (!('IntersectionObserver' in window)) return;
    /* 늦게 실행돼도 그냥 진행한다.
       호스트센터는 썸네일을 눌러 모달로 열 때 페이지 로드가 끝난 뒤 콘텐츠를 넣기 때문에
       readyState가 항상 'complete'다. 여기서 되돌아가면 모달에서는 로테이터가 영영 안 걸린다.
       (초기 1회 높이 변화는 생기지만, 세 문장이 그대로 쌓여 보이는 것보다 낫다) */

    var mqMobile = window.matchMedia('(max-width: 767px)');

    /* v1: 웹은 타이핑, 모바일은 페이드 / v2: 웹까지 전부 페이드
       (빌드 시 이 한 줄만 바뀐다 — 두 파일이 어긋나지 않게) */
    var FADE_ONLY = true;
    function useFade() { return FADE_ONLY || mqMobile.matches; }

    var TYPE = 72, ERASE = 34, HOLD = 1800, NEXT = 350;   // 타이핑 모드 (ms)
    var FADE_HOLD = 2200, FADE_OUT = 350;                 // 페이드 모드 (ms)

    /* 문장을 단어(askWord) → 글자(askChar) 단위로 쪼갠다.
       공백은 단어 밖의 글자로 둬서 원래의 줄바꿈 지점을 유지한다.
       (페이드 모드에서도 쪼갠 채로 두면 되므로 모드 전환 시 다시 만들 필요가 없다) */
    function split(item) {
        var chars = [], mark = null, markCount = 0;
        function splitText(node, inMark) {
            var frag = document.createDocumentFragment();
            node.nodeValue.split(/(\s+)/).forEach(function (chunk) {
                if (!chunk) return;
                var box = frag;
                if (!/^\s+$/.test(chunk)) {
                    box = document.createElement('span');
                    box.className = 'askWord';
                    frag.appendChild(box);
                }
                chunk.split('').forEach(function (ch) {
                    var s = document.createElement('span');
                    s.className = inMark ? 'askChar askChar--mark' : 'askChar';
                    s.textContent = ch;
                    box.appendChild(s);
                    chars.push(s);
                    if (inMark) markCount++;
                });
            });
            node.parentNode.replaceChild(frag, node);
        }
        function walk(node, inMark) {
            Array.prototype.slice.call(node.childNodes).forEach(function (n) {
                if (n.nodeType === 3) splitText(n, inMark);
                else if (n.nodeType === 1) {
                    var isMark = n.classList.contains('askMark');
                    if (isMark) mark = n;
                    walk(n, inMark || isMark);
                }
            });
        }
        walk(item, false);
        return {el: item, chars: chars, mark: mark, markCount: markCount};
    }

    var lines = items.map(split);

    var caret = document.createElement('span');
    caret.className = 'askCaret';
    caret.setAttribute('aria-hidden', 'true');

    function setFill(line) {
        if (!line.mark || !line.markCount) return;
        var shown = 0;
        for (var k = 0; k < line.chars.length; k++) {
            var c = line.chars[k];
            if (c.classList.contains('askChar--mark') && c.classList.contains('is-typed')) shown++;
        }
        line.mark.style.setProperty('--markFill', (shown / line.markCount).toFixed(3));
    }
    // idx = 다음에 찍을 글자 위치(0..len) → 커서를 그 앞에 둔다
    function moveCaret(line, idx) {
        if (idx <= 0) { line.el.insertBefore(caret, line.el.firstChild); return; }
        var ch = line.chars[idx - 1];
        if (ch.nextSibling) ch.parentNode.insertBefore(caret, ch.nextSibling);
        else ch.parentNode.appendChild(caret);
    }
    /* 모든 문장을 비운다. 화면 밖으로 나갔다 들어와 체인이 새로 시작될 때
       중단된 이전 문장이 남아 겹쳐 보이는 것을 막는다. */
    function clearAll() {
        lines.forEach(function (l) {
            l.chars.forEach(function (c) { c.classList.remove('is-typed'); });
            setFill(l);
        });
        items.forEach(function (el) { el.classList.remove('is-on', 'is-off'); });
    }

    /* 진행 중인 체인을 무효화하기 위한 토큰 — 화면 밖으로 나가거나 모드가 바뀌면 즉시 멈춘다 */
    var token = 0;

    /* ---- 웹: 글자 단위 타이핑 ---- */
    function typeCycle(i, t) {
        if (t !== token) return;
        var line = lines[i], n = line.chars.length, ci = 0;
        clearAll();                 // 이전 문장 잔상 제거 (겹쳐 보임 방지)
        moveCaret(line, 0);
        (function type() {
            if (t !== token) return;
            if (ci >= n) {
                setTimeout(function () { erase(); }, HOLD);
                return;
            }
            line.chars[ci].classList.add('is-typed');
            ci++;
            setFill(line);
            moveCaret(line, ci);
            setTimeout(type, TYPE);
        })();
        function erase() {
            if (t !== token) return;
            if (ci <= 0) {
                setTimeout(function () { typeCycle((i + 1) % lines.length, t); }, NEXT);
                return;
            }
            ci--;
            line.chars[ci].classList.remove('is-typed');
            setFill(line);
            moveCaret(line, ci);
            setTimeout(erase, ERASE);
        }
    }

    /* ---- 모바일: 문장 단위 페이드업 ---- */
    function fadeCycle(i, t) {
        if (t !== token) return;
        var el = lines[i].el;
        items.forEach(function (x) { x.classList.remove('is-on', 'is-off'); });
        el.classList.add('is-on');
        setTimeout(function () {
            if (t !== token) return;
            el.classList.remove('is-on');
            el.classList.add('is-off');
            setTimeout(function () {
                if (t !== token) return;
                el.classList.remove('is-off');
                fadeCycle((i + 1) % lines.length, t);
            }, FADE_OUT);
        }, FADE_HOLD);
    }

    /* ---- 모드 전환 ----
       클래스를 붙이는 시점부터 CSS 숨김이 적용된다.
       (스크립트가 아예 실행되지 않으면 숨김도 없다 → 문장 3줄이 그대로 보인다) */
    var running = false;

    function applyMode() {
        token++;                    // 진행 중인 체인 중단
        clearAll();
        if (caret.parentNode) caret.parentNode.removeChild(caret);
        if (useFade()) {
            list.classList.remove('is-typing');
            list.classList.add('is-fade');
        } else {
            list.classList.remove('is-fade');
            list.classList.add('is-typing');
        }
        if (running) run();
    }
    function run() {
        var t = ++token;
        if (useFade()) fadeCycle(0, t);
        else typeCycle(0, t);
    }

    applyMode();
    if (mqMobile.addEventListener) mqMobile.addEventListener('change', applyMode);
    else if (mqMobile.addListener) mqMobile.addListener(applyMode);

    new IntersectionObserver(function (entries) {
        var vis = entries[0].isIntersecting;
        if (vis === running) return;
        running = vis;
        if (vis) run();             // 화면에 들어오면 첫 문장부터
        else token++;               // 나가면 체인 중단
    }, { threshold: 0.5 }).observe(list);
})();
</script>

2026 원티드 연봉 리포트ㅣ연봉·이직 최신 정보를 한눈에

2026
연봉 리포트

2026 원티드 연봉 리포트ㅣ연봉·이직 최신 정보를 한눈에

2026 연봉 리포트

2026
연봉 리포트