Dev Blog

스크립트 & 소스코드 공유

실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.

총 110건의 글

jQuery와 CSS를 활용한 역동적인 슬롯머신 숫자 타이머 스크립트​

일반적인 카운팅 방식과 달리, 각 숫자가 실제 슬롯머신처럼 빠르게 회전하다가 탄성 있게 멈추는 효과가 특징입니다.

주요 기능 및 특징

  • 풍성한 회전 효과: 숫자가 단순히 0에서 9까지 변하는 것이 아니라, 여러 바퀴를 돌아 목표 숫자에 안착하여 시각적으로 화려합니다.
  • 물리적 탄성 재현: cubic-bezier 애니메이션을 사용하여 멈출 때 살짝 튕기는 듯한 리얼한 움직임을 보여줍니다.
  • 순차적 정지 리듬: 모든 숫자가 동시에 멈추지 않고, 왼쪽부터 차례대로 멈추도록 설정되어 있어 리듬감이 느껴집니다.
  • 자동 자릿수 인식: HTML에 넣은 숫자가 몇 자리든 상관없이 스크립트가 자동으로 슬롯 레일을 생성합니다.

조절 가능한 옵션 (코드 내 주석 참고)

  1. 회전 속도: 첫 숫자가 멈추는 기본 시간을 짧게 수정하여 더 빠르게 만들 수 있습니다.
  2. 멈춤 간격: 각 숫자 사이의 시차(딜레이)를 조절하여 "착-착-착" 멈추는 간격을 취향에 맞게 변경 가능합니다.
  3. 디자인 커스텀: CSS의 font-size나 color를 수정하여 사이트 분위기에 맞게 바로 적용할 수 있습니다.

이 스크립트는 jQuery 기반으로 작성되었으며, HTML 편집 모드에서 스타일(CSS)과 스크립트(JS)를 함께 넣어 바로 사용하실 수 있습니다. 이벤트 페이지나 포인트 현황판 등에 활용해 보세요!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pen</title>
  </head>
  <body>
<style>
.timer {
    display: flex;
    font-family: 'Arial Black', sans-serif;
    font-size: 64px;
    font-weight: bold;
    color: #333;
    overflow: hidden;
    height: 1.2em; /* 숫자 높이 */ 
}

.slot-column {
    display: flex;
    flex-direction: column;
    /* 1.2초 동안 빠르게 회전 후 탄성 있게 멈춤 */
    transition: transform 2.2s ease; 
}

.slot-number {
    height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.8em;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    function startRichSlot($timer) {
        const targetValue = $timer.text().trim();
        const digits = targetValue.split('');
        $timer.empty();

        digits.forEach((digit, index) => {
            const $column = $('<div class="slot-column"></div>');

            // 숫자를 3세트 반복하여 풍성하게 만듦 (0-9, 0-9, 0-9)
            // 실제 멈추는 곳은 마지막 세트의 목표 숫자
            for (let s = 0; s < 3; s++) {
                for (let i = 0; i <= 9; i++) {
                    $column.append(`<div class="slot-number">${i}</div>`);
                }
            }

            $timer.append($column);

            // 강제 리플로우 (애니메이션 준비)
            $column[0].offsetHeight; 

            // 애니메이션 실행
            setTimeout(() => {
                // 20번째 위치(두 세트 뒤) + 목표 숫자만큼 이동하여 훨씬 많이 회전함
                const finalPosition = 20 + parseInt(digit);
                const moveY = -(finalPosition * 1.2); // 1.2em은 CSS의 height와 일치해야 함

                $column.css({
                    'transform': `translateY(${moveY}em)`,
                    'transition-duration': `${1 + (index * 0.6)}s` // 뒤로 갈수록 살짝 늦게 멈춤
                });
            }, 50); 
        });
    }

    // 실행
    $('.timer').each(function() {
        startRichSlot($(this));
    });
});
</script>



    <div class="timer" data-value="1045">1045</div> 
  </body>
</html>

See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.

사이트맵과 RSS생성

사이트맵(Sitemap)과 RSS 피드는 검색 엔진이 사이트의 구조와 새로운 콘텐츠를 빠르게 파악하도록 돕는 중요한 도구입니다. 요청하신 http://box-story.com/ 사이트의 구조를 바탕으로 표준 형식의 파일을 구성해 드립니다.

사이트맵(Sitemap)과 RSS 피드는 검색 엔진이 사이트의 구조와 새로운 콘텐츠를 빠르게 파악하도록 돕는 중요한 도구입니다. 요청하신 http://box-story.com/ 사이트의 구조를 바탕으로 표준 형식의 파일을 구성해 드립니다.

1. 사이트맵 (sitemap.xml)

사이트맵은 웹사이트의 모든 페이지 목록을 담은 XML 파일입니다. 아래 코드를 복사하여 sitemap.xml이라는 이름의 파일로 저장한 뒤, 웹사이트의 최상위 경로(루트 디렉토리)에 업로드하세요.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <!-- 메인 페이지 -->
  <url>
    <loc>http://box-story.com/</loc>
    <lastmod>2026-08-20</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <!-- 회사 소개 -->
  <url>
    <loc>http://box-story.com/company</loc>
    <lastmod>2026-08-20</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <!-- 포트폴리오/제품소개 -->
  <url>
    <loc>http://box-story.com/portfolio</loc>
    <lastmod>2026-08-20</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
  </url>
  <!-- 견적 문의 -->
  <url>
    <loc>http://box-story.com/contact</loc>
    <lastmod>2026-08-20</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
  </url>
</urlset>

2. RSS 피드 (rss.xml)

RSS는 사이트의 최신 업데이트 정보를 배포하는 형식입니다. 아래 내용을 rss.xml 파일로 만들어 루트 디렉토리에 업로드하시면 됩니다.

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>박스스토리 (Box Story)</title>
    <link>http://box-story.com/</link>
    <description>단상자, 칼라박스, 패키지 제작 전문 박스스토리입니다.</description>
    <language>ko-kr</language>
    <pubDate>Thu, 20 Aug 2026 09:12:39 +0900</pubDate>

    <item>
      <title>박스스토리 홈페이지 오픈</title>
      <link>http://box-story.com/</link>
      <description>맞춤형 패키지 제작 서비스를 시작합니다.</description>
      <pubDate>Thu, 20 Aug 2026 09:12:39 +0900</pubDate>
    </item>
  </channel>
</rss>

네이버 서치어드바이저 등록 방법

파일을 만드신 후에는 반드시 네이버 검색 엔진에 알려주어야 효과가 나타납니다.

  1. 파일 업로드: 위에서 만든 두 파일을 홈페이지 서버의 메인 폴더(index 파일이 있는 곳)에 올립니다.
  2. 서치어드바이저 접속: 네이버 서치어드바이저에 로그인합니다.
  3. 사이트 선택: 등록된 http://box-story.com/ 사이트 관리 화면으로 들어갑니다.
  4. 요청 > 사이트맵 제출: sitemap.xml 경로를 입력하고 확인을 누릅니다.
  5. 요청 > RSS 제출: rss.xml 경로를 입력하고 확인을 누릅니다.

이 과정을 마치면 네이버 로봇이 사이트의 메뉴 구조를 더 정확하게 수집하게 되며, 시간이 지나면 검색 결과에 서브링크(메뉴)가 나타날 가능성이 높아집니다.

ComfyUI 0.25.0 업데이트 후 이미지가 검게 나올 때 해결 방법

ComfyUI 업데이트 후 생성 이미지가 시커멓게 나오는 문제의 해결 방법이다. attention.py에서 optimized_attention = attention_sage를 attention_pytorch로 바꿔 PyTorch Attention을 강제로 사용하거나, Sage Attention을 2.x로 업그레이드하고, 绘世启动器 설정에서 sage attention을 끄는 방법을 단계별로 정리했다.

제공해주신 ComfyUI Sage Attention 충돌 해결 방안을 마크다운 형식으로 정리해 드립니다. 나중에 참고하시거나 다른 분들과 공유하실 때 활용하시기 바랍니다.


ComfyUI Sage Attention 충돌 및 해결 방법 가이드

Z-Image 계열 모델 사용 시 발생하는 Sage Attention 충돌 문제를 해결하기 위한 가이드입니다. 업데이트 시 패치가 초기화될 수 있으므로 상황에 맞는 방법을 선택하세요.

수정 대상 파일

  • 경로: E:\ComfyUI-aki-v3\ComfyUI\comfy\ldm\modules\attention.py

방법 1. 소스 코드 직접 수정 (임시 패치)

Sage Attention 옵션이 켜져 있어도 실제로는 PyTorch Attention을 사용하도록 강제로 우회하는 방법입니다.

  1. 메모장이나 코드 에디터로 위 경로의 attention.py 파일을 엽니다.
  2. 734번째 줄 근처에서 "Using sage attention" 문구를 찾습니다.
  3. 아래와 같이 코드를 수정합니다.

[변경 전]

logging.info("Using sage attention")
optimized_attention = attention_sage

[변경 후]

logging.info("Using sage attention (forced pytorch fallback)")
optimized_attention = attention_pytorch
  1. 저장 후 ComfyUI를 재시작합니다.

방법 2. Sage Attention 라이브러리 업그레이드

충돌의 원인인 구버전(v1.0.6 등)을 최신 버전으로 업데이트하여 근본적인 문제를 해결합니다.

  • 실행 명령 (터미널/CMD):
    "E:\ComfyUI-aki-v3\python\python.exe" -m pip install sageattention --upgrade

방법 3. 绘世(Aki) 런처에서 옵션 해제 (가장 권장)

업데이트 시마다 패치가 날아가는 번거로움을 피하기 위해 아예 기능을 끄는 방법입니다.

  1. 绘世启动器(Aki Launcher) 실행
  2. 설정(톱니바퀴 아이콘) 클릭
  3. 시작 파라미터(启动参数) 또는 고급 설정(高级设置) 진입
  4. --use-sage-attention 항목을 찾아 체크 해제

**

Nginx+PHP-FPM에서 .html 파일에서 PHP 코드 실행하기

Nginx 환경에서 .html·.htm 파일에서도 PHP 코드가 실행되도록 설정하는 방법이다. /www/server/nginx/conf의 enable-php-74.conf에서 location 정규식 매칭에 html·htm을 추가하고, /www/server/php/74/etc/php-fpm.conf의 security.limit_extensions에 .html·.htm 확장자를 등록한 뒤 저장하면 된다.

第一步:修改 Nginx 引用文件 (针对 7.4)​

由于你换了版本,Nginx 现在引用的应该是 enable-php-74.conf。

  1. 进入目录:/www/server/nginx/conf/
  2. 找到并打开文件:enable-php-74.conf
  3. 将其内容修改为(注意第一行加入了 html 和 htm):
location ~ [^/]\.(php|php5|html|htm)(/|$)
    {
        try_files $uri =404;
        fastcgi_pass  unix:/tmp/php-cgi-74.sock;
        fastcgi_index index.php;
        include fastcgi.conf;
        include pathinfo.conf;
    }
第二步:修改 PHP-7.4 的安全后缀限制
  1. 进入宝塔面板 -> 文件。
  2. 直接进入这个路径:/www/server/php/74/etc/
  3. 找到文件:php-fpm.conf 并双击打开。
  4. 在这个文件里搜索 [www](通常就在文件开头或中部)。
  5. 在 [www] 下方添加: security.limit_extensions = .php .php3 .php4 .php5 .php7 .html .htm
  6. 保存。


Let's create something great together.

프로젝트 문의 및 견적 요청은 언제든 환영합니다.