TL&D

유튜브 썸네일 추출 및 다운로드 부터 리사이징까지

TL&D — Fri, 1 Aug 2025 18:57:33 +0900

https://tools.tlnd.cc/ko/youtube-thumbnail-downloader-resizer

유튜브 썸네일 다운로드, 크기 조절 및 확장자 변환 - 무료 썸네일 추출기

유튜브 영상 썸네일을 손쉽게 다운로드하고 원하는 크기와 다양한 형식(JPG, PNG, TIFF, WEBP)으로 변환하세요. 빠르고 간편한 무료 온라인 도구로 고화질 썸네일 이미지를 추출하고 즉시 다운로드

tools.tlnd.cc

가끔씩 유튜브 썸네일 이미지만 필요로 할때가 있는데 이럴때 여러 온라인 도구들이 있지만 대부분 리사이징까지 해주지는 않습니다

placeholder 내용을 보면 유튜브 쇼츠(youtube shorts) 도 지원하고 있습니다.

사용방법

썸네일 추출을 하고자 하는 영상을 우클릭해서 주소를 복사하거나

주소창에서 URL을 복사하거나 플레이중인 영상에서 우클릭을 통해 동영상 링크 공유를 해서 URL을 어떻게해서든 획득했다면

이렇게 추출이 진행됩니다

기본적으로 이미지는 HD (1280x720) 크기로 적용되고 있습니다.

이미지를 클릭하면 변환된 원본 이미지가 새탭으로 열리기도 하지만

적용 다운로드 버튼을 통해 진행해볼수도 있습니다.

Cloudflare 내 서비스의 캐시는 잘 동작하는 걸까?

TL&D — Sat, 30 Mar 2024 00:30:17 +0900

Cloudflare 를 사용하는 많은 사용자들이 생각보다 놓치고 있는 부분입니다.

Cf-Cache-Status 는 기본적으로 HIT 가 설정되지 않는 이상 대부분 캐싱이 적중하지 않았다는 의미입니다.

대표적으로 DYNAMIC 은 Cloudflare가 판단할때 캐싱할 가치가 없다고 판단한건데 대표적인 이유는 공식문서에서 기재되어 있습니다.

위 이미지 및 링크에 명시된 확장자의 경우 별도의 설정 없이도 기본적으로 캐싱에 반드시 적중합니다.

하지만 첫줄 내용을 읽어보면 HTML은 기본적으로 cache 하지 않는다고 합니다.

이유는 동적 컨텐츠가 많기 때문이겠죠?

이걸 해결하기 위해서는 cloudflare 에 등록한 도메인별 캐시 설정이 필요합니다.

캐시 룰을 위와 같이 설정합니다.

캐시 적합성 -> 캐시에 적합

에지 TTL -> 캐시 제어 헤더가 있는 경우 사용하고, 없는 경우 기본 Cloudflare 캐싱 동작을 사용합니다.

에지 TTL의 2번째를 선택하는 이유는 코드로 따지면 override 가 가능해진다는 의미입니다.

사용자가 정의한 cache-control / cdn-cache-control / cloudflare-cdn-cache-control 헤더를 선언해서 사용자가 정의한걸 먼저 따르게 되는건데 없을땐 기본 동작으로 할당하는거죠.

3번째의 경우는 코드나 서버 설정의 별도 처리 없이 cloudflare 프록시내에서 강제로 설정하게 됩니다.

이러한 Edge Cache를 설정하지 않은 경우 cloudflare의 pages 및 worker 등에서 응답이 굉장히 느립니다.

특히나 한국의 경우 Enterprise 요금제를 사용하지 않을 경우 ICN(인천) 리전의 연산 및 응답을 받지 못하기 때문에 AWS 같은 서비스 대비 가격 말고는 이점이 없는 수준이 되는거죠.

하지만 Edge TTL을 사용한다면 Cloudfront 급의 속도까진 아니지만 그와 유사한 것을 무료로 사용할 수 있게됩니다.

Remix.js Dark Theme 설정

TL&D — Wed, 8 Feb 2023 21:15:24 +0900

Nuxt3의 nitro가 Cloudflare Pages Functions에서 GET 메소드 이외의 처리를 하지 않은 크나큰 충격으로 Vercel을 손절하고 갈아탄 Remix도 역시 나사가 몇가지씩 빠져있었습니다.

Vue Svelte Astro Nuxt2 Nuxt3 Sveltekit 등 다양한 Reactive Framework를 사용해왔지만, React는 JSX 문법이 싫어서 항상 꺼려왔는데 대부분의 프레임워크가 Vercel이 관여하고 있어서 결국 Remix로 돔황쳤습니다.

Nuxt3와 Astro의 강제 주입식 문법으로 인해서 React의 함수들이 어색하진 않았는데

리믹스의 문제점은 크게 2가지가 나타났습니다.

- 뒤로가기 캐싱 안됨. 일부러 그런건지는 모르겠지만 이전페이지 데이터를 다시 불러옵니다. 이럴거면 굳이 Hydrate는 뭐하러 하나 싶을정도...

- Cookie 관리의 잘못된 예제들

첫번째 문제는 리믹스 자체의 문제지만, 두번째는 사용자들의 잘못된 전달입니다. 이게 무적권 틀렸다 라고는 할 수 없지만 굳이 서버로 부하를 주지 않아도 될 요청을 함으로써 개발은 개발대로 불편해지기 때문에 오늘 기록해둘 내용은 클라이언트 위주의 쿠키 동작 방식입니다.

다크테마 예제 문제점

다크테마는 흔히 쿠키를 통해 저장해서 사용을 많이 합니다.

그런데 React 진영에는 확실히 Frontend 개발자분들의 생태계가 많다보니 서버로의 처리를 위임하는 듯한 예제가 좀 많았는데,

그 예시로 다크 테마의 예제가 있었습니다.

대표적으로 구글 검색시 제일 먼저 노출되는 예제 입니다.

https://www.mattstobbs.com/remix-dark-mode/

The Complete Guide to Dark Mode with Remix

Dark Mode can be surprisingly tricky to add with any framework. But Remix gives us some unique tools to deliver a fantastic user experience. In this post, we'll look at how Remix allows us to use the platform to provide a perfect theming solution.

www.mattstobbs.com

그 외에도 Codepen등 클라우드 코드 예시도 비슷한 양상이었습니다.

이러한 예제들의 프로세스 흐름은

1. loader를 이용해 request header로 부터 Cookie 응답을 반환

2. 1번의 쿠키를 state 또는 context 등을 통해 메모리에 적재

3. 테마 업데이트를 위해 action 으로 API 생성

4. fetcher.Form 으로 post 요청해 action API에 쿠키 변경을 적용

5. 1번 반복

2번까진 괜찮았는데 도대체 어떻게 생각을하면 서버로 요청을 보내서 쿠키를 적용시킬 생각을 하는지 신기합니다.

그렇다고 쿠키에 httponly secure samesite를 설정할것도 아니면서 말이죠...

아마 킹리적 갓심으로는 Remix에서 제공해주는 Cookie 와 Session 이 있기 때문에 그러한 발상이 있었을거라고 추측됩니다.

먼저 제가 리액트를 리믹스를 통해 처음써봤기 때문에 더 유연한 작성이 있을 수 있으니 그점은 양해해주세요 (밑밥까는중)

시작하기전 개선되는 프로세스를 나열해보면

1. loader에서 request Header에 있는 Cookie 정보를 읽어온 뒤 이를 json으로 반환

2. 1번에서 획득한 다크테마 정보를 state에 적재하고 context를 통해 global 상태로 적용

3. context 바인딩에서 획득한 다크테마 상태값과 토글 함수를 이용해 쿠키 적용 및 상태 적용

코드 작성 관점 순서

1. context / hook 작성

2. root.tsx에 적용 끝

1. Context 및 Custom Hook작성

저는 app/contexts 라는 폴더를 만들어 app/contexts/theme.ts 파일에 작성하였습니다.

폴더의 경로나 위치가 강제되지 않으니 유연하게 작성하시면 됩니다.

import { createContext, useState } from "react";

interface ThemeContextType {
    toggleTheme(): void
    isDarkMode: boolean
}

const DARK_MODE_KEY = 'REMIX:DARK'
const NEVER = 'Fri, 31 Dec 9999 23:59:59 GMT' // MDN:: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#example_3_do_something_only_once

function setCookie(name: string, value: string | boolean, ttl: number = 0) {
    const expire = new Date();
    expire.setDate(expire.getTime() + ttl);
    document.cookie = `${name}=${value}; expires=${ttl > 0 ? expire.toUTCString() : NEVER};`
}

export const ThemeContext = createContext<ThemeContextType>({
  isDarkMode: false, toggleTheme: () => { }
})

export function useTheme(defaultValue: boolean = false): [boolean, ()=> void] {
    const [darkTheme, setDarkTheme] = useState(defaultValue);

    function toggleTheme(): void {
        setCookie(DARK_MODE_KEY, !darkTheme)
        setDarkTheme(!darkTheme)
    }

    return [darkTheme, toggleTheme]
}

go언어에서는 소문자 시작의 함수명은 private 해서 대문자로 쓰고싶지만... 리액트 공식문서에서 useFunction 형식을 사용하라고 권고해서 어쩔수없이 useTheme 입니다.

Context API 예시들을 보면, Reducer를 따로 작성하시는 분들이 보이더군요.

지금은 사장되서 잘 안쓰이는 Vue2 시절 Vuex의 Mutation Action을 작성하는 느낌이었는데, 오히려 장황해보이는 것 같기도하고

useState를 이용하면 굳이 필요없길래 그냥 대충 만들었습니다.

지금 이글을 보고 따라하시는 여러분도 걍 복붙해서 쓰시면 짧고 굵고 얼마나 좋나여

딱히 코드 설명할게 없어서 패스...

2. root.tsx 적용

// root.tsx
import { json, LoaderArgs } from "@remix-run/cloudflare";
import { ThemeContext, useTheme } from "./contexts/theme";

export const loader = async ({ request }: LoaderArgs) => {
  let isDarkMode = false
  const cookies = request.headers.get('cookie')?.split('; ')
  const index = cookies?.findIndex(str => str.includes(DARK_MODE_KEY)) || -1;
  if (index > -1 && cookies) {
    const val = cookies[index].split('=')[1]
    isDarkMode = val === 'true' ? true : false
  }
  return json({ isDarkMode })
}

export default function App() {
  const { isDarkMode } = useLoaderData<typeof loader>();
  const [darkTheme, toggleTheme] = useTheme(isDarkMode);

  return (
    <html lang="ko">
      <head>
        <Meta />
        <Links />
      </head>
      <StateContext.Provider value={{isDarkMode: darkTheme, toggleTheme}}>
        <body className={darkTheme ? 'dark' : ''}>
          // ... 하위 컴포넌트
          <ScrollRestoration />
          <Scripts />
          <LiveReload />
        </body>
      </StateContext.Provider>
    </html>
  );
}

root에서는 useLoaderData 를 통해 loader 함수에서 cookie 정보를 읽고, 이를 JSON으로 반환하게 하였습니다.

위 과정을 통해 페이지 첫 접근(새로고침 포함)시 다크테마가 활성상태인지 비 활성상태인지 구분할 수 있습니다.

useTheme 는 위에서 받아온 정보를 기본값으로 넣어주고, darkTheme 및 toggleTheme를 context 로 전달합니다.

별도의 버튼이 있다면, 어디서든 toggleTheme() 를 호출하면 body태그 class에 dark 가 적용되는 것을 볼 수 있습니다.

Remix의 loader가 하위 요청으로 발생하는지 SSR 접근시 동시에 먼저 처리하고 UI를 렌더링하는지 직접 디스코드에서 질문하였는데 1분만에 답변을 받았습니다.

결론은 하위 요청은 발생하지 않고, SSR 접근시 먼저 처리후 UI를 렌더링 한다고 합니다.

이렇게 짧게 끝날걸 예제들은 뭔 꼴랑 다크테마 설정하는 쿠키를 가지고 어떻게해서든 기어코 죽어라 프레임워크 내장함수좀 써보겠다고 api action 만들고 fetcher 선언해서 fetcher.Form 으로 또 요청해가지고 괜히 불러왔던 데이터까지 다 새로 요청하고 요청이랑 서버 부하만 늘리고 있는 이상한 예제가 많아서 작성해보았습니다.

사실 나중에 프로젝트 생성할때마다 복붙하기 귀찮은 면도 없잖아 있는 것 같군요.

물론 서버로 요청해서 처리해야하는 쿠키들도 존재합니다. httponly secure samesite 등의 설정을하여 악의적인 사용자가 javascript를 이용해 세션이나 타 사이트에서 접근하지 못하게 하는 요청의 경우는 다른 예제들처럼 서버로 요청해서 쿠키를 설정하는 것이 올바른 선택지입니다.

하지만 보안 설정해도 매우 쉽게 돚거할 수 있어서 그냥 ~~ㅈ밥거르기 용으로~~ 설정할때 써먹는 방법입니다.

메이플 커마 - 메애기 코디 분석 및 공유 서비스 공개

TL&D — Sun, 29 Jan 2023 15:40:51 +0900

https://maple.curma.cc

메이플 코디 공유

메이플스토리의 다양한 유저들의 코디를 확인하고 내 코디를 공유해보세요! 가장 많이 사용한 코디부터 같은 부위를 사용한 다른 코디까지 지금 바로 만나 보실수 있어요!

maple.curma.cc

메이플 커마는 메이플스토리 캐릭터의 코디 정보를 분석 및 공유하는 써드파티 서비스입니다.

개발 계기

메이플 스토리의 코디 정보를 보여주는 메이플지지의 경우는 캐릭터명을 통한 검색이며, 특정 캐릭터에 대한 빅데이터를 모아 해당 캐릭터의 통계 그리고 전체 빅데이터를 가지고 다시 전체 통계를 산출하는 등의 서비스 입니다.

메이플 지지의 코디 컬렉션은 극히 일부 기능일 뿐입니다.

또한, 메이플 스토리 공식홈페이지에 게시되어 있는 코디 베스트라는 기능이 있습니다.

코디 베스트는 코디/룩 정보 없이 그냥 자랑하는 기능이며 이를 추천 등의 액션을 통해서 주간 베스트를 적용합니다.

마지막으로 대부분의 코디 관련 써드파티 서비스들은 DB화가 아닌 JAM Stack 위주의 정적서비스로 개발되어

https://maplestory.io 에 요청을 보내어 시뮬레이션을 하는 서비스가 대 다수 입니다.

위와 같은 3가지 서비스들은 다 각기 다른 목적을 가지고 있지만, 공통적으로는 코디라는 카테고리가 있습니다.

저는 시뮬레이션하기는 귀찮고 다른사람들이 특정 아이템을 가지고 각기 다른 코디를 한 것을 볼 수 있으면 어떨까? 라는 계기로

개발을 진행하게 되었습니다.

개발 과정 문제

초기 버전 출시 당시의 메이플 커마는 메이플 금손이라는 이름으로 런칭하였습니다.

처음에는 아바타 정보를 역산하지 못하였고, 유저들이 로그인 후 자유롭게 수정할 수 있는 모습으로 출시되었습니다.

또 초기 배포 당시에는 Nuxt3 프레임워크가 예상치 못한 이슈가 있었는데, Cloudflare Pages Functions로 배포시

GET 메소드를 제외하고는 사용하지 못한다는 문제를 출시 직전에 발견하였습니다.

급하게 Cloudflare Worker로 API를 만들어 출시하였었지만, 앞으로도 Cloudflare Pages를 계속해서 이용할텐데 Nuxt는 이제 2버전에 이어 여전히 꼭 나사가 몇개씩 빠져있어서 앞으로는 일할때 요구하지 않는 이상 사용하지는 않을듯 합니다.

코디 분석

출시 이후 페타코님의 도움을 받아 아바타 주소에 대한 역산을 적용하였습니다.

이로 인해 초기 버전에서 사용되었던 코디 정보 수정 기능을 과감하게 제거하였고, 아바타 주소 역산으로만 동작하게 됩니다.

역산의 경우 일부 오탐이 있으며 대략 정확도는 95% 이상이라고 추측하고 있습니다.

오탐은 피부 그리고 성형에서 발견되며, 성형의 경우 오탐 발견시 버그 제보를 통해 제보해주시거나 별도의 연락 또는 개인적으로 발견시 DB에 강제 주입하거나 매핑을 교체하는식으로 적용할 수 있게 DB 모델을 설계하였습니다.

메이플 지지의 코디분석 기능과 비교

메이플 지지에서는 표기되는 부위가 총 7부위 입니다. 위 캐릭터의 경우 모자와 헤어 총 2가지 부위 밖에 역산되지 않았습니다.

https://maple.curma.cc/characters/83250

메이플 커마에서는 총 15부위를 역산합니다.

한벌옷이 추출되는 경우에는 상의/하의가 표기되지 않으며, 반대로 상의/하의가 추출된 경우 한벌옷이 추출되지 않습니다.

아바타 주소 역산하기

메이플 지지 코디 컬렉션 응용편

메이플 지지는 최대 6개까지 지난 코디의 아바타를 보여주게됩니다.

지난 코디의 이미지는 보여주지만 해당 아바타의 코디 정보를 볼 수는 없기 때문에 많이 아쉬운 부분이 있었습니다.

하지만 이를 메이플 커마에서 분석이 가능합니다.

메이플 지지에서 정보를 추출하고 싶은 컬렉션의 이미지에 마우스 우클릭 후 `이미지 주소 복사` 를 클릭합니다.

메이플 커마의 메인페이지에 있는 입력창에 아바타 주소 붙여넣기 후 검색을 누르면

https://maple.curma.cc/characters/266194

즉시 주소를 역산후 DB에 자동등록되며 분석된 경로로 자동 이동되어 정보를 보여주게 됩니다.

기존에는 클라이언트에서 이 과정을 진행하였지만, 일부 호환되지 않는 기기 및 웹 표준기술을 지키지 않는 아이폰의 Safari 브라우저 등에서 정보 추출이 진행되지 않는 문제가 발생하여 이를 서버에서 역산하도록 변경하였습니다.

캐릭터 이름을 통한 검색도 지원하지만, 아바타 주소와는 다르게 메이플 스토리 랭킹서버에서 해당 캐릭터를 조회후 아바타 주소를 추출하여 역산하는 과정을 거치기 때문에, 상대적으로 주소 입력 방식보다는 느린 이슈가 있습니다.

아바타 주소 역산 속도는 평균 0.007초 정도 소요 됩니다.

하지만 데이터베이스에 등록하는 과정또는 캐릭터를 검색하는 과정 등으로 인해 시간이 좀 더 소요됩니다.

최대 10초 이상 응답하지 않는 경우 새로고침을 권장드립니다.

같은 부위 다른 코디

처음 메이플 커마를 설계할 당시 가장 먼저 염두에 두었던 기능입니다.

같은 부위를 사용한 다른 유저의 다른 코디를 보고 싶었기에 해당 기능을 추가하였습니다.

분석된 코디의 각 부위에 대한 모든 다른 코디를 보여주게 되며, 해당 부위에 다른 유저 코디가 없는경우 노출되지 않습니다.

앞에서 말씀드렸던것 처럼 피부에서는 오탐이 발견되었습니다.

하지만 피부의 경우는 성형과다르게 매핑을 수정할 수 없어서 아직도 어떻게 할지는 고민중입니다.

캐릭터 이미지 관련 기능

코디 분석 결과에서 캐릭터 이미지에 마우스를 올려보시면 위 이미지 와 같이 3가지의 아이콘 버튼이 보여지게됩니다.

좌측 화살표 4개가 있는 아이콘의 경우는 위 이미지들과 같이 망토가 보이는 이미지로 축소 또는 확대하는 버튼입니다.

우측 2가지는 각각 클립보드 복사(좌)와 저장 버튼(우)입니다.

클립보드 복사의 경우 일부 유저분들이 카톡이나 디스코드 등의 메신저로 다운받지 않고 바로 전송할 수 있도록 또는

일부 메이플스토리 유튜브 편집자 분들께서 좀더 편하게 일하시라고 추가해본 기능입니다.

저장시 파일명은 아바타 주소를 파일명으로 저장되기 때문에 나중에 까먹으셔도 파일명을 통해 주소를 이어붙이면 언제든 검색이 가능합니다.

코디 정보 하단 버튼 기능

코디 정보에서는 위 이미지와 같이 3가지 버튼이 있습니다.

- 좌측 버튼은 코디 정보카드의 색상을 변경하는 기능입니다.

- 가운데는 코디 정보 카드를 이미지로 저장하는 기능입니다.

- 우측 버튼은 해당 코디 정보 페이지의 주소를 클립보드로 복사하여 공유하는 기능입니다.

통계

통계는 처음에 서비스가 너무 밋밋한 느낌이있어서 추가한 기능입니다.

총 15부위에 대한 적용 비율과 횟수에 대한 통계치이며, 이 통계 수치는 메이플 커마에 등록된 캐릭터들의 정보를 기반으로 집계 및 산출되었습니다.

쿼리 성능의 문제가 있어서 최대 100개 까지만 노출됩니다.

믹염(믹스염색) 헤어

메이플지지는 믹염에서 헤어 종류가 너무 적거나, 시뮬레이터 서비스들은 비율이 즉각 반영 안되는 이슈들이 있어서

그냥 제가 보려고 만든 기능이었는데 생각보다 분석 기능 만큼 많이들 좋아해주신 기능입니다.

- 믹염은 항상 최신헤어가 먼저 노출됩니다.

- 믹염은 매일 오전 10시에 정보를 동기화합니다.

- 모바일에서 볼때도 색상에 대한 구분이 쉽도록 컬러표가 아닌, 텍스트로 색상을 표기하였습니다.

믹스 렌즈

믹스 렌즈는 믹염의 반응이 더 좋아진다면 적용해볼 예정입니다.

믹염 + 믹렌은 경우의수가 대충 계산해도 170만개의 이미지를 들고있어야 해서 할지 말지 고민중입니다...

적용 가능한 방법도 모색중이긴 합니다.

이미지 로드 방식

믹염을 제외한 이미지의 경우는 넥슨사의 메이플 아바타 CDN으로부터 이미지를 획득하게 됩니다.

하지만 메이플 커마는 목록에서 기본적으로 200개의 캐릭터 이미지를 불러오기 때문에 과도한 요청으로 해당 서버가 받을 부담이 매우 클거라 생각하여, 별도의 이미지 프록시를 적용하였습니다.

이미지 프록시 서버를 통해서 넥슨 CDN에서는 제공하지 않는 캐시 컨트롤을 적용함으로써 1차적으로 브라우저 캐시 2차적으로는 Cloudflare사의 CDN Edge Cache가 적용됩니다.

프록시 서버로부터 오류가 발생할 경우 자동으로 넥슨 CDN으로 요청하게 됩니다.

버그제보 / 문의 / 피드백

페이지 하단에 버그제보 및 문의 피드백 등이 존재합니다.

클릭시 커마 서비스의 디스코드 서버로 연결됩니다.

API 공유

아이템 정보 및 믹염 헤어 동기화 과정

https://maplestory.io 여기서 아이템 정보 및 헤어 정보 그리고 이미지를 동기화합니다.

해당 API로부터 받은 정보이기 때문에, 저 또한 CORS 없이 적용하였습니다. 해당 정보들은 정적사이트를 통해 배포하였기 때문에 무료로 운영되고 있어서 다른분들이 가져다가 쓰셔도 되도록 하였습니다.

maplestory.io가 KMST 를 빠르게 반영해준다면, KMS에 적용되기전에 믹염 정보가 반영될 수 있기 때문에

미리 믹염 비율을 조정하고 헤어를 확인해볼 수 있습니다.

동기화 버전 정보

https://api.maple.curma.cc/version.json

어떤 버전으로 적용되어 있는지 확인할 수 있습니다.

region은 메이플스토리 한국 서버기준으로는 KMS와 KMST가 있으며, KMST는 테스트서버를 의미합니다.

version의 1150은 KMST의 1.2.150 버전을 의미합니다.

createdAt 은 해당 정보를 동기화를 하여 파일을 생성한 시각입니다.

동기화 단일 아이템 정보

https://api.maple.curma.cc/singles.json

주로 메이플 커마 검색에 사용되는 기능입니다.

색상이 함께 표기되는 아이템은 색상 명을 제거하였고, 중복된 아이템명은 제거하였습니다.

part는 어떤 부위인지를 나타내는 정보입니다.

동기화 헤어 정보

https://api.maple.curma.cc/hairs.json

메이플 커마 믹염에서 노출되는 헤어 종류입니다.

gender는 성별을 의미하지만, maplestory.io 에서 일부 헤어 성별이 잘못 지정된 경우가 있습니다.

메이플 커마에서는 별도의 필터링을 거쳐서 표기하고 있지만, API를 사용하실때는 이를 유의해서 사용하셔야 합니다.

동기화된 헤어 이미지

https://api.maple.curma.cc/hairs/<hairId>.png

https://api.maple.curma.cc/hairs/64397.png

hairs 목록에 존재하는 헤어 이미지는 위 주소처럼 요청하실 수 있습니다.

메이플 커마 믹염에 설명된것 처럼 호수물결 조용한 눈얼굴 등을 사용하였습니다.

이미지는 각 개별로 저장하기엔 사용자가 요청하는 구간이 너무 많아서 sprite 방식으로 변경할지는 아직 고민중에 있습니다.

카카오 링크 미리보기 공유 출력안됨

카카오 개발 커뮤니티를 통해서 문의를 진행해둔 상황이긴합니다.

Cloudflare 를 무료 버전으로 사용할때는 아래 링크처럼 메이플 커마는 정상 동작합니다.

https://maple.curma.cc/characters/266229

266229번 코디

[BLACKPINK] 베놈 시크, 주황색 안개 셀린 헤어, 졸린 조용한 얼굴, 투명 안경, 아련한 메이크업, 체인드롭 이어링, 밀키 피부, 칠흑의 날개 코트, 큐티 펑크 구두, 투명 장갑, 은하 음악회, 미스터리

maple.curma.cc

하지만 Cloudflare Pro를 유료 버전을 적용한 경우 아래와 같이 노출되지 않는 문제가 있습니다.

https://goldenhand.pro/arts/3UVigKoQJj

이 부분은 카카오측과 클라우드플레어사 측에서 개선을 해야겠지만, 저 또한 양측을 이용하는 유저로써 또 앞으로 cloudflare를 통해서 서비스하는 유저들이 있을 수 있으니 지속된 발전을 위해 계속해서 협력할 것 입니다.

자매품

커마는 서브도메인을 통해 예측하셨겠지만, 메이플스토리 말고도 다른 서비스가 존재합니다.

현재는 아직 광고 심사를 위해서 연결하지 않았지만, 자매품으로 로스트아크, 프롬프트가 존재합니다.

던파의 경우 현재 개발 과정중에 있습니다.

던파가 완료되면, 로스트아크 커마와 프롬프트 커마가 분리 및 개편이 대대적으로 적용될 예정입니다.

로스트아크: https://goldenhand.pro

프롬프트: https://goldenhand.pro/arts

긴글 읽어주셔서 감사합니다.

커마에 추가되었으면 하는 게임이 있다면 언제든 디스코드를 통해 연락주세요!

선코디 후육성이 되는 그날까지...

Cloudflare D1 로컬 모드

TL&D — Sat, 10 Dec 2022 18:29:02 +0900

wrangler d1 execute <DB_NAME> --local --file=schema.sql

wrangler d1 execute example --local --file=schema.sql

schema.sql 은 backup된 데이터를 cloudflare d1 대시보드에서 다운받거나,

아래 명령을 통해 backup 본을 다운받습니다.

다운받으면 sqlite의 파일로 dump된 파일을 뱉는데, 이걸 DB Browser for Sqlite 같은걸이용해서 연뒤, 데이터베이스 내보내기를 SQL 확장자로 내보내면 DDL과 DML을 뱉습니다.

해당 sql의 파일명이 길어서 불편하니 schema.sql 로 바꾸고 다시 맨처음 명령 실행하면 되는데

D1_ALL_ERROR 발생시 프로젝트 폴더내 .wrangler/state/d1 에 있는 DB를 모두 삭제해준 뒤 다시 명령을 실행하면 충돌나는 파일이 제거되기 때문에 정상 동작 가능합니다.

# wrangler d1 backup create <db_name>
wrangler d1 backup create example


# 현재 버그가 있어서 --output 옵션이 명시되지 않으면 동작하지 않습니다.
# wrangler d1 backup download <binding_db_name> <uuid> --output=<save_path>
wrangler d1 backup download DB 12345678-1234-5678-123456789012 --output=".wrangler/state/d1/DB.sqlite3"

--output 을 wrangler가 참조하는 DB 위치로 바로 꽂아버리면 별다른 조치없이 개발서버에 디비를 반영할 수 있습니다.

Cloudflare D1 Database Sqlite3 Alpha 사용 후기

TL&D — Sat, 10 Dec 2022 00:21:37 +0900

클라우드플레어 블로거에서 돚거한 이미지

Cloudflare 의 서버리스 제품에서 굉장히 오랫동안 기다려오고 D1의 예고가 등장하자마자 존버의 존버를 했던 바로 Serverless DB의 결정체 sqlite3 기반의 DB 제품입니다.

현재는 Alpha 버전으로만 제공하고 있지만, 현재까지 출시된 d1-ORM 이나 Prepare로 사용되는 better-sqlite3 를 사용하고 있다는 점을 보았을때는 문법의 변경은 크게 나타나지 않을 것 같습니다.

또한, 서버리스의 DB 이자 Sqlite3를 이용하여 Edge 단에서 동작하는 Cloudflare의 특징을 잘 살려낸 만큼 여타 서비스들과 마찬가지로 HTTP REST API를 통해 제공도 하는데, DB가 읽기 전용 토큰으로 사용해서 노출되도 괜찮다면 경우에 따라서는 클라이언트가 직접적으로 통신도 가능하다는 이야기가 됩니다. (요금 폭탄은 본인의 몫)

사실 위와 같은 HTTP 통신 DB가 필요로했던 가장 큰 이유는 Cloudflare Worker가 Node.js의 서버와 Web Worker의 중앙 지점의 느낌에서 동작하기 때문에, TCP 연결이 불가능 했었습니다. 이러한 상황에서 사용할 수 있는 DB로는 클라우드에서 제공해주는 HTTP DB인 Fauna, Dynamo, Arango 처럼 HTTP 를 제공해주는 DB 뿐이었죠.

많이 쳐줘야 Haskell로 포팅되서 만들어진 Postgresql REST API 서버가 같이 도는 것 정도 있었습니다.

D1의 Alpha 테스트는 공개적으로 진행되고 있고, D1이 먼저 공개된 서비스는

Worker보다는 Cloudflare가 주력해서 하나의 풀스택으로 묶어버리기 위해 밀고 있는 Cloudflare Pages 입니다.

Pages에서 Functions를 통해 DB와 직접적으로 통신해서 Hydration SSR 서버를 올리라고 마치 유도하는 것 같았죠.
(결국에는 Worker에도 보이기 시작했지만요)

단점

Sqlite3
- sqlite3 안써본지가 5년이나 지났는데 postgresql, mysql, mariadb만 쓰다가 쓰면 Type에서 어어..? 싶은 순간이 옵니다.
- datetime 미지원 -> Text로 선언하고, 쿼리시 datetime(created_at) 이런식으로 표현
테이블 수정 불가능
- 웹 대시보드 상에서 아직 제공하지 않습니다.
- cli 명령을 통해 원격 DB에 붙어서 ALTER TABLE 쿼리로 수정해야 합니다.
유니크 제약사항 적용 불가
- 위와 같은 내용입니다. 대시보드에서만 제공하지 않습니다.
- 마찬가지로 cli 명령으로 ALTER TABLE이나 CREATE TABLE로 적용해야 합니다.
데이터 확인 불가
- 웹 대시보드 상에서 제공하지 않습니다.
- 백업트리거가 주기적으로 동작하고 있지만, 수동으로도 가능합니다. 이를 통해 DB 덤프를 생성하여 로컬에서
  DB Browser for SQLite 같은 프로그램을 사용하여 확인할 수 있습니다.
d1-console 오픈소스의 불완전 함
- 알파이니 그럴 수 있습니다...
- 예를들면 SELECT * FROM posts 라는 쿼리를 통해 posts 테이블을 조회하는 경우 오류가 발생
- SELECT title from posts 라는 쿼리를 날리면 한글의 경우 일부가 표기 안됨.
- 대체방안으로 그냥 공식적으로 지원하는 wrangler d1 을 이용하는게 정신건강에 좋습니다.
HTTP 요청의 단점
- 사실 http 요청은 공식 API에도 아직 게재가 안된건데 오픈소스 보고 뚫어서 사용중입니다.
- http 요청의 경우 prepare가 없어서 직접 구현하던가 무시하고 작성해야 합니다.
- prepare 없이 작성하는 경우 삽입하는 내용중에 ;(세미콜론) 이 포함되어 있을때 오류가 발생합니다.
- 굳이 필요없다면 세미콜론을 잘 처리해주셔야 합니다.
- 텍스트 삽입시 세미콜론과 마찬가지로 '(어퍼스트로피, 따옴표) 이슈가 있을 수 있습니다.
dev 실행시 로컬 모드 강제성
- cloudflare pages / functions + Nuxt3 로 진행하는 중 삽질을 쥰내 했습니다.
- dev 모드로 동작시 로컬 모드가 강제적으로 동작합니다.
- dev 동작하기 전에 schema.sql 등을 이용하거나 exeucte 명령으로 로컬 db의 테이블을 생성해주어야 합니다.
Nuxt.js 연동의 부실한 설명
- Next.js 연동 예제 오픈소스 보고 훔쳐서 발견했습니다.
- 아래와 같이 실행해야 합니다. wrangler로 실행하는데 -- npm run dev 명령을 뒤에 붙여서
  package.json에 정의된 dev 스크립트를 실행시키게합니다.
  
  이렇게되면 wrangler가 실행하기전에 dev를 프록시로 먼저 실행시키고 wrangler 서버가 동작합니다.
  실행 이후 콘솔(터미널) 에서 b 를 누르면 브라우저를 띄워주는데 그 주소 및 포트가 앞으로 개발하실때 보셔야하는 주소이고 거기서만 functions에 정의한 API가 정상적으로 동작합니다.
  
  ex) Nuxt 기본 포트가 3000이라면, wrangler 실행시 대체로 8788포트로 실행됨.

npx wrangler@pages pages dev --local --persist -- npm run dev

장점

HTTP 로 쿼리 수행 가능
- 일부 제한적인 환경 Cloudflare Worker 또는 다른 언어들을 사용해서 분리 개발하는데 DB는 같은 곳을 바라볼때, HTTP라는 공통된 규격이 있다는 것은 별다른 의존성없이도 가능하다는 것을 의미합니다.
서버리스
- 가장 강력한 장점입니다. 하다못해 AWS RDS 같은 것을 사용하면, 결국 수직/수평 확장에 대해서 언젠가는 고민을 해야합니다. 돈을 쳐발라서 오토스케일링을 걸던가 하는 방법이죠. 하지만 클라우드 제공사들은 DB서버는 유독 비싸게 요금을 받습니다. RDS 프리티어가 끝나면 젤 꾸진거 써도 월 75,000원 이상이 찍히는 것을 확인하실 수 있습니다.
- Cloudflare가 관리하니 샤딩이나 성능에 대한 고려가 없습니다.
전 세계 동기화
- Cloudflare의 유일 무이한 장점입니다. AWS/Google/Oracle/IBM/Naver 를 예시로들면 해당 국가의 그것도 특정 리전내에서만 서버가 돌고 백업이되고 하기 때문에, 사용자가 결국 글로벌 서비스 진출시 타 리전까지 등록하지 않으면 클라우드 제공사들은 이를 제공해주지 않습니다.
  (극단적인 예시로, 서울/경기에 핵이떨어져서 IDC가 모두 공중분해되면 서비스가 마비되지만 Cloudflare는 가장 가까운 CDN으로 알아서 잡아줍니다. [클플은 한국 버린지 오래라 어차피 오사카/도쿄가 젤 가깝습니다.])
- 현재는 Alpha 테스트 단계라 사용하는 국가 리전만 이용 가능합니다.
  (별다른 리전 설정은 없습니다. 가까운 리전 자동 적용)

아무리 쥐어짜도 장점이 더 없습니다. 그냥 DB인데 사실 가격 정책이 어떻게 정해지느냐에 따라 갈리겠지만,

서버리스 DB이니 만큼 쿼리 요청의 따른 지불 비용이 예상됩니다.

HTTP 쿼리 요청 방법

access token 발급 방법

https://dash.cloudflare.com/profile/api-tokens

* DB ID 발급은 그냥 DB 생성하고 해당 db 상세페이지 들어가면 보입니다.

* Account ID 확인은 Workers 탭 -> 개요 -> 우측 탭 중앙쯤에 계정 ID라고 표기되어 있습니다.

// Base URL
https://api.cloudflare.com/client/v4/accounts/{account_id}/d1/database/{db_id}/query

필수 항목

// Authorization 쓰기 싫으면 X-Auth-Key, X-Auth-Email 사용 하셔야합니다.
{
	"header": {
		"Authroization": "Bearer <access_token>"
	}
}

사용 방법

Javascript - Axios 사용

const uri = "https://api.cloudflare.com/client/v4/accounts/{account_id}/d1/database/{db_id}/query"
const options = {header: {Authroization: "Bearer <access_token>"}}
const payload = {sql: "SELECT * FROM <table_name>"}
axios.post(uri, payload, options)

JS로 작성하였으나, 타 언어도 동일합니다.

Python3 - requests 사용

import requests

uri = f"https://api.cloudflare.com/client/v4/accounts/{account_id}/d1/database/{db_id}/query"
headers = {"Authroization": f"Bearer {access_token}"}

const payload = {"sql": "SELECT * FROM <table_name>"}
requests.post(uri, json=payload, headers=headers)

Go 1.19

// 필요한것만 추출한거라 직접 결과 보고 뽑으시는게 좋습니다.
type QueryResponse struct {
	Result []struct {
		Results []struct {
			// 여기 컬럼 정의 필요
		} `json:"results"`
		Success bool `json:"success"`
		Meta    struct {
			Duration      float64     `json:"duration"`
			LastRowID     interface{} `json:"last_row_id"`
			Changes       interface{} `json:"changes"`
			ServedBy      string      `json:"served_by"`
			InternalStats interface{} `json:"internal_stats"`
		} `json:"meta"`
	} `json:"result"`
}


// 알잘딱 ㅇㅈ? 솔직히 이거보고 이해못하면 go언어 삭제해야됨.
var AccountID string 
var DatabaseID string

func main() {
	target := new(QueryResponse)
	client := &http.Client{}
    
    	uri := fmt.Sprintf("https://api.cloudflare.com/client/v4/accounts/%s/d1/database/%s/query", AccountID, DatabaseID)
	payload, _ := json.Marshal(query)

	req, _ := http.NewRequest(http.MethodPost, uri, bytes.NewBuffer(payload))
	req.Header.Set("content-type", "application/json")
	req.Header.Set("Authorization", fmt.Sprintf("Bearer %s", AccessToken))
    	resp, err := client.Do(req)
	if err != nil {
		log.Fatalln(err)
	}

	defer resp.Body.Close()
	_ = json.NewDecoder(resp.Body).Decode(target)
}

AI 이미지 프롬프트 추출 Browser JavaScript 기반

TL&D — Mon, 5 Dec 2022 18:55:16 +0900

Novel AI와 Web UI를 통해 생성한 AI 이미지는 우클릭 이미지 복사나 별도의 프로그램이나 서비스를 통해 재생성을 하지 않는 이상, PNG 파일 헤더내의 chunk로 정보를 저장합니다.

당연하게도 positive prompt(긍정 프롬프트) 또는 negative prompt(부정 프롬프트)가 길어질 수록 파일의 크기도 커집니다.

하지만 이러한 정보가 있어야 많은 사람들이 AI 이미지를 생성할 때 이를 참고하여 이러한 이미지를 만들 수 있구나 혹은 돚거(도적)질을 할 수 있게됩니다.

서버를 거치지 않고, 오직 클라이언트 JavaScript만을 사용하여, 이미지내에서 프롬프트를 추출하는 서비스를 만들게되어 공개합니다.

Demo

https://prompt.tlnd.cc

AI Generate Image

+ only `.PNG` image file + images created by WebUI / Novel AI + Don't request upload a server. + only Client Extract.

prompt.tlnd.cc

우마무스메 (속칭 말딸)의 하루 우라라를 만든 prompt를 포함한 이미지입니다.

NAI(novel ai) 또는 Web UI로 생성한 PNG 이미지를 업로드하면 즉시, 서버를 거치지 않고 오직 브라우저 상에서 이미지를 분석하고 정보를 추출해냅니다.

webui에서 생성하였던, Novel AI에서 생성하였던지 간에, 양측의 가중치로 변환하는 복사 기능을 포함하였습니다.

NSFW.JS 를 빠르게 사용하기

TL&D — Mon, 5 Dec 2022 18:47:23 +0900

https://gmyankee.tistory.com/381

NSFWJS + TFJS WASM + Web Worker

개요 한국어로는 후방주의 ㅎㅂ) 이런식으로 혼자있을때가 아닌 경우 음란물이 있을 수 있으니 주의하라는 의미로 많이 사용하는 용어인데, 영어로는 nsfw(not safe for work) 라고 표현합니다. nsfwjs

gmyankee.tistory.com

지난번에 게시한 NSFW JS의 Demo 페이지를 추가하였습니다.

썸네일 및 테스트 이미지

Demo

https://nsfw.tlnd.cc

NSFW JS + WASM on Web Worker

- with Tensorflow.js wasm version - with Web Worker Not Main Thread - don't request upload a server. - only client side nsfw validate.

nsfw.tlnd.cc

Tensorflow의 wasm 버전과 Web Worker를 이용하여 빠른 모델로드 그리고 빠른 연산 수행을 진행하며,

메인스레드의 부하를 주지 않아 쾌적한 nsfw 체크가 가능합니다.

Gorm 에서 constraint로 OnDelete 설정이 안될 때

TL&D — Sat, 29 Oct 2022 21:05:41 +0900

Go언어 에서 많은 ORM이 있지만, 여러가지 써보아도 결국 GORM으로 회귀하게 됩니다.

매우 많은 기능과 이미 많이 쌓인 커뮤니티 그리고 사용이 쉽기 때문이죠.

그런데 제약사항 설정 중 on delete CASCADE를 설정한다던가 SET NULL 을 넣는다 등을 Auto Migrate 과정에서 진행하고 싶을 수 도 있습니다. 당연히 ORM 코드상에서 명시하여 DB에 자동설정이 되어야 orm을 쓰는 의미가 있기도 하구요.

Node.js의 대부분 ORM들은 물리적 db에 이과정을 진행하지 않는 경우가 많긴 하지만요.

하지만 foreignKey에 constraint를 넣어도 물리 DB상에서는 constraint로 on delete on update가 적용되지 않는 현상이 있습니다.

이럴 경우 GORM에서는 이를 검증하지만 실제 Table에서는 CASCADE가 실제로 설정되지 않았기 때문에 오류가 발생합니다.

위 와 같은 현상이 발생한 가장 큰 이유는 GORM의 명시 선언의 우선순위가 문제가 됩니다.

https://github.com/go-gorm/gorm/issues/4289#issuecomment-943366275

MySQL Migration - OnUpdate / OnDelete CASCADE not being applied to schema · Issue #4289 · go-gorm/gorm

Hi! Firstly, thanks for a great library, it is really intuitive and the documentation is excellent. However, I am having difficulty understanding why a constraint I am adding to my foreign keys is ...

github.com

위 댓글 내용 처럼 호출하는 부모 모델상에서 constraint를 걸어주고 실제 Table에서 확인을 해보면 적용이 되는 것을 볼 수 있습니다.

NSFWJS + TFJS WASM + Web Worker

TL&D — Thu, 20 Oct 2022 14:42:18 +0900

개요

한국어로는 후방주의 ㅎㅂ) 이런식으로 혼자있을때가 아닌 경우 음란물이 있을 수 있으니 주의하라는 의미로 많이 사용하는 용어인데, 영어로는 nsfw(not safe for work) 라고 표현합니다.

nsfwjs는 Tensorflow의 JS버전인 tfjs를 사용하여 mobile net 버전의 모델을 사용해서 client side에서 성인 이미지를 판별하는 오픈소스입니다.

하지만 첫 페이지 접근시 모델을 불러오는 속도가 굉장히 느립니다.

이 문제를 해결하기 위해서 저는 nsfwjs의 코드가 그리많지 않았고, Tensorflow js를 사용하는것을 확인해서 TFJS WASM 버전으로 직접 만들게 되었습니다.

Demo

https://nsfw.tlnd.cc

NSFW JS + WASM on Web Worker

- with Tensorflow.js wasm version - with Web Worker Not Main Thread - don't request upload a server. - only client side nsfw validate.

nsfw.tlnd.cc

그래서 이게 뭔데?

서버 없이 Javascript 만 사용해서, 성인 이미지를 판별할 수 있는 코드 입니다.

문제점

하지만 tfjs wasm을 사용했을때는 첫 페이지 접근시 메인스레드에 영향은 없지만, 첫 호출시에는 모델을 로드할때 nsfwjs 와 마찬가지로 메인스레드에 부하가 심해, 브라우저가 멈추는 현상이 있습니다.

이 시간이 짧으면 괜찮지만, 사양에 따라서 2~7초 정도 소요되었는데 이걸 개선하기 위해 Web Worker를 사용하여 백그라운드 스레드를 이용해 메인스레드에 영향이 없도록 개선하는 방법을 착안했습니다.

결과

NSFWJS의 결과

상단: TFJS WASM / 하단 TFJS WASM + Webworker

NSFWJS와 비교했을때 약간의 오차가 있기는 하지만, 이미지를 판별하는데 있어서는 문제가 될 정도는 아닙니다.

메인스레드와도 오차가 있기는 한데 그것도 판별하는데 있어서 문제가 될 정도의 수치는 아닙니다.

카카오 비전 성인 이미지 판별 API와 비교했을때는 더이상 모델 학습을 안하는지 생각보다 좋은 결과를 주지 못합니다.

또한 adult 점수만 매기기 때문에, 굉장히 애매모호합니다.

무료인데 서버도 없이 이렇게 판단할 수 있다는 것은 굉장히 강력하다고 생각됩니다.

또 누군가에게는 반드시 필요로 할 것이라 생각해서 오픈소스로 공개합니다.

해당 코드는 아래에서 확인하실 수 있습니다.

기호에 맞게 Hentai, Porn, Drawing, Sexy, Neutral 문구를 변경해서 사용하시면 됩니다.

https://gist.github.com/YankeeTube/ee96f60f57b9038ee0b703fc6620e7d9

So Very Fast NSFWJS on TFJS WASM + Web Worker

So Very Fast NSFWJS on TFJS WASM + Web Worker. GitHub Gist: instantly share code, notes, and snippets.

gist.github.com