https://tedfactory.com/tags/%ED%83%80%EC%9D%B4%ED%95%91/Recent content in 타이핑 on Ted FactoryHugokoFri, 06 Mar 2026 01:28:03 +0900https://tedfactory.com/widgets/typing-sky/Fri, 06 Mar 2026 00:00:00 +0900https://tedfactory.com/widgets/typing-sky/<h1 id="typing-sky">Typing Sky<a class="anchor" href="#typing-sky">#</a></h1> <p>하늘을 가로질러 날아오는 단어들을 타이핑으로 격추하는 게임입니다. 아래에 수록된 유명한 시와 소설의 단어들이 오른쪽에서 왼쪽으로 흘러갑니다. 단어가 왼쪽 끝에 닿기 전에 정확히 입력하면 점수를 얻습니다. 단어의 글자 수만큼 점수가 올라가며, 성공할수록 점점 빨라집니다.</p> <style> .typing-game-wrap { position: relative; width: 100%; max-width: 900px; margin: 24px auto; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; user-select: none; } .typing-game-wrap *, .typing-game-wrap *::before, .typing-game-wrap *::after { box-sizing: border-box; } /* HUD */ .tg-hud { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: rgba(30, 40, 70, 0.85); border-radius: 12px 12px 0 0; color: #e8ecf4; font-size: 15px; gap: 12px; flex-wrap: wrap; } .tg-hud-item { display: flex; align-items: center; gap: 6px; } .tg-hud-label { opacity: 0.7; font-size: 13px; } .tg-hud-value { font-weight: 700; font-size: 18px; min-width: 32px; text-align: right; } #tg-lives-display .tg-heart { color: #ff4d6a; margin-right: 1px; } /* Play area */ .tg-arena { position: relative; width: 100%; height: 340px; background: url('/images/widgets/typing-sky-bg.png') center/cover no-repeat; overflow: hidden; border-left: 4px solid rgba(255, 70, 90, 0.7); } .tg-lane-line { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.13); pointer-events: none; } /* Words */ .tg-word { position: absolute; padding: 4px 14px; border-radius: 8px; font-size: 18px; font-weight: 600; letter-spacing: 0.5px; white-space: nowrap; transition: opacity 0.15s, transform 0.15s; text-shadow: 0 1px 3px rgba(0,0,0,0.35); pointer-events: none; } .tg-word.matched { opacity: 0; transform: scale(1.5); } .tg-word.highlight { outline: 2px solid #ffe066; outline-offset: 2px; } /* Input area */ .tg-input-bar { display: flex; gap: 8px; padding: 10px 16px; background: rgba(30, 40, 70, 0.85); border-radius: 0 0 12px 12px; } #tg-input { flex: 1; padding: 10px 16px; font-size: 20px; font-weight: 600; border: 2px solid rgba(255,255,255,0.25); border-radius: 8px; background: rgba(255,255,255,0.12); color: #fff; outline: none; letter-spacing: 1px; } #tg-input:focus { border-color: rgba(100,180,255,0.7); } #tg-input::placeholder { color: rgba(255,255,255,0.35); } #tg-input:disabled { opacity: 0.4; cursor: not-allowed; } .tg-btn { padding: 10px 24px; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.1s; } .tg-btn:active { transform: scale(0.96); } .tg-btn-start { background: linear-gradient(135deg, #4facfe, #00f2fe); color: #fff; } .tg-btn-start:hover { background: linear-gradient(135deg, #3a9aee, #00d4e0); } /* Overlay */ .tg-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15, 20, 40, 0.82); z-index: 10; text-align: center; padding: 24px; } .tg-overlay h2 { color: #fff; margin: 0 0 8px; font-size: 28px; } .tg-overlay p { color: rgba(255,255,255,0.7); margin: 4px 0; font-size: 15px; line-height: 1.6; } .tg-overlay .tg-final-score { font-size: 48px; font-weight: 800; color: #ffe066; margin: 12px 0; } .tg-overlay .tg-btn { margin-top: 18px; } /* Combo */ .tg-combo-popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); font-size: 32px; font-weight: 800; color: #ffe066; text-shadow: 0 2px 8px rgba(0,0,0,0.5); pointer-events: none; opacity: 0; z-index: 5; } .tg-combo-popup.show { animation: tgComboAnim 0.7s ease-out forwards; } @keyframes tgComboAnim { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1); } } /* Score popup */ .tg-score-popup { position: absolute; font-size: 22px; font-weight: 700; color: #7fff7f; text-shadow: 0 1px 4px rgba(0,0,0,0.5); pointer-events: none; opacity: 0; z-index: 5; } .tg-score-popup.show { animation: tgScoreAnim 0.6s ease-out forwards; } @keyframes tgScoreAnim { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-30px); } } </style> <div class="typing-game-wrap" id="typingGame"> <!-- HUD --> <div class="tg-hud"> <div class="tg-hud-item"> <span class="tg-hud-label">SCORE</span> <span class="tg-hud-value" id="tg-score">0</span> </div> <div class="tg-hud-item"> <span class="tg-hud-label">COMBO</span> <span class="tg-hud-value" id="tg-combo">0</span> </div> <div class="tg-hud-item"> <span class="tg-hud-label">SPEED</span> <span class="tg-hud-value" id="tg-speed">1.0x</span> </div> <div class="tg-hud-item" id="tg-lives-display"> <span class="tg-hud-label">LIVES</span> <span class="tg-hud-value" id="tg-lives"></span> </div> </div> <!-- Arena --> <div class="tg-arena" id="tg-arena"> <div class="tg-overlay" id="tg-overlay-start"> <h2>Typing Sky</h2> <p>하늘을 가로지르는 단어를 타이핑하세요!</p>