<![CDATA[동그리 연구소 · Dongri LAB: 💻 Develop]]>https://lab.dongri.me/s/develophttps://substackcdn.com/image/fetch/$s_!O1Tv!,w_256,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb0199a38-56e5-432d-860f-ebca7c7fe2cc_2000x2000.png동그리 연구소 · Dongri LAB: 💻 Develophttps://lab.dongri.me/s/developSubstackFri, 14 Aug 2026 17:14:03 GMT<![CDATA[이미지 Pixel Mosaic 애니메이션 — Lazy Loading 플러그인화]]>https://lab.dongri.me/p/pixel-mosaic-lazy-loaderhttps://lab.dongri.me/p/pixel-mosaic-lazy-loaderSun, 19 Jul 2026 00:00:00 GMT

2024년 4월, 이미지가 큰 픽셀에서 시작해 점차 선명해지는 Pixel Mosaic 애니메이션 프로토타입을 만들었습니다.

당시에는 CSS의 image-rendering: pixelated 속성을 이용해 크기가 다른 이미지 세 장을 순서대로 교체하는 정도로 구현했습니다. 50×28, 100×56, 640×360 크기의 이미지를 미리 준비한 뒤, 각 이미지를 원본 크기로 확대해 큰 픽셀에서 작은 픽셀로 변하는 것처럼 보여주는 방식이었습니다.

보이는 결과는 나쁘지 않았지만 실제 웹사이트에 적용하기에는 한계가 명확했습니다.

당시 제작했던 프로토타입

이미지마다 여러 크기의 파일을 미리 만들어야 했고, 이미지 크기와 비율이 달라지면 다시 작업해야 했습니다. 불러와야 하는 파일 수도 늘어나기 때문에 지연 로딩을 위한 기능이라기보다 단순한 전환 효과에 가까웠습니다.

당시 글의 마지막에는 이런 가설을 남겼습니다.

하나의 원본 이미지를 Canvas에서 작게 축소한 뒤 다시 확대하면,
별도의 저해상도 이미지를 만들지 않고도 Pixel Mosaic 효과를 적용할 수 있지 않을까?

JavaScript와 Canvas에 익숙하지 않았던 저는 AI의 도움을 받아 구현을 시도했습니다. 하지만 당시에는 제가 원하는 구조를 정확히 설명해도 가우시안 블러를 사용하거나, 픽셀을 불필요하게 복잡한 방식으로 다시 계산하는 코드가 만들어졌습니다.

imageSmoothingEnabled = false를 사용하면 비교적 단순하게 구현할 수 있다는 방향까지는 찾았지만, 여러 이미지에 안정적으로 적용할 수 있는 코드로 완성하지 못하고 프로토타입에서 멈췄습니다.

2년 뒤, 다시 꺼낸 프로토타입

Pixel Mosaic Lazy Loader 데모

그동안 AI를 활용한 개발 환경은 많이 달라졌습니다.

단순히 한 번의 프롬프트로 코드를 생성하는 수준을 넘어, 요구사항을 기능 단위로 나누고 실제 동작을 확인하면서 오류를 수정하거나 구조를 다시 설계하는 작업까지 함께 진행할 수 있게 됐습니다.

이번에는 단순히 화면에서 비슷하게 움직이는 결과를 만드는 것이 아니라,
실제 웹페이지에 적용할 수 있는 플러그인을 목표로 했습니다.

결과물은 Pixel Mosaic Lazy Loader라는 의존성 없는 JavaScript 모듈로 정리했습니다.

이 글을 작성하는 시점의 버전은 v1.2.6입니다. 여러 <img> 요소를 감지해 큰 픽셀에서 작은 픽셀을 거쳐 원본 이미지로 전환하며, 별도의 저해상도 이미지를 준비하지 않고 기존 원본 이미지를 Canvas에서 축소한 뒤 확대하는 방식으로 동작합니다.

별도의 저해상도 이미지를 만들지 않습니다

기존 프로토타입에서는 단계마다 별도의 이미지 파일이 필요했습니다.

새로운 플러그인은 현재 페이지에 있는 원본 <img>를 Canvas의 이미지 소스로 사용합니다. 이미지를 작은 크기로 축소한 뒤 imageSmoothingEnabled = false 상태로 다시 확대해 픽셀 모자이크를 만듭니다.

따라서 이미지 한 장을 위해 여러 해상도의 파일을 따로 제작하거나 서버에서 미리 생성할 필요가 없습니다.

이미지 크기에 따라 픽셀 단계를 자동으로 계산할 수도 있고, 필요한 경우 아래처럼 픽셀 크기를 직접 지정할 수도 있습니다.

PixelMosaic.init({
  duration: 1600,
  steps: [64, 40, 24, 14, 8, 4, 2]
});

전환 시간, 시작 지연, 단계 수, 픽셀 크기와 노이즈 강도는 전체 설정 또는 이미지별 속성으로 조절할 수 있습니다.

화면에 들어오는 이미지부터 실행합니다

기본 설정에서는 이미지가 화면 근처에 들어왔을 때 효과를 시작합니다.

초기 문서에 포함된 이미지뿐 아니라 이후 DOM에 추가된 이미지도 감지할 수 있으며, 여러 이미지가 동시에 화면에 나타나더라도 한 번에 처리하는 수를 제한할 수 있습니다.

엄밀히 말하면 이 플러그인은 이미지의 네트워크 요청 방식을 새롭게 대체하는 라이브러리라기보다, 브라우저의 네이티브 지연 로딩과 함께 사용할 수 있는 시각적 이미지 로더에 가깝습니다.

<img
  data-pixel-mosaic
  loading="lazy"
  src="/images/cover.jpg"
  width="1200"
  height="800"
  alt="서비스 소개 화면"
/>

loading="lazy"가 이미지 요청 시점을 관리하고, Pixel Mosaic Lazy Loader는 이미지가 준비돼 화면에 나타나는 과정을 픽셀 전환으로 표현합니다.

움직이는 이미지도 멈추지 않도록

처음 프로토타입을 만들었을 때 의외로 정적인 이미지보다 GIF에 적용한 결과가 더 재미있었습니다.

그래서 이번 플러그인에서는 GIF뿐 아니라 Animated WebP와 APNG도 고려했습니다.

지원되는 환경에서는 WebCodecs의 ImageDecoder를 이용해 애니메이션의 프레임과 재생 시간을 읽고, 각 프레임에 픽셀 모자이크를 적용합니다.

브라우저가 ImageDecoder를 지원하지 않거나 CORS 문제로 이미지 데이터를 읽을 수 없는 경우에도 애니메이션을 정지된 이미지로 바꾸지 않습니다. 원본 애니메이션의 재생을 유지한 채 픽셀 Canvas를 겹치는 방식으로 기능을 축소합니다.

애니메이션을 완벽하게 처리하지 못하는 환경에서도 최소한 원본 이미지의 움직임은 보존하는 방향을 선택했습니다.

웹 접근성을 해치지 않는 구조

시각적인 효과를 추가하더라도 기존 이미지의 의미와 조작을 방해해서는 안 된다고 생각했습니다.

플러그인은 원본 <img> 요소를 다른 요소로 교체하지 않습니다. 이미지의 alt 속성과 문서 구조를 그대로 유지하고, 효과를 위해 생성되는 Canvas만 보조 오버레이로 사용합니다.

Canvas에는 다음과 같은 속성이 적용됩니다.

  • aria-hidden="true"

  • role="presentation"

  • pointer-events: none

따라서 스크린 리더에 불필요한 요소로 노출되지 않으며, 이미지가 링크 안에 있더라도 클릭이나 키보드 포커스를 가로채지 않습니다.

운영체제나 브라우저에서 동작 줄이기를 설정한 사용자를 위해 prefers-reduced-motion: reduce도 반영합니다. 동작 줄이기가 활성화돼 있으면 모자이크와 노이즈 효과를 생략하고 원본 이미지를 바로 표시합니다.

모든 환경에서 똑같이 동작할 필요는 없습니다

처음에는 모든 브라우저와 기기에서 동일한 효과를 보여주는 것을 목표로 생각했습니다.

하지만 기능을 추가할수록 모든 환경에 같은 처리를 강제하는 것보다, 사용할 수 있는 기술과 기기 성능에 따라 적절하게 기능을 조절하는 편이 더 현실적이었습니다.

현재 플러그인은 환경에 따라 다음과 같이 동작합니다.

  1. Canvas 2D와 ImageDecoder를 지원하는 환경
    정적 이미지와 움직이는 이미지에 픽셀 모자이크와 실시간 노이즈를 적용합니다.

  2. Canvas 2D를 지원하는 환경
    정적 이미지에는 픽셀 모자이크를 적용하고, 움직이는 이미지는 원본 재생을 유지합니다.

  3. Canvas를 사용할 수 없는 환경
    CSS 또는 Web Animations API를 이용한 단계형 블러와 투명도 전환으로 대체합니다.

  4. JavaScript가 실행되지 않거나 동작 줄이기가 설정된 환경
    원본 <img>를 그대로 표시합니다.

최신 기능을 지원하는 환경에서는 효과를 확장하고, 그렇지 않은 환경에서는 콘텐츠를 훼손하지 않는 범위에서 자연스럽게 기능을 줄입니다.

웹에서 말하는 점진적 향상(Progressive Enhancement)​과 우아한 기능 저하(Graceful Degradation)​를 이번 작업을 통해 조금 더 구체적으로 이해하게 됐습니다.

모바일과 저사양 기기를 위한 성능 조절

Canvas와 실시간 노이즈는 여러 이미지에서 동시에 실행하면 생각보다 많은 자원을 사용할 수 있습니다.

따라서 플러그인은 Save-Data, deviceMemory, hardwareConcurrency와 포인터 유형 등을 참고해 렌더링 강도를 자동으로 조절할 수 있도록 구성했습니다.

기기 환경에 따라 동시에 처리할 이미지 수, Canvas의 DPR, 렌더링 FPS와 노이즈 프레임을 제한합니다.

PixelMosaic.init({
  quality: "auto",
  maxConcurrent: 2,
  maxDpr: 2,
  renderFps: "auto"
});

성능이 낮은 기기에서는 모든 효과를 억지로 유지하기보다 동시 처리량과 해상도를 낮추고, 필요한 경우 애니메이션 프레임 디코딩을 생략합니다.

다만 성능을 고려한 제어 장치를 포함했다는 것이 모든 페이지에서 성능 향상을 보장한다는 의미는 아닙니다. 실제 적용 시에는 이미지 수와 크기, 페이지 구조와 대상 기기를 기준으로 직접 확인하는 과정이 필요합니다.

간단하게 적용하기

CSS와 JavaScript 파일을 불러온 뒤, 효과를 적용할 이미지에 data-pixel-mosaic 속성을 추가합니다.

<link rel="stylesheet" href="/assets/pixel-mosaic.css" />

<img
  data-pixel-mosaic
  loading="lazy"
  src="/images/hero.jpg"
  width="1280"
  height="720"
  alt="제품 대시보드 화면"
/>

<script src="/assets/pixel-mosaic.js"></script>
<script>
  PixelMosaic.init({
    duration: 1400,
    steps: "auto",
    stepCount: 8,
    noise: {
      enabled: true,
      opacity: 0.14
    }
  });
</script>

플러그인을 자동 감지 방식으로 설정하면 특정 영역의 이미지에 속성을 하나씩 추가하지 않고도 적용할 수 있습니다. 반대로 로고나 아이콘처럼 효과가 필요하지 않은 이미지에는 data-no-pixel-mosaic 속성을 지정해 제외할 수 있습니다.

자세한 옵션과 사용 방법은 GitHub 저장소의 README에서 확인할 수 있습니다.

AI가 프로토타입과 결과물 사이를 좁혀준 과정

2024년의 AI는 제가 원하는 효과와 구현 원리를 설명해도 실제로 사용할 수 있는 구조까지 만들어주지는 못했습니다.

2년 뒤에는 같은 아이디어를 바탕으로 정적 이미지와 움직이는 이미지의 처리 방식을 나누고, 브라우저 지원 범위와 CORS 문제를 확인하고, 접근성과 성능 조건에 따라 기능이 축소되는 구조까지 함께 검토할 수 있었습니다.

물론 AI가 처음부터 완성된 답을 내놓은 것은 아닙니다.

모자이크가 끝난 뒤 노이즈가 남는 문제, 움직이는 이미지가 정지되는 문제, Canvas가 이미지의 둥근 모서리를 벗어나는 문제처럼 실제로 실행해 봐야 발견할 수 있는 오류가 계속 발생했습니다.

각 문제를 직접 확인하고 요구사항을 다시 정의한 뒤, 코드를 수정하고 여러 이미지 포맷에서 반복해서 테스트하는 과정이 필요했습니다.

AI가 대신 완성해 준 결과라기보다, 예전에는 구현 능력의 한계로 포기했던 아이디어를 다시 꺼내 실제 결과물까지 발전시킬 수 있는 도구가 생겼다는 쪽에 가깝습니다.

마무리

Pixel Mosaic Lazy Loader Github

2년 전에 만들었던 Pixel Mosaic는 정해진 이미지 세 장을 순서대로 교체하는 작은 프로토타입이었습니다.

당시 글에는 언젠가 하나의 원본 이미지와 Canvas만으로 여러 이미지에 적용해 보고 싶다는 내용을 적었습니다. 그때는 구현하지 못했지만, 이번에는 실제 웹페이지에서 사용할 수 있는 JavaScript 모듈로 다시 만들었습니다.

아직 복잡한 transform, 다중 clip-path, 교차 출처 애니메이션의 프레임 디코딩처럼 환경에 따라 제한되는 부분은 남아 있습니다. 브라우저와 사이트 구조가 달라지면 예상하지 못한 문제가 발생할 수도 있습니다.

그래도 단순히 비슷하게 보이는 데모에서 끝내지 않고, 웹 표준과 접근성을 유지하면서 다양한 환경에서 가능한 만큼 동작하는 도구로 발전시켰다는 점에 의미를 두고 싶습니다.

]]><![CDATA[OneDrive를 대체하려다 FilenMount를 만든 후기]]>https://lab.dongri.me/p/filenmount-rclone-network-drivehttps://lab.dongri.me/p/filenmount-rclone-network-driveFri, 17 Jul 2026 17:46:33 GMT

“어? 내 파일 어디 갔지?”

편리하게만 쓰던 OneDrive 동기화 오류로 작업중인 포트폴리오 파일들이 공중분해 될 뻔한 날, 결심했습니다. “로컬 동기화 방식은 이제 못 믿겠다. 무조건 필요한 파일만 실시간으로 불러오는 네트워크 드라이브로 갈아탄다!”

강력한 rclone, 하지만 무시무시한 CLI의 벽

가장 먼저 떠올린 대안은 오픈소스의 축복이라 불리는 rclone이었습니다.
구글 드라이브, 원드라이브 등 온갖 클라우드를 네트워크 드라이브로 마운트해 주는 강력한 도구입니다. 기능은 강력하지만 CLI 중심이라, 예전부터 알고도 제대로 사용하지 못했습니다.

바이브 코딩을 활용하면 rclone의 복잡한 설정과 명령어를 GUI 안에 숨길 수 있겠다고 생각했습니다.

처음 목표는 Google Drive, OneDrive, Dropbox 등 rclone이 지원하는 클라우드를 화면에서 간단히 연결하는 범용 Cloud Mounter였습니다.

하지만 정작 가장 먼저 사용하려던 OneDrive에서 막혔습니다.

2026년 7월 현재진행형, OneDrive의 치명적 버그

가장 먼저 연결하려던 OneDrive에서 ObjectHandle is Invalid 오류가 발생했습니다.
알고 보니 rclone 공식 깃허브에도 버그로 등록되어 2026년 7월 현재까지도 해결되지 않은 유서 깊은 버그였습니다. 결국 과감하게 방향을 틀었습니다.

마침 Filen이 rclone을 지원하기 시작했다

Filen is Now Part of Official Rclone
Filen is Now Part of Official Rclone

비슷한 시기에 저는 Filen을 다른 용도로 사용하려고 했습니다.

디자인 레퍼런스를 관리하는 Eagle에 넣을 벤치마크 자료를 별도 클라우드에 모아두고 싶었습니다. Filen 계정도 여러 개 가지고 있었기 때문에, 자료 보관용으로 활용하기에 적당하다고 생각했습니다.

Filen 공식 클라이언트에는 WebDAV와 Network Drive 기능이 있었지만,
제 환경에서는 정상적으로 연결되지 않거나 사용 중 문제가 발생했습니다.

그런데 마침 Filen이 rclone의 공식 백엔드에 포함됐습니다.
rclone 1.73부터 별도 커스텀 빌드 없이 Filen을 직접 연결하고 네트워크 드라이브로 마운트할 수 있게 됐습니다.

범용 Cloud Mounter를 계속 넓게 만드는 대신,
당장 제가 필요했던 Filen 사용 경험부터 제대로 만드는 편이 낫다고 판단했습니다.

그렇게 앱의 방향을 바꿨습니다.

Cloud Mounter는 FilenMount가 됐습니다.

다중 계정을 유연하게 묶어주는 ‘통합 드라이브’

FilenMount의 가장 편리한 점은 여러 개의 Filen 계정을 하나의 드라이브 경로로 묶어서 관리할 수 있다는 것입니다. 용도에 따라 계정을 분리해 사용하는 유저들에게 유용한 기능입니다.

예를 들어 업무용 계정과 개인용 백업 계정을 각각 따로 로그인할 필요 없이, 앱 내에서 하나로 통합하거나 필요에 따라 3개와 2개씩 서로 다른 드라이브로 쪼개서 구성할 수 있습니다.

  • 차곡차곡 저장되는 순차 방식:
    데이터를 여러 계정에 조각내서 분산 저장하지 않습니다.
    지정한 우선순위에 따라 1번 계정 용량이 다 차면 자동으로 다음 계정으로 넘어가 파일을 여러 계정에 조각내지 않고, 하나의 파일은 하나의 계정에 통째로 저장합니다.

  • 독립적인 드라이브 구성:
    통합하지 않은 계정은 언제든지 개별 네트워크 드라이브로 독립시켜 사용할 수도 있습니다.

그 밖에 다음 기능을 넣었습니다.

  • 스트리밍 방식 마운트:
    전체 파일을 미리 내려받지 않고, 파일을 열거나 저장할 때 필요한 데이터만 내려받습니다.

  • 직관적인 UI 관리:
    마우스 드래그 앤 드롭으로 여러 계정의 순서와 드라이브 결합 상태를 쉽게 바꿉니다.

  • 로컬 캐시 업로드:
    파일을 복사해 넣으면 캐시를 이용해 백그라운드에서 알아서 업로드를 완료합니다.

  • 사용자 편의성:
    부팅 시 자동 실행, 연결 복구, 계정 설정 암호화 백업 기능을 지원합니다.

  • 원클릭 환경 구성:
    사용자가 rclone을 별도로 설치하거나 복잡한 터미널 명령어를 입력하지 않아도 앱이 엔진 설치와 설정을 알아서 처리합니다.

바이브 코딩으로 만든 FilenMount

FilenMount는 클로드와 함께 바이브 코딩으로 만들었습니다.
처음에는 OneDrive 동기화 대신 사용할 간단한 도구가 필요했습니다.

그러다 rclone을 GUI로 감싼 범용 클라우드 마운트 앱을 만들기 시작했고, OneDrive의 Personal Vault 문제로 방향을 바꿨습니다. 이후 실제로 필요했던 Filen 사용 경험에 집중하면서 여러 계정을 하나로 묶어 사용할 수 있는 FilenMount가 됐습니다.

원래 해결하려던 문제를 그대로 해결하지는 못했습니다.

대신 그 과정에서 다른 문제를 발견했고, 지금 제게 더 유용한 도구를 만들게 됐습니다.

디자인만 하던 사람이 개발까지 기웃거리다 보니, 이제는 필요한 도구가 없으면 직접 만들어볼 수 있겠다는 생각도 조금씩 들기 시작했습니다.

물론 프롬프트 한 번으로 완성된 것은 아닙니다. 인증 이후 드라이브가 나타나지 않는 문제부터 운영체제별 마운트 방식, 네트워크 경로, 캐시 정책, 드래그 앤 드롭과 툴팁 같은 UI 문제까지 실행 결과를 확인하며 하나씩 수정했습니다.

제가 원하는 동작과 화면을 설명하고, 생성된 코드를 직접 실행해 오류와 불편한 부분을 다시 전달하는 과정을 반복했습니다.

디자인 시안을 만들고 피드백을 받아 다듬는 과정이 코드와 실행 결과로 바뀐 것에 가깝습니다.

FilenMount 다운받기

FilenMount의 소스 코드와 macOS·Windows용 실행 파일은
아래 GitHub 저장소에서 받을 수 있습니다.

Github FilenMount 다운받기

Filen 초대 링크

위 초대 링크를 통해 정상적으로 가입하면
기본 10GB와 초대 보너스 10GB를 합쳐 최대 20GB로 시작할 수 있습니다.

]]><![CDATA[Gemini·Copilot·Claude·Meta AI 대화 기록 한 번에 삭제하기]]>https://lab.dongri.me/p/ai-chat-history-delete-scripthttps://lab.dongri.me/p/ai-chat-history-delete-scriptSun, 28 Jun 2026 12:19:39 GMT

AI 서비스를 자주 쓰다 보면 대화 목록이 생각보다 빠르게 쌓입니다.

시간이 지나면 대부분 다시 열어보지 않는 테스트 대화, 임시 프롬프트, 작업 중간에 만든 초안, 실패한 질문들로 남습니다. 특히 Gemini나 Copilot처럼 왼쪽 사이드바에 최근 대화가 계속 쌓이는 서비스는 한 번 정리하려고 하면 생각보다 손이 많이 갑니다.

물론 각 서비스에서 대화를 하나씩 삭제할 수는 있습니다. 문제는 “하나씩”이라는 점입니다.

대화 하나를 선택하고, 더보기 버튼을 누르고, 삭제를 누르고, 확인 버튼을 누른 뒤, 다시 다음 대화로 이동하는 과정을 반복해야 합니다. 몇 개 정도면 괜찮지만, 수십 개가 넘어가면 귀찮음이 먼저 옵니다.

ChatGPT와 DeepSeek는 설정에서 모든 채팅을 일괄 삭제할 수 있지만, Gemini와 Copilot은 개인 계정과 Google Workspace 계정 모두 사용자가 대화를 일일이 삭제해야 합니다.

맨 처음에는 ChatGPT Atlas로 해볼까 했지만, 보안 정책 때문인지 제대로 동작하지 않았습니다. 그래서 바이브 코딩으로 Gemini, Copilot, Claude, Meta AI의 최근 대화 목록을 순차적으로 삭제하는 스크립트를 만들어보았습니다.

거창한 프로그램은 아니고, 브라우저 콘솔에서 실행하는 JavaScript 스크립트입니다.

사용 방법

각 AI 서비스에 접속한 뒤, 브라우저 개발자 도구의 콘솔에 스크립트를 붙여넣고 실행하면 됩니다. 스크립트가 현재 접속한 서비스가 Gemini, Copilot, Claude, Meta AI 중 어디인지 감지하고, 삭제할 최근 대화 개수를 입력받은 뒤 순차적으로 삭제를 진행합니다.

삭제 작업은 되돌리기 어려울 수 있기 때문에 바로 실행되지 않도록 했습니다. 먼저 삭제할 개수를 입력받고, 다시 한 번 확인창을 띄운 뒤 작업을 시작합니다. 실행 중 문제가 생기거나 멈추고 싶을 때는 콘솔에서 중지 플래그를 입력해 작업을 중단할 수도 있습니다.

핵심은 “삭제 버튼을 직접 찾아 반복 클릭하는 자동화”입니다. 공식 API를 사용하는 방식은 아니고, 사용자가 화면에서 직접 하는 삭제 과정을 스크립트가 대신 수행하는 구조입니다.

실행 코드

AI Chat History Delete Script

Gemini, Copilot, Claude, Meta AI의 대화 기록을 브라우저 콘솔에서 정리하기 위한 JavaScript 스크립트입니다.

지원 서비스

  • Gemini
  • Copilot
  • Claude
  • Meta AI

사용 방법

  1. 삭제하려는 AI 서비스의 대화 목록 페이지를 엽니다.
  2. 브라우저 개발자 도구를 엽니다.
  3. Console 탭에 스크립트를 붙여넣습니다.
  4. 처음에는 적은 개수로 테스트합니다.
  5. 정상 동작을 확인한 뒤 필요한 만큼 실행합니다.

주의사항

  • 서비스의 화면 구조가 바뀌면 동작하지 않을 수 있습니다.
  • 중요한 대화까지 삭제될 수 있으니 반드시 확인 후 사용하세요.
  • 처음에는 3~5개 정도만 테스트하는 것을 권장합니다.
  • 이 스크립트는 각 서비스의 공식 기능이 아닙니다.

관련 글

사용 방법과 주의사항은 아래 글에서 자세히 확인할 수 있습니다.

Gemini·Copilot·Claude·Meta AI 대화 기록 한 번에 삭제하기

view raw README.md hosted with ❤ by GitHub
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
(async () => {
/**
* AI Chat History Cleaner - Gemini / Copilot / Claude / Meta AI
*
* Supported:
* - Google Gemini: gemini.google.com
* - Microsoft Copilot: copilot.microsoft.com
* - Claude: claude.ai
* - Meta AI: meta.ai
*
* Stop:
* window.__aiChatHistoryCleanerStop = true;
*/
const CONFIG = {
defaultLimit: 20,
maxLimit: 500,
delayAfterMenuOpen: 850,
delayAfterDeleteClick: 1000,
delayAfterConfirmClick: 2600,
delayAfterNoConfirmDelete: 2200,
requireFinalConfirmation: true,
enableLazyPreload: true,
preloadExtraBuffer: 10,
preloadScrollDelay: 1200,
preloadMaxRounds: 90,
preloadStableLimit: 5,
lowWatermarkRows: 5,
retryLoadMoreRounds: 12,
};
window.__aiChatHistoryCleanerStop = false;
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const unique = (array) =>
array.filter((item, index, arr) => item && arr.indexOf(item) === index);
const getText = (element) => {
return (
(
element?.innerText ||
element?.textContent ||
element?.getAttribute?.("aria-label") ||
element?.getAttribute?.("title") ||
""
) + ""
)
.replace(/\s+/g, " ")
.trim();
};
const isVisible = (element) => {
if (!element) return false;
const rect = element.getBoundingClientRect();
const style = getComputedStyle(element);
return (
rect.width > 0 &&
rect.height > 0 &&
rect.bottom > 0 &&
rect.top < window.innerHeight &&
rect.right > 0 &&
rect.left < window.innerWidth &&
style.display !== "none" &&
style.visibility !== "hidden" &&
style.opacity !== "0"
);
};
const isUsableElement = (element) => {
if (!element) return false;
const style = getComputedStyle(element);
return style.display !== "none" && style.visibility !== "hidden";
};
const getClickableElement = (element) => {
if (!element) return null;
return (
element.closest?.(
[
"button",
'[role="button"]',
'[role="menuitem"]',
'[data-slot="dropdown-menu-item"]',
'[data-testid="delete-chat-trigger"]',
".mat-mdc-menu-item",
"a",
].join(", ")
) || element
);
};
const dispatchHover = (element) => {
if (!element) return;
const rect = element.getBoundingClientRect();
const options = {
bubbles: true,
cancelable: true,
composed: true,
view: window,
clientX: rect.right - 20,
clientY: rect.top + rect.height / 2,
};
[
"pointerover",
"pointerenter",
"pointermove",
"mouseover",
"mouseenter",
"mousemove",
].forEach((eventName) => {
try {
const EventClass =
eventName.startsWith("pointer") && window.PointerEvent
? PointerEvent
: MouseEvent;
element.dispatchEvent(new EventClass(eventName, options));
} catch (_) {
try {
element.dispatchEvent(new MouseEvent(eventName, options));
} catch (_) {}
}
});
};
const clickElement = async (rawElement) => {
const element = getClickableElement(rawElement);
if (!element) return false;
element.scrollIntoView({ block: "center", inline: "center" });
await sleep(150);
try {
element.focus?.({ preventScroll: true });
} catch (_) {
try {
element.focus?.();
} catch (_) {}
}
const rect = element.getBoundingClientRect();
const options = {
bubbles: true,
cancelable: true,
composed: true,
view: window,
clientX: rect.left + rect.width / 2,
clientY: rect.top + rect.height / 2,
};
const events = [
"pointerover",
"pointerenter",
"pointermove",
"mouseover",
"mouseenter",
"mousemove",
"pointerdown",
"mousedown",
"pointerup",
"mouseup",
"click",
];
for (const eventName of events) {
try {
const EventClass =
eventName.startsWith("pointer") && window.PointerEvent
? PointerEvent
: MouseEvent;
element.dispatchEvent(new EventClass(eventName, options));
} catch (_) {
try {
element.dispatchEvent(new MouseEvent(eventName, options));
} catch (_) {}
}
}
return true;
};
const dispatchScroll = (element) => {
if (!element) return;
try {
element.dispatchEvent(new Event("scroll", { bubbles: true }));
} catch (_) {}
try {
element.dispatchEvent(
new WheelEvent("wheel", {
bubbles: true,
cancelable: true,
deltaY: 1200,
})
);
} catch (_) {
try {
element.dispatchEvent(new Event("wheel", { bubbles: true }));
} catch (_) {}
}
};
const forceScrollBottom = (element) => {
if (!element) return;
try {
element.scrollTop = element.scrollHeight;
dispatchScroll(element);
} catch (_) {}
try {
element.scrollTo({
top: element.scrollHeight,
behavior: "instant",
});
dispatchScroll(element);
} catch (_) {}
};
const forceScrollTop = (element) => {
if (!element) return;
try {
element.scrollTop = 0;
dispatchScroll(element);
} catch (_) {}
try {
element.scrollTo({
top: 0,
behavior: "instant",
});
dispatchScroll(element);
} catch (_) {}
};
const findBestScrollContainer = (root) => {
const candidates = [];
let node = root;
while (node && node !== document.documentElement) {
candidates.push(node);
node = node.parentElement;
}
if (root?.querySelectorAll) {
candidates.push(...root.querySelectorAll("*"));
}
candidates.push(
document.querySelector("aside"),
document.querySelector("nav"),
document.scrollingElement,
document.documentElement,
document.body
);
const scored = unique(candidates)
.filter(Boolean)
.map((el) => {
const rect = el.getBoundingClientRect?.() || {
left: 0,
top: 0,
width: window.innerWidth,
height: window.innerHeight,
};
const style = getComputedStyle(el);
const scrollableAmount = (el.scrollHeight || 0) - (el.clientHeight || 0);
let score = 0;
if (scrollableAmount > 40) score += 100;
if (/auto|scroll/i.test(style.overflowY)) score += 45;
if (rect.left < 700) score += 35;
if (rect.width > 160 && rect.width < 750) score += 35;
if (rect.height > 250) score += 20;
if (el.matches?.("aside, nav")) score += 20;
score += Math.min(120, scrollableAmount / 20);
return {
el,
score,
scrollableAmount,
rect,
overflowY: style.overflowY,
};
})
.filter((item) => item.scrollableAmount > 40)
.sort((a, b) => b.score - a.score);
return scored[0]?.el || document.scrollingElement || document.documentElement;
};
const getMenuRoots = () => {
return [
...document.querySelectorAll('[role="menu"]'),
...document.querySelectorAll('[data-cds="Menu"]'),
...document.querySelectorAll('[data-base-ui-focusable][role="menu"]'),
...document.querySelectorAll('[data-floating-ui-focusable][role="menu"]'),
...document.querySelectorAll('[data-radix-popper-content-wrapper]'),
...document.querySelectorAll('[data-radix-menu-content]'),
...document.querySelectorAll('[data-slot*="dropdown"]'),
...document.querySelectorAll('[data-sidebar*="menu"]'),
...document.querySelectorAll(".cdk-overlay-container"),
...document.querySelectorAll("[data-testid*='menu']"),
...document.querySelectorAll("[id^='radix-']"),
...document.querySelectorAll("[id^='_r_']"),
document.body,
].filter(Boolean);
};
const findDeleteMenuItem = async (serviceName) => {
for (let attempt = 0; attempt < 20; attempt++) {
const roots = getMenuRoots();
for (const root of roots) {
const candidates = [
...root.querySelectorAll(
[
// Claude 확정 셀렉터
'[data-testid="delete-chat-trigger"]',
// Meta 확정 계열
'[data-radix-popper-content-wrapper] [role="menuitem"][data-slot="dropdown-menu-item"]',
'[data-radix-menu-content] [role="menuitem"][data-slot="dropdown-menu-item"]',
// 범용 메뉴 항목
'button[role="menuitem"]',
'[role="menuitem"]',
'[data-slot="dropdown-menu-item"]',
'[data-radix-collection-item]',
// 텍스트/속성 기반
'button[title*="대화 삭제"]',
'button[aria-label*="대화 삭제"]',
'button[title*="채팅 삭제"]',
'button[aria-label*="채팅 삭제"]',
'button[title*="삭제"]',
'button[aria-label*="삭제"]',
'button[title*="Delete"]',
'button[aria-label*="Delete"]',
'button[title*="Remove"]',
'button[aria-label*="Remove"]',
".mat-mdc-menu-item",
"button",
"div",
"span",
].join(", ")
),
].filter(isVisible);
const scored = candidates
.map((element) => {
const clickable = getClickableElement(element);
const text = getText(element);
const clickableText = getText(clickable);
const title =
element.getAttribute?.("title") ||
clickable?.getAttribute?.("title") ||
"";
const aria =
element.getAttribute?.("aria-label") ||
clickable?.getAttribute?.("aria-label") ||
"";
const testId =
element.getAttribute?.("data-testid") ||
clickable?.getAttribute?.("data-testid") ||
"";
const slot =
element.getAttribute?.("data-slot") ||
clickable?.getAttribute?.("data-slot") ||
"";
const className =
element.getAttribute?.("class") ||
clickable?.getAttribute?.("class") ||
"";
const combined = `${text} ${clickableText} ${title} ${aria} ${testId} ${slot} ${className}`
.replace(/\s+/g, " ")
.trim();
let score = 0;
// Claude 확정
if (/delete-chat-trigger/i.test(testId)) {
score += 280;
}
// Meta 확정: Radix dropdown menu item + destructive class + 삭제
if (
serviceName === "Meta AI" &&
/dropdown-menu-item/i.test(slot) &&
/text-text-destructive/i.test(className) &&
/삭제/.test(combined)
) {
score += 300;
}
if (
serviceName === "Meta AI" &&
element.closest?.("[data-radix-popper-content-wrapper]") &&
/text-text-destructive/i.test(className) &&
/삭제/.test(combined)
) {
score += 300;
}
// 한국어 삭제 문구
if (/대화 삭제|채팅 삭제|삭제.*대화|삭제.*채팅/i.test(combined)) {
score += 160;
}
// 영어 삭제 문구
if (
/Delete conversation|Delete chat|Delete prompt|Remove conversation|Remove chat/i.test(
combined
)
) {
score += 160;
}
// 단독 삭제 텍스트
if (/^삭제$|^삭제하기$|^Delete$|^Remove$/i.test(text)) {
score += 130;
}
if (/^삭제$|^삭제하기$|^Delete$|^Remove$/i.test(clickableText)) {
score += 130;
}
if (/delete|trash|remove/i.test(combined)) {
score += 70;
}
// 위험/파괴 클래스 가산점
if (/danger|destructive|red|text-text-destructive|text-danger|group-menu-danger/i.test(className)) {
score += 80;
}
// 역할/태그 가산점
if (clickable?.matches?.('button[role="menuitem"]')) score += 50;
if (clickable?.matches?.('[role="menuitem"]')) score += 45;
if (clickable?.matches?.('[data-slot="dropdown-menu-item"]')) score += 45;
if (clickable?.matches?.(".mat-mdc-menu-item")) score += 35;
if (clickable?.tagName?.toLowerCase() === "button") score += 25;
// 삭제가 아닌 항목 감점
if (
/즐겨찾기|고정|Pin|Star|이름 변경|이름 바꾸기|Rename|초대|Invite|공유|Share|복사|Copy|요약|Summary|프로젝트|Project|보고|Report|Archive|보관|Export|내보내기|Move|이동|추가|Add/i.test(
combined
)
) {
score -= 220;
}
return {
rawElement: element,
element: clickable,
score,
text,
clickableText,
title,
aria,
testId,
slot,
className,
combined,
};
})
.filter((item) => item.element && item.score >= 110)
.sort((a, b) => b.score - a.score);
if (scored.length > 0) {
const picked = scored[0];
console.log("[AI Chat Cleaner] 삭제 메뉴 감지:", {
service: serviceName,
text: picked.text,
clickableText: picked.clickableText,
title: picked.title,
aria: picked.aria,
testId: picked.testId,
slot: picked.slot,
score: picked.score,
});
return picked.element;
}
}
await sleep(200);
}
return null;
};
const findConfirmDeleteButton = async (serviceName) => {
for (let attempt = 0; attempt < 24; attempt++) {
const roots = [
...document.querySelectorAll('[role="dialog"]'),
...document.querySelectorAll('[role="alertdialog"]'),
...document.querySelectorAll("mat-dialog-container"),
...document.querySelectorAll('[data-testid*="dialog"]'),
...document.querySelectorAll('[data-slot="dialog-content"]'),
...document.querySelectorAll('[data-floating-ui-focusable]'),
...document.querySelectorAll('[data-radix-popper-content-wrapper]'),
...document.querySelectorAll('[data-radix-dialog-content]'),
...document.querySelectorAll(".cdk-overlay-container"),
document.body,
].filter(Boolean);
for (const root of roots) {
const rootText = getText(root);
const buttons = [
...root.querySelectorAll('button, [role="button"], [data-slot="button"]'),
].filter(isVisible);
const scored = buttons
.map((button) => {
const text = getText(button);
const title = button.getAttribute?.("title") || "";
const aria = button.getAttribute?.("aria-label") || "";
const className = button.getAttribute?.("class") || "";
const combined = `${text} ${title} ${aria} ${rootText} ${className}`
.replace(/\s+/g, " ")
.trim();
let score = 0;
// Claude 확인창: "대화 삭제" + "삭제"
if (/대화 삭제/i.test(rootText) && /^삭제$/i.test(text)) {
score += 280;
}
// Meta 확인창: "채팅을 삭제할까요?" + "삭제"
if (/채팅을 삭제할까요/i.test(rootText) && /^삭제$/i.test(text)) {
score += 280;
}
// 범용 확인창
if (/^삭제$|^삭제하기$|^Delete$|^Remove$/i.test(text)) score += 150;
if (/대화 삭제|채팅 삭제|삭제.*대화|삭제.*채팅/i.test(combined)) score += 120;
if (
/Delete conversation|Delete chat|Delete prompt|Remove conversation|Remove chat/i.test(
combined
)
) {
score += 120;
}
if (/확인|Confirm|OK/i.test(text)) score += 25;
// 위험 버튼 클래스 가산점
if (
/danger|red|accent|destructive|text-on-danger|text-text-on-accent|gradient-red|from-gradient-red/i.test(
className
)
) {
score += 60;
}
// 취소/닫기 감점
if (/취소|Cancel|닫기|Close/i.test(text)) score -= 450;
if (/닫기/i.test(aria)) score -= 450;
return {
button,
score,
text,
title,
aria,
combined,
};
})
.filter((item) => item.score >= 120)
.sort((a, b) => b.score - a.score);
if (scored.length > 0) {
const picked = scored[0];
console.log("[AI Chat Cleaner] 삭제 확인 버튼 감지:", {
service: serviceName,
text: picked.text,
title: picked.title,
aria: picked.aria,
score: picked.score,
});
return picked.button;
}
}
await sleep(200);
}
return null;
};
const waitForRowCountChange = async (
cleaner,
beforeCount,
targetKey,
timeoutMs = 5000
) => {
const start = Date.now();
while (Date.now() - start < timeoutMs) {
const rows = cleaner.getRows();
const currentCount = rows.length;
const stillExists = targetKey
? rows.some((row) => cleaner.getKey(row) === targetKey)
: false;
if (currentCount < beforeCount || !stillExists) {
return true;
}
await sleep(250);
}
return false;
};
const preloadRowsForCleaner = async (cleaner, targetCount) => {
if (!CONFIG.enableLazyPreload) return;
if (!cleaner.supportsLazyLoad) return;
const desiredCount = Math.min(
targetCount + CONFIG.preloadExtraBuffer,
CONFIG.maxLimit + CONFIG.preloadExtraBuffer
);
const scroller = cleaner.getScrollContainer?.();
if (!scroller) {
console.warn(`[AI Chat Cleaner] ${cleaner.name} 스크롤 컨테이너를 찾지 못했습니다.`);
return;
}
let previousCount = cleaner.getRows().length;
let stableRounds = 0;
console.log(`[AI Chat Cleaner] ${cleaner.name} 대화 목록 사전 로딩 시작:`, {
현재로드수: previousCount,
목표로드수: desiredCount,
scrollHeight: scroller.scrollHeight,
clientHeight: scroller.clientHeight,
});
for (let round = 1; round <= CONFIG.preloadMaxRounds; round++) {
if (window.__aiChatHistoryCleanerStop) {
console.warn("[AI Chat Cleaner] 중지 요청으로 사전 로딩을 멈췄습니다.");
break;
}
const currentCount = cleaner.getRows().length;
if (currentCount >= desiredCount) {
console.log(`[AI Chat Cleaner] ${cleaner.name} 사전 로딩 목표 도달:`, {
로드수: currentCount,
목표: desiredCount,
});
break;
}
forceScrollBottom(scroller);
await sleep(CONFIG.preloadScrollDelay);
const newCount = cleaner.getRows().length;
console.log(`[AI Chat Cleaner] ${cleaner.name} 사전 로딩 진행:`, {
round,
이전로드수: currentCount,
현재로드수: newCount,
목표로드수: desiredCount,
});
if (newCount <= previousCount) {
stableRounds += 1;
} else {
stableRounds = 0;
previousCount = newCount;
}
if (stableRounds >= CONFIG.preloadStableLimit) {
console.log(
`[AI Chat Cleaner] ${cleaner.name} 추가 로드 증가가 멈춰 사전 로딩을 종료합니다.`,
{
로드수: newCount,
stableRounds,
}
);
break;
}
}
forceScrollTop(scroller);
await sleep(700);
console.log(`[AI Chat Cleaner] ${cleaner.name} 대화 목록 사전 로딩 종료:`, {
최종로드수: cleaner.getRows().length,
});
};
const loadMoreIfNeeded = async (cleaner, remainingTarget) => {
if (!cleaner.supportsLazyLoad) return;
const rows = cleaner.getRows();
if (rows.length > CONFIG.lowWatermarkRows) return;
const scroller = cleaner.getScrollContainer?.();
if (!scroller) {
console.warn(`[AI Chat Cleaner] ${cleaner.name} 스크롤 컨테이너를 찾지 못했습니다.`);
return;
}
let previousCount = rows.length;
let stableRounds = 0;
console.log(`[AI Chat Cleaner] ${cleaner.name} 로드된 대화가 부족해 추가 로딩을 시도합니다.`, {
현재로드수: previousCount,
남은삭제목표: remainingTarget,
});
for (let round = 1; round <= CONFIG.retryLoadMoreRounds; round++) {
if (window.__aiChatHistoryCleanerStop) break;
forceScrollBottom(scroller);
await sleep(CONFIG.preloadScrollDelay);
const newCount = cleaner.getRows().length;
console.log(`[AI Chat Cleaner] ${cleaner.name} 추가 로딩 진행:`, {
round,
이전로드수: previousCount,
현재로드수: newCount,
});
if (newCount > CONFIG.lowWatermarkRows) break;
if (newCount <= previousCount) {
stableRounds += 1;
} else {
stableRounds = 0;
previousCount = newCount;
}
if (stableRounds >= 3) break;
}
forceScrollTop(scroller);
await sleep(500);
};
const GeminiCleaner = {
name: "Google Gemini",
supportsLazyLoad: true,
detect() {
return (
location.hostname.includes("gemini.google.com") ||
!!document.querySelector('[data-test-id="all-conversations"]') ||
!!document.querySelector(
'[data-test-id="conversation"] [data-test-id="actions-menu-button"]'
)
);
},
getRoot() {
return (
document.querySelector('[data-test-id="all-conversations"]') ||
document.querySelector("#sidenav-section-content-chats") ||
document.querySelector(".chat-history-list") ||
document.querySelector(".chat-history") ||
document.body
);
},
getScrollContainer() {
return findBestScrollContainer(this.getRoot());
},
forceShowActionButtons() {
if (!document.getElementById("__ai_cleaner_gemini_css")) {
const style = document.createElement("style");
style.id = "__ai_cleaner_gemini_css";
style.textContent = `
[data-test-id="conversation"] .hovered-trailing-content,
[data-test-id="conversation"] [data-test-id="actions-menu-button"],
[data-test-id="conversation"] [data-test-id="actions-menu-button"] button {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
[data-test-id="conversation"] .trailing-content {
opacity: 0 !important;
pointer-events: none !important;
}
`;
document.head.appendChild(style);
}
},
getRows() {
const root = this.getRoot();
return [...root.querySelectorAll('[data-test-id="conversation"]')]
.filter(isUsableElement)
.filter((row) => row.querySelector('a[href^="/app/"]'))
.sort(
(a, b) =>
a.getBoundingClientRect().top - b.getBoundingClientRect().top
);
},
getTitle(row) {
const titleElement = row.querySelector(".title-text");
const linkElement = row.querySelector("a[aria-label]");
return (
getText(titleElement) ||
linkElement?.getAttribute("aria-label") ||
getText(row) ||
"(제목 없음)"
);
},
getKey(row) {
const linkElement = row.querySelector('a[href^="/app/"]');
return linkElement?.getAttribute("href") || this.getTitle(row);
},
async getMoreButton(row) {
this.forceShowActionButtons();
row.scrollIntoView({ block: "center" });
dispatchHover(row);
await sleep(300);
return (
row.querySelector('[data-test-id="actions-menu-button"] button') ||
row.querySelector('[data-test-id="actions-menu-button"]') ||
row.querySelector('button[aria-label*="더보기"]') ||
row.querySelector('button[aria-label*="옵션"]') ||
row.querySelector('mat-icon[fonticon="more_vert"]')?.closest("button") ||
null
);
},
};
const CopilotCleaner = {
name: "Microsoft Copilot",
supportsLazyLoad: true,
detect() {
return (
location.hostname.includes("copilot.microsoft.com") ||
!!document.querySelector('[data-testid="sidebar-expanded-content"]') ||
!!document.querySelector('button[id^="conversation-options-"]')
);
},
getRoot() {
return (
document.querySelector('[data-testid="sidebar-expanded-content"]') ||
document.querySelector('[role="list"]') ||
document.body
);
},
getScrollContainer() {
return findBestScrollContainer(this.getRoot());
},
forceShowActionButtons() {
if (!document.getElementById("__ai_cleaner_copilot_css")) {
const style = document.createElement("style");
style.id = "__ai_cleaner_copilot_css";
style.textContent = `
button[id^="conversation-options-"] {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: static !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
clip: auto !important;
clip-path: none !important;
overflow: visible !important;
transform: none !important;
}
span:has(> button[id^="conversation-options-"]) {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: static !important;
width: auto !important;
height: auto !important;
clip: auto !important;
clip-path: none !important;
overflow: visible !important;
}
`;
document.head.appendChild(style);
}
document.querySelectorAll('button[id^="conversation-options-"]').forEach((button) => {
const parent = button.parentElement;
button.style.setProperty("display", "flex", "important");
button.style.setProperty("visibility", "visible", "important");
button.style.setProperty("opacity", "1", "important");
button.style.setProperty("pointer-events", "auto", "important");
button.style.setProperty("position", "static", "important");
button.style.setProperty("width", "24px", "important");
button.style.setProperty("height", "24px", "important");
button.style.setProperty("clip", "auto", "important");
button.style.setProperty("clip-path", "none", "important");
button.style.setProperty("overflow", "visible", "important");
if (parent) {
parent.classList.remove("sr-only");
parent.style.setProperty("display", "inline-flex", "important");
parent.style.setProperty("visibility", "visible", "important");
parent.style.setProperty("opacity", "1", "important");
parent.style.setProperty("pointer-events", "auto", "important");
parent.style.setProperty("position", "static", "important");
parent.style.setProperty("width", "auto", "important");
parent.style.setProperty("height", "auto", "important");
parent.style.setProperty("clip", "auto", "important");
parent.style.setProperty("clip-path", "none", "important");
parent.style.setProperty("overflow", "visible", "important");
}
});
},
getRows() {
this.forceShowActionButtons();
const root = this.getRoot();
return [...root.querySelectorAll('[role="link"][aria-label]')]
.filter(isUsableElement)
.filter((row) => row.querySelector('button[id^="conversation-options-"]'))
.filter((row) => {
const title = this.getTitle(row);
return !/새 대화|New chat|New conversation/i.test(title);
})
.sort(
(a, b) =>
a.getBoundingClientRect().top - b.getBoundingClientRect().top
);
},
getTitle(row) {
const titleElement = row.querySelector("p[title]");
return (
titleElement?.getAttribute("title") ||
row.getAttribute("aria-label") ||
getText(row) ||
"(제목 없음)"
);
},
getKey(row) {
const button = row.querySelector('button[id^="conversation-options-"]');
return button?.id || this.getTitle(row);
},
async getMoreButton(row) {
this.forceShowActionButtons();
row.scrollIntoView({ block: "center" });
dispatchHover(row);
await sleep(300);
return (
row.querySelector('button[id^="conversation-options-"]') ||
row.querySelector('button[aria-label*="보기 옵션"]') ||
row.querySelector('button[title*="보기 옵션"]') ||
row.querySelector('button[aria-label*="options" i]') ||
row.querySelector('button[title*="options" i]') ||
null
);
},
};
const ClaudeCleaner = {
name: "Claude",
supportsLazyLoad: true,
detect() {
return (
location.hostname.includes("claude.ai") ||
!!document.querySelector('a[data-dd-action-name="sidebar-chat-item"][href^="/chat/"]') ||
!!document.querySelector('button[aria-label*="더 많은 옵션"]')
);
},
getRoot() {
const firstChatLink = document.querySelector(
'a[data-dd-action-name="sidebar-chat-item"][href^="/chat/"]'
);
return (
firstChatLink?.closest("ul") ||
firstChatLink?.closest("nav") ||
firstChatLink?.closest("aside") ||
document.querySelector("nav") ||
document.querySelector("aside") ||
document.body
);
},
getScrollContainer() {
return findBestScrollContainer(this.getRoot());
},
forceShowActionButtons() {
if (!document.getElementById("__ai_cleaner_claude_css")) {
const style = document.createElement("style");
style.id = "__ai_cleaner_claude_css";
style.textContent = `
a[data-dd-action-name="sidebar-chat-item"][href^="/chat/"] ~ div button[aria-haspopup="menu"],
a[data-dd-action-name="sidebar-chat-item"][href^="/chat/"] + div button[aria-haspopup="menu"],
button[aria-label*="더 많은 옵션"],
button[aria-label*="more options" i],
button[aria-label*="options" i] {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
div:has(> button[aria-label*="더 많은 옵션"]),
div:has(> button[aria-label*="more options" i]),
div:has(> button[aria-label*="options" i]) {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
`;
document.head.appendChild(style);
}
document
.querySelectorAll(
'button[aria-label*="더 많은 옵션"], button[aria-label*="more options" i], button[aria-label*="options" i]'
)
.forEach((button) => {
const parent = button.parentElement;
button.style.setProperty("display", "inline-flex", "important");
button.style.setProperty("visibility", "visible", "important");
button.style.setProperty("opacity", "1", "important");
button.style.setProperty("pointer-events", "auto", "important");
if (parent) {
parent.style.setProperty("display", "flex", "important");
parent.style.setProperty("visibility", "visible", "important");
parent.style.setProperty("opacity", "1", "important");
parent.style.setProperty("pointer-events", "auto", "important");
}
});
},
getRows() {
this.forceShowActionButtons();
const root = this.getRoot();
return [...root.querySelectorAll('a[data-dd-action-name="sidebar-chat-item"][href^="/chat/"]')]
.map((link) => link.closest("li") || link.closest("div.relative.group") || link.parentElement)
.filter(Boolean)
.filter((row, index, arr) => arr.indexOf(row) === index)
.filter(isUsableElement)
.sort(
(a, b) =>
a.getBoundingClientRect().top - b.getBoundingClientRect().top
);
},
getTitle(row) {
const link = row.querySelector('a[data-dd-action-name="sidebar-chat-item"][href^="/chat/"]');
const srOnlyTitle = row.querySelector("[data-find-omitted]");
const visibleTitle = row.querySelector('span[aria-hidden="true"], span.truncate, .truncate');
return (
getText(srOnlyTitle) ||
getText(visibleTitle) ||
getText(link) ||
link?.getAttribute("href") ||
"(제목 없음)"
);
},
getKey(row) {
const link = row.querySelector('a[data-dd-action-name="sidebar-chat-item"][href^="/chat/"]');
return link?.getAttribute("href") || this.getTitle(row);
},
async getMoreButton(row) {
this.forceShowActionButtons();
row.scrollIntoView({ block: "center" });
dispatchHover(row);
await sleep(350);
return (
row.querySelector('button[aria-label*="더 많은 옵션"]') ||
row.querySelector('button[aria-label*="more options" i]') ||
row.querySelector('button[aria-label*="options" i]') ||
row.querySelector('button[aria-haspopup="menu"]') ||
null
);
},
};
const MetaCleaner = {
name: "Meta AI",
supportsLazyLoad: true,
detect() {
return (
location.hostname.includes("meta.ai") ||
!!document.querySelector('[data-testid="conversation-item"] a[href^="/prompt/"]') ||
!!document.querySelector('[data-sidebar="menu-action"][aria-label*="옵션"]')
);
},
getRoot() {
const firstConversation = document.querySelector('[data-testid="conversation-item"]');
return (
firstConversation?.closest('[data-sidebar="menu"]') ||
firstConversation?.closest("ul") ||
firstConversation?.closest("nav") ||
firstConversation?.closest("aside") ||
document.querySelector('[data-sidebar="sidebar"]') ||
document.querySelector("nav") ||
document.querySelector("aside") ||
document.body
);
},
getScrollContainer() {
return findBestScrollContainer(this.getRoot());
},
forceShowActionButtons() {
if (!document.getElementById("__ai_cleaner_meta_css")) {
const style = document.createElement("style");
style.id = "__ai_cleaner_meta_css";
style.textContent = `
[data-testid="conversation-item"] [data-sidebar="menu-action"],
[data-testid="conversation-item"] [data-slot="dropdown-menu-trigger"],
[data-testid="conversation-item"] button[aria-label*="옵션"],
[data-testid="conversation-item"] button[aria-label*="options" i] {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
[data-testid="conversation-item"] .contents,
[data-testid="conversation-item"] div:has(> [data-sidebar="menu-action"]) {
display: contents !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
`;
document.head.appendChild(style);
}
document
.querySelectorAll(
'[data-testid="conversation-item"] [data-sidebar="menu-action"], [data-testid="conversation-item"] [data-slot="dropdown-menu-trigger"], [data-testid="conversation-item"] button[aria-label*="옵션"], [data-testid="conversation-item"] button[aria-label*="options" i]'
)
.forEach((button) => {
button.style.setProperty("display", "inline-flex", "important");
button.style.setProperty("visibility", "visible", "important");
button.style.setProperty("opacity", "1", "important");
button.style.setProperty("pointer-events", "auto", "important");
});
},
getRows() {
this.forceShowActionButtons();
const root = this.getRoot();
return [...root.querySelectorAll('[data-testid="conversation-item"]')]
.filter(isUsableElement)
.filter((row) => row.querySelector('a[href^="/prompt/"]'))
.sort(
(a, b) =>
a.getBoundingClientRect().top - b.getBoundingClientRect().top
);
},
getTitle(row) {
const link = row.querySelector('a[href^="/prompt/"]');
const titleElement =
row.querySelector('[data-sidebar="menu-button"] .truncate') ||
row.querySelector('a[href^="/prompt/"] span.truncate') ||
row.querySelector(".truncate");
return (
getText(titleElement) ||
getText(link) ||
link?.getAttribute("href") ||
"(제목 없음)"
);
},
getKey(row) {
const link = row.querySelector('a[href^="/prompt/"]');
return link?.getAttribute("href") || this.getTitle(row);
},
async getMoreButton(row) {
this.forceShowActionButtons();
row.scrollIntoView({ block: "center" });
dispatchHover(row);
await sleep(350);
return (
row.querySelector('[data-sidebar="menu-action"]') ||
row.querySelector('[data-slot="dropdown-menu-trigger"]') ||
row.querySelector('button[aria-label*="옵션"]') ||
row.querySelector('button[aria-label*="options" i]') ||
row.querySelector('button[aria-haspopup="menu"]') ||
null
);
},
};
const cleaners = [
GeminiCleaner,
CopilotCleaner,
ClaudeCleaner,
MetaCleaner,
];
const activeCleaner = cleaners.find((cleaner) => cleaner.detect());
if (!activeCleaner) {
alert(
"지원되는 AI 채팅 서비스 페이지를 감지하지 못했습니다.\n\n" +
`현재 도메인: ${location.hostname}\n\n` +
"지원: Google Gemini, Microsoft Copilot, Claude, Meta AI"
);
return;
}
const askDeleteLimit = () => {
const input = prompt(
`[${activeCleaner.name}] 삭제할 최근 대화 개수를 입력하세요. 최대 ${CONFIG.maxLimit}개까지 실행됩니다.`,
String(CONFIG.defaultLimit)
);
const parsed = parseInt(input || "0", 10);
if (!Number.isFinite(parsed) || parsed <= 0) {
return 0;
}
return Math.min(parsed, CONFIG.maxLimit);
};
const limit = askDeleteLimit();
if (!limit) {
console.log("[AI Chat Cleaner] 실행이 취소되었습니다.");
return;
}
if (CONFIG.requireFinalConfirmation) {
const confirmed = confirm(
`[${activeCleaner.name}] 최근 대화 ${limit}개를 순차적으로 삭제합니다.\n\n` +
"이 작업은 되돌리기 어려울 수 있습니다.\n" +
"계속 진행하시겠습니까?"
);
if (!confirmed) {
console.log("[AI Chat Cleaner] 사용자가 실행을 취소했습니다.");
return;
}
}
activeCleaner.forceShowActionButtons();
console.log(`[AI Chat Cleaner] 감지된 서비스: ${activeCleaner.name}`);
if (activeCleaner.supportsLazyLoad) {
await preloadRowsForCleaner(activeCleaner, limit);
}
let deletedCount = 0;
const deletedKeys = new Set();
for (let index = 0; index < limit; index++) {
if (window.__aiChatHistoryCleanerStop) {
console.warn("[AI Chat Cleaner] 중지 요청으로 작업을 멈췄습니다.");
break;
}
activeCleaner.forceShowActionButtons();
await loadMoreIfNeeded(activeCleaner, limit - deletedCount);
let rowsBefore = activeCleaner
.getRows()
.filter((row) => !deletedKeys.has(activeCleaner.getKey(row)));
if (rowsBefore.length === 0 && activeCleaner.supportsLazyLoad) {
console.warn(
`[AI Chat Cleaner] 로드된 대화가 없어 ${activeCleaner.name} 추가 로딩을 한 번 더 시도합니다.`
);
await preloadRowsForCleaner(activeCleaner, limit - deletedCount);
rowsBefore = activeCleaner
.getRows()
.filter((row) => !deletedKeys.has(activeCleaner.getKey(row)));
}
const beforeCount = rowsBefore.length;
if (rowsBefore.length === 0) {
console.warn("[AI Chat Cleaner] 삭제 가능한 대화 행을 찾지 못했습니다.");
break;
}
const targetRow = rowsBefore[0];
const targetTitle = activeCleaner.getTitle(targetRow);
const targetKey = activeCleaner.getKey(targetRow);
console.log(
`[AI Chat Cleaner] ${deletedCount + 1}/${limit} 삭제 대상: ${targetTitle}`
);
const moreButton = await activeCleaner.getMoreButton(targetRow);
if (!moreButton) {
console.warn(
`[AI Chat Cleaner] 옵션 버튼을 찾지 못했습니다: ${targetTitle}`
);
break;
}
await clickElement(moreButton);
await sleep(CONFIG.delayAfterMenuOpen);
const deleteMenuItem = await findDeleteMenuItem(activeCleaner.name);
if (!deleteMenuItem) {
console.warn(
`[AI Chat Cleaner] 삭제 메뉴를 찾지 못했습니다: ${targetTitle}`
);
const visibleMenuItems = [
...document.querySelectorAll(
[
'[role="menu"] button',
'[role="menu"] [role="menuitem"]',
'[data-cds="Menu"] [role="menuitem"]',
'[data-radix-popper-content-wrapper] button',
'[data-radix-popper-content-wrapper] [role="menuitem"]',
'[data-radix-popper-content-wrapper] [data-slot="dropdown-menu-item"]',
'[data-radix-menu-content] [data-slot="dropdown-menu-item"]',
'[data-slot*="dropdown"] button',
'[data-slot*="dropdown"] [role="menuitem"]',
'[data-testid="delete-chat-trigger"]',
].join(", ")
),
]
.filter(isVisible)
.map((el) => ({
text: getText(el),
title: el.getAttribute?.("title"),
aria: el.getAttribute?.("aria-label"),
testId: el.getAttribute?.("data-testid"),
slot: el.getAttribute?.("data-slot"),
className: el.getAttribute?.("class"),
}));
console.table(visibleMenuItems);
break;
}
await clickElement(deleteMenuItem);
await sleep(CONFIG.delayAfterDeleteClick);
const confirmButton = await findConfirmDeleteButton(activeCleaner.name);
if (confirmButton) {
await clickElement(confirmButton);
await sleep(CONFIG.delayAfterConfirmClick);
deletedCount += 1;
deletedKeys.add(targetKey);
console.log(`[AI Chat Cleaner] 삭제 완료: ${deletedCount}개`);
continue;
}
const changed = await waitForRowCountChange(
activeCleaner,
beforeCount,
targetKey,
CONFIG.delayAfterNoConfirmDelete + 3000
);
if (changed) {
deletedCount += 1;
deletedKeys.add(targetKey);
console.log(`[AI Chat Cleaner] 삭제 완료: ${deletedCount}개`);
await sleep(CONFIG.delayAfterNoConfirmDelete);
continue;
}
console.warn(
`[AI Chat Cleaner] 삭제 확인 버튼을 찾지 못했고, 목록 변화도 확인되지 않았습니다: ${targetTitle}`
);
break;
}
alert(`[${activeCleaner.name}] 최근 대화 삭제 작업 완료: ${deletedCount}개`);
})();
view raw ai-chat-history-delete-script.js hosted with ❤ by GitHub

이 스크립트는 각 서비스의 현재 화면 구조를 기준으로 동작합니다. 따라서 Gemini, Copilot, Claude, Meta AI의 UI나 버튼 구조가 바뀌면 정상적으로 동작하지 않을 수 있습니다.

처음 사용할 때는 많은 개수를 한 번에 실행하기보다, 3개에서 5개 정도로 먼저 테스트해보는 것을 권장합니다.

또한 삭제 대상에는 중요하다고 생각하는 대화까지 포함될 수 있습니다. 실행 전 대화 목록을 한 번 확인하고, 필요한 기록이 있다면 별도로 저장한 뒤 사용하는 것이 좋습니다.

]]><![CDATA[GSAP ScrollTrigger ]]>https://lab.dongri.me/p/gsap-scrolltriggerhttps://lab.dongri.me/p/gsap-scrolltriggerWed, 01 Jan 2025 15:25:55 GMT

웹에서 흔히 사용되는 인기 있는 인터랙션을 꼽자면, 단연 스크롤 애니메이션일 것입니다.

과거에는 jQuery 플러그인을 사용하여 간단히 추가하고 약간의 수정을 통해 원하는 기능을 구현하곤 했습니다. 하지만 이제는 jQuery 사용을 지양하는 추세라 활용하기가 쉽지 않습니다. 스크롤할 때 콘텐츠가 sticky 상태로 변하거나 특정 위치에서 애니메이션 효과를 주기 위해 과거에는 Skrollr나 ScrollMagic 같은 JavaScript 라이브러리를 주로 사용했습니다. 하지만 최근에는 GSAP(GreenSock Animation Platform)가 대세인 듯합니다.

GSAP로 전환된 지도 꽤 오래된 것 같은데, 어렵게 느껴져서 엄두를 내지 못하다가 이번에 마음을 다잡고 GSAP의 ScrollTrigger를 활용해 가로 스크롤 애니메이션을 구현해보았습니다.

사실 처음에는 국내에서 이를 구현한 사례나 코드 예제를 참고하려 했지만, 이해하기 쉽지 않았습니다. WAAPI 스크롤 기반 애니메이션을 사용한다면 CSS만으로 더 쉽게 구현이 가능하겠지만 아직 모든 브라우저에서 지원하지 않기 때문에 제가 이해할 수 있는 방식으로 정리하고 기록해보았습니다.

GSAP(+ScrollTrigger) 세팅하기

라이브러리 세팅은 GSAP 공식 가이드 내의 Installation을 통해 확인할 수 있습니다.
저는 정적인 페이지로 테스트 할거라 CDN 스크립트 태그를 삽입했습니다.

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/ScrollTrigger.min.js"></script>

마크업 구조

전체를 감싸는 wrap안에 각 section이 세개가 들어가고, 두 번째 섹션에서 가로 스크롤을 구현하고자 합니다.

<div class="wrap">
  <div class="section intro">
    Section 01
  </div>
  <div class="section xScroll">
    <p>Section 02</p>
    <img src="https://dummyimage.com/800x400/000/fff">
    <img src="https://dummyimage.com/800x400/000/fff">
    <img src="https://dummyimage.com/800x400/000/fff">
    <img src="https://dummyimage.com/800x400/000/fff">
    <img src="https://dummyimage.com/800x400/000/fff">
  </div>
  <div class="section end">
    Section 03<br>DONE!
  </div>
</div>

CSS 세팅

.wrap {
  overflow-x: hidden; // 가로 스크롤 제거
}

.section {
  min-width: 100vw; // 뷰포트 최대 너비 지정
  min-height: 100vh; // 뷰포트 최대 높이 지정

  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}

보통 가로 스크롤을 적용하는 페이지는 뷰포트에 꽉 차는 영역에 고정되고, 그 안에서 가로 콘텐츠가 스크롤되도록 구현합니다. 이를 위해 각 섹션의 최소 너비와 높이를 각각 100vw와 100vh로 설정하였습니다.

또한, 두 번째 섹션의 가로로 나열된 콘텐츠로 인해 페이지 전체에 가로 스크롤이 생기는 것을 방지하기 위해, div.section을 감싸고 있는 div.wrap의 가로 스크롤을 제거하였습니다.

div.wrap에 overflow-x: hidden을 주지 않으면, 가로 스크롤이 생깁니다.

두 번째 섹션은 콘텐츠가 가로로 스크롤 되도록 구현해야 하기 때문에, 섹션의 width를 콘텐츠 너비와 동일하게 설정하였습니다. 또한, 섹션 간의 구분을 명확히 하고, 콘텐츠를 보기 좋게 하기 위해 기본적인 스타일을 지정하며 CSS 세팅을 마무리하였습니다.

body {
  margin: 0;
  padding: 0;
}

.wrap {
  overflow-x: hidden;
}

.section {
  display: flex;
  align-items: center;

  text-align: center;
  min-width: 100vw;
  min-height: 100vh;

  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}

/* 첫번째 섹션 */
.intro {
  justify-content: center;
  background: #f2f2f2;
}


/* 두번째 섹션 (가로 스크롤) */
.xScroll {
  gap: 200px;
  background: #ddd;
  width: max-content;
}

.xScroll p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 800px;
  height: 400px;
  background: #fff;
  margin-left: calc((100vw - 800px)/2);
}

.xScroll img:last-child {
  margin-right: calc((100vw - 800px)/2);
}

.xScroll img {
  width: 800px;
  height: 400px;
}

/* 세번째 섹션 */
.end {
  justify-content: center;
  background: #000;
  color: #fff;
}

CSS 적용 시 아래와 같이 나타납니다.

GSAP ScrollTrigger을 통한 가로 스크롤 적용하기

CDN 스크립트를 삽입하고 기본적인 HTML 및 CSS 마크업 작업을 마쳤다면, 이제 GSAP ScrollTrigger를 사용해 본격적으로 가로 스크롤을 구현해봅니다.

먼저 ScrollTrigger를 등록(선언) 해줍니다. 이후 ScrollTrigger 외에 GSAP의 다양한 플러그인을 사용할 경우에도 동일하게 gsap.registerPlugin() 안에 사용하려는 플러그인을 넣으면 됩니다. 여러 개를 등록할 때는 콤마(,)로 구분합니다.

  gsap.registerPlugin(ScrollTrigger);

GSAP ScrollTrigger를 사용한 가로 스크롤은 실제 브라우저의 기본 가로 스크롤이 아닌, 세로 스크롤 영역을 확장하고, transformX를 사용해 콘텐츠의 가로 위치를 조정하는 방식으로 구현됩니다. 이를 위해 먼저, 가로 콘텐츠를 감싸고 있는 두 번째 섹션(.xScroll)의 가로 콘텐츠 길이를 구해야 합니다.

가로 콘텐츠 길이는 콘텐츠의 전체 길이에서 현재 뷰포트의 너비(브라우저 창 너비)를 빼서 계산할 수 있습니다. 이는 가로 콘텐츠가 뷰포트를 넘어서는 부분의 길이를 구하기 위함입니다.

// 가로 스크롤이 적용될 두 번째 섹션(.xScroll) 지정
const xScroll = document.querySelector(".xScroll");

// 콘텐츠 전체 길이(scrollWidth)에서 현재 뷰포트의 너비(window.innerWidth)를 뺀 값을 통해 가로 스크롤 시 이동해야 할 전체 길이 계산
const xScrollWidth = xScroll.scrollWidth - window.innerWidth;

이어서 GSAP와 ScrollTrigger 설정을 합니다.

gsap.to(xScroll, {
  x: -xScrollWidth, // 콘텐츠가 가로로 이동(스크롤)되게끔 음수로 설정
  ease: "none", // 애니메이션에 가속도 효과를 사용하지 않음
  scrollTrigger: {
    trigger: xScroll, // 트리거 요소 지정
    start: "top top", // xScroll의 상단과 브라우저 상단이 맞닿을 때 애니메이션 시작
    end: `+=${xScrollWidth}`, // xScroll의 콘텐츠 너비만큼 스크롤 후 애니메이션 종료
    scrub: true, // 스크롤 진행에 따라 애니메이션이 동기화되어 진행
    pin: true, // 스크롤 중에 요소를 고정하여 애니메이션을 실행
    anticipatePin: 1, // 스크롤 트리거 요소의 위치를 예측하여 스크롤 시 튀는 효과 방지
    markers: false, // 디버그용 마커 표시
  }
});

두 번째 섹션인 xScroll을 왼쪽으로 이동(가로 스크롤)시키기 위해, gsap.to()를 사용하여 xScroll을 지정하고 x 값을 음수로 설정합니다. (양수일 경우 우측으로 이동합니다.)

그 후, ScrollTrigger 플러그인을 설정합니다. xScroll 영역에 진입하면 가로 스크롤이 되어야 하므로, xScroll을 트리거로 지정합니다.

start와 end는 각각 애니메이션의 시작 지점과 끝 지점을 설정하는 역할을 하며, 트리거 요소의 기준 위치와 뷰포트(브라우저 화면)의 기준 위치 두 가지 값으로 동작합니다.

예를 들어, div.xScroll에 start: "top center"를 지정했다고 가정한다면, div.xScroll의 상단이 브라우저의 중앙에 위치할 때 트리거가 시작된다고 이해할 수 있습니다.

end에는 div.xScroll가 총 가로 스크롤 길이만큼 세로로 스크롤 시 종료되게끔 하기 위해 +=${xScrollWidth}를 입력합니다.

scrub, pin, anticipatePin, markers는 위 코드에 함께 기재한 주석에 달린 설명으로 대체합니다. scrub, pin, anticipatePin은 GSAP ScrollTrigger로 가로 스크롤을 구현할 때 기본값 그대로 사용한다고 보시면 됩니다.

결과물

이미지 클릭 시, JS Fiddle에서 결과물을 직접 볼 수 있습니다.

이렇게 가로 스크롤 구현이 끝났습니다. 그런데 글 초반에 삽입된 구동 영상과 달리 뭔가 빠진 부분이 있는 것 같습니다.

스크롤이 끝나면 div.xScroll 배경색이 바뀌고, 이후 스크롤 시 뒤에 있는 세 번째 섹션(div.end)이 고정된 채로 드러나는 부분이 빠졌네요.

조금 기교를 부려봤습니다. scrollTrigger의 onUpdate 속성을 활용해 애니메이션의 시작과 끝을 파악하고, 배경색 변화를 주었습니다. 배경색 변경 외에도 다양한 디자인 효과나 애니메이션을 적용할 수 있습니다.

세 번째 섹션(div.end)이 스크롤 시 고정된 채로 드러나는 부분은 position과 z-index를 이용해 처리했습니다. 이 부분은 글을 읽으시는 분이 아래 GitHub에 호스팅된 링크를 통해 직접 확인해 보실 수 있도록 재미(?) 요소로 남겨두겠습니다.

[심화] GASP ScrollTrigger - 가로 애니메이션

이제 구현이 끝났으니, 여러분도 직접 스크롤을 시도해 보세요! (그럼 뭔가가 변할 거예요!)

]]><![CDATA[Windows Bluetooth 연결 자동화 하기]]>https://lab.dongri.me/p/windows-bluetoothhttps://lab.dongri.me/p/windows-bluetoothWed, 09 Oct 2024 13:03:30 GMT

NUC 13에는 내장 스피커가 없어, 구글 Nest Hub를 블루투스 스피커로 연결해 사용하고 있습니다.

페어링은 되어 있지만, 다른 블루투스 기기들과 달리 자동으로 연결되지 않아 PC를 사용할 때마다 수동으로 연결해야 하는 불편함이 있었습니다. 부팅 또는 로그인 시 자동으로 Nest Hub와 연결할 수 있는 방법이 있을지 찾아보았습니다.

Bluetooth command line tools

처음에는 PowerShell 스크립트만으로 블루투스 제어가 가능할 줄 알았으나, 지원되지 않는 것 같았습니다. 대신, Microsoft Windows용 명령줄 유틸리티인 Bluetooth Command Line Tools를 통해 블루투스를 제어할 수 있다는 것을 알게 되었습니다.

Bluetooth command line tools

프로그램을 다운로드하여 설치하면 되며, 설치 경로는 다음과 같습니다.

C:\Program Files (x86)\Bluetooth Command Line Tools\bin

블루투스 연결 컨트롤 하기

Bluetooth Command Line Tools(이하 BCL)에서 블루투스를 제어하기 위해 필요한 주요 항목은 Device Address와 GUID입니다. 현재 Windows에 페어링된 Device Address와 GUID는 BCL에서 btdiscovery -s 명령어를 통해 확인할 수 있습니다.

괄호로 감싸진 부분이 Device Address이고, 그 옆에 있는 영문과 숫자가 조합된 4자리 문자가 GUID입니다.

배치 스크립트 예제

공식 홈페이지에서 Bluetooth Command Line Tools를 사용한 배치 스크립트 샘플를 배포하고 있으며 블루투스 장치를 제거하고, 페어링 및 연결까지 진행하는 내용이 담겨 있습니다.

@echo  off

rem   The following line is needed only if you haven't added Bluetooth Command Line Tools to system PATH
set PATH=c:\program files\bluetooth command line tools\bin;%PATH%

rem   Change the following 2 lines to match your device
set DEVICE_ADDRESS=00:01:02:03:FF:FF
set SERVICE_UUID=1124

rem   If your device requires PIN code other than '0000', uncomment and change the following line
rem set PIN=1234


rem   Remove the device. Ignoring possible error here 
btpair -u -b"%DEVICE_ADDRESS%"

rem   Pair the device
btpair -p%PIN% -b"%DEVICE_ADDRESS%"
if errorlevel 1 goto error

rem   Enable the service
btcom -c -b"%DEVICE_ADDRESS%" -s%SERVICE_UUID%
if errorlevel 1 goto error

goto success

rem   Allow user to read error message before window is closed
:error
pause
exit

:success
exit

위 스크립트는 블루투스 기기를 제거하고 등록 및 연결을 수행하기 때문에 Windows 창에서 추가 등록 허용 버튼을 눌러야 합니다. 또한 불필요한 부분이 있어 간소화했습니다.

블루투스 연결 해제 후 다시 연결하는 스크립트

@echo  off

rem Bluetooth Command Line Tools 경로 설정
set PATH="C:\Program Files (x86)\Bluetooth Command Line Tools\bin";%PATH%

rem Bluetooth 장치 주소 및 GUID 설정 (모를 경우 btdiscovery -s로 확인)
set DEVICE_ADDRESS=디바이스 Address 참고
set SERVICE_UUID=GUID를 입력해주세요

btcom -r -b %DEVICE_ADDRESS% -s%SERVICE_GUID%
btcom -c -b %DEVICE_ADDRESS% -s%SERVICE_GUID%

사용된 btcom의 명령어의 용도는 아래와 같습니다.

  • -b Device Address

  • -c Bluetooth 연결

  • -r Bluetooth 연결 해제

  • -s Device 이름 (GUID)

위의 스크립트를 메모장에 붙여넣은 후, 파일의 확장자를 .bat로 지정하여 저장합니다.

Windows 스케줄러 등록하기

  1. ⊞ 윈도우 키를 눌러 검색창을 통해 작업 스케줄러를 실행합니다.

  2. 작업 스케줄러 창의 좌측에 위치한 기본 작업 만들기를 클릭합니다.

  1. 스케줄의 이름을 지정하고 다음 버튼을 누릅니다.

  1. 작업 트리거는 컴퓨터 시작시 혹은 로그온 할 때로 지정합니다.

  1. 프로그램 시작을 선택 후 다음을 누릅니다.

  1. 이후 단계에서 저장한 배치 파일(.bat)을 지정해 주면 완료됩니다.

]]><![CDATA[이미지 Pixel Mosaic 애니메이션 — 프로토타입]]>https://lab.dongri.me/p/pixel-mosaichttps://lab.dongri.me/p/pixel-mosaicSun, 28 Apr 2024 13:06:59 GMT프로토타입 버전에서 발전해 Lazy Loading 플러그인을 제작했습니다.

예전에 Muzli에 소개된 사이트에서 이미지에 CSS image-rendering 속성을 사용해 Pixel Mosaic 애니메이션을 적용한 것을 보며, 이미지를 지연 로딩(lazy loading)할 때에 효과적으로 적용할 수 있겠다 싶어 따라 해봤습니다.

원본 사이트를 따로 메모해 두지 않아 아쉽게도 기억을 끄집어내며 프로타입을 만들었네요.

이미지

  • 640X360 크기의 원본 이미지

  • 100X56 크기의 이미지 (동일 비율로 축소)

  • 50X28 크기의 이미지 (동일 비율로 축소)

애니메이션 명세

  1. 모든 이미지는 원본 이미지 크기인 640X360로 노출된다.

  2. CSS image-rendering: pixelated 속성을 적용한다.

  3. 50X28 → 100X56 → 640X360 순으로 노출된다.

  4. 각 이미지는 0.5초 딜레이 되어 노출된다.

결과

프로토타입 확인하러 가기

픽셀에서 점차 작은 픽셀로 촘촘해지면서 선명해지도록 해보고 싶었으나 단순 HTML/CSS 상으로 구현하기에는 이미지를 크기별로 리사이징 해야 하는 개수가 많아져서 3단계로만 진행했습니다.

이미지의 크기 차이가 크지 않아야 자연스럽고 예뻤으며 해외사이트에서는 정지 이미지로만 이루어졌는데 오히려 gif와 같은 동적인 애니메이션에 활용하니 효과가 극대화되는 것 같습니다.

위 프로토타입 구현 방식의 한계로는

  • 정적인 페이지에만 제한적으로 활용할 수 있을 듯합니다.
    (이미지의 사이즈가 고정적이어야 하고, 사이즈별로 이미지가 준비되어 있어야 하는 등)

  • 이미지 크기는 GD 라이브러리 등을 이용하여 서버에서 미리 사이즈별로 리사이징 하여 저장해 두면 데이터들이 달라지는 페이지에도 적용해 볼 수 있을 것 같습니다.

  • 하지만 불러오는 이미지 개수가 많아지고, 작은 이미지 크기라 할지라도 불러오는 데 시간이 걸리기 때문에 지연 로딩(lazy loading)에 대한 효과가 없는 단순 인터랙션이라고만 생각합니다.

  • base64 인코딩으로 가장 작은 이미지 크기를 html에 심으면 되지 않을까? 싶기도….

가설 & 시도해 보기

  • Lazy Loading은 화면 영역에 들어왔을 때 스켈레톤과 같은 효과 없이 이미지 로딩이 늦게 이루어지더라도 모자이크 효과가 보인다면 이용자가 지루해하지 않고 하나의 콘셉트 효과로 생각하지 않을까?

  • 특정 class를 가진 원본 이미지에 Canvas를 활용해 Pixel Mosaic 효과를 구현한다면 사이즈마다 따로 이미지를 저장하지 않고 하나의 이미지로 문서 내의 여러 이미지에 쉽게 적용할 수 있지 않을까?

위와 같은 생각을 가지고 기본 Javascript 문법 위주만 알고 있는 저는 Chat GPT의 도움을 받기로 하고 여러 번 시도해 봤는데 Canvas를 활용한 원하는 작동 코드를 만들어 주지 않아 실패했습니다.

Chat GPT는 모자이크를 가우시안 블러 효과로 보여주거나 이미지를 실제 모자이크 효과를 적용하는 것처럼 무언가 로직을 사용해 픽셀을 구현했으나, 구글을 검색해 보니 Canvas에 imageSmoothingEnabled = false 속성만 주면, CSS image-rendering: pixelated와 같이 쉽게 구현할 수 있는 것 같았습니다.

따라서 고정된 폭에 작은 사이즈로 축소한 이미지를 원본 크기의 Canvas에 확대하는 식으로 효과를 구현하도록 주문했으나 계속 잘 안돼서 포기를….

마무리

원래 이미지를 매끄럽게 보여주기 위한 방식으로 개발된 속성인데 이를 이용해 과거 픽셀 모자이크 효과로 활용했다는 발상에 감탄했습니다.

보통은 auto로 두고 사용할 일이 없지만, 고전 픽셀 스타일이나 저해상도의 QR 코드, 바코드 이미지에 image-rendering: pixelated를 사용한다면 용량이 적은 저해상도 이미지로 해상도가 높은 모니터에 화질열화처럼 안 보이고 효과적으로 보여줄 수 있겠다 싶었습니다.

역시 사람은 아는 게 많아야 여기저기 활용할 수 있다고 생각하며 다시 한번 Javascript와 Canvas를 공부해야 할 필요성을 느낍니다.

]]><![CDATA[Vaultwarden 설치하기]]>https://lab.dongri.me/p/vaultwardenhttps://lab.dongri.me/p/vaultwardenSat, 10 Sep 2022 15:00:00 GMT

이 글은 2022년에 작성한 설치 기록을 2026년 7월 기준으로 다시 정리한 글입니다.
Ubuntu와 Docker Compose, Nginx Proxy Manager를 이용해
Vaultwarden을 설치하고 HTTPS로 연결하는 방법을 다룹니다.
마지막에는 선택 사항으로 자동 업데이트 설정도 추가했습니다.

비밀번호 관리 프로그램으로 Enpass를 사용해 오다 추석 연휴를 이용해 Vaultwarden을 설치했습니다.

과거 1~2만 원대에 구입한 Enpass 평생 라이선스만으로도 기능은 충분했습니다.
그러나 회사 보안 정책상 Enpass 볼트를 저장하던 외부 클라우드 서비스가 차단되면서 회사에서는 사실상 사용할 수 없게 되었습니다.

Enpass의 가격 정책이 과거보다 크게 오른 점도 이전을 고민하게 된 이유였습니다.
Vaultwarden은 직접 서버를 운영해야 하지만, 공식 Bitwarden 클라이언트를 사용하면서 개인 서버에 데이터를 보관할 수 있고 TOTP 인증 코드 기능도 활용할 수 있습니다.

기존에 OTP 앱으로 Authy를 사용했지만, 보안 사고 이후에는 비밀번호 관리자와 별도의 인증 수단을 함께 관리하는 방향을 다시 고민하게 됐습니다.

저는 별도의 NAS를 운영하지 않고, 남는 Oracle Cloud 인스턴스에 Vaultwarden을 설치했습니다.

셀프호스팅은 데이터를 직접 관리할 수 있다는 장점이 있지만 서버 장애, 백업, 보안 업데이트도 직접 책임져야 합니다. 따라서 단순히 설치하는 것보다 데이터 저장 위치와 업데이트 방법을 함께 알아두는 것이 중요합니다.

Bitwarden과 Vaultwarden의 차이

출처: Bitwarden vs Vaultwarden: ¿Cuál se adapta mejor a tus necesidades de seguridad de contraseñas? – CEC

Bitwarden은 Bitwarden Inc.에서 공식적으로 개발하는 오픈소스 비밀번호 관리 서비스입니다.

공식 클라우드를 이용할 수도 있고 서버를 직접 구축할 수도 있습니다.
Chrome, Edge, Firefox 확장 프로그램과 데스크톱·모바일 앱도 공식적으로 제공합니다.

Vaultwarden은 과거 bitwarden_rs라는 이름으로 개발되던 비공식 오픈소스 서버입니다.

공식 Bitwarden 서버를 단순히 수정한 포크라기보다, 공식 Bitwarden 클라이언트와 호환되는 서버 API를 Rust로 다시 구현한 프로젝트에 가깝습니다. 공식 서버보다 상대적으로 가볍고 Docker를 이용해 간단하게 설치할 수 있어 개인이나 가족 단위의 셀프호스팅 환경에서 많이 사용됩니다.

Vaultwarden을 사용하더라도 브라우저 확장 프로그램과 데스크톱·모바일 앱은 공식 Bitwarden 클라이언트를 사용합니다.

다만 Vaultwarden은 비공식 호환 서버이므로 Bitwarden 클라이언트가 크게 변경되면 Vaultwarden도 함께 업데이트해야 합니다.

실제로 2026년 7월에는 Bitwarden 브라우저 확장 프로그램이 2026.7.0으로 업데이트된 뒤, Vaultwarden 1.36.0에서는 로그인에 성공해도 금고 항목이 보이지 않는 문제가 발생했습니다.

웹 금고와 기존 데스크톱 앱에서는 데이터가 정상적으로 보였지만 Chrome과 Edge 확장 프로그램에서는 금고가 비어 있었습니다. Vaultwarden을 1.37.0으로 업데이트하자 항목이 다시 정상적으로 표시됐습니다.

데이터가 삭제된 문제는 아니었지만 Bitwarden 클라이언트만 업데이트되고 Vaultwarden 서버가 오래된 상태로 남으면 호환성 문제가 발생할 수 있다는 점을 확인했습니다.

설치 구성

이 글에서는 다음 구성을 사용합니다.

Ubuntu → Docker → Docker Compose → Nginx Proxy Manager → Vaultwarden → Let's Encrypt SSL 인증서

설치 후 디렉터리는 다음과 같은 형태가 됩니다.

~/dockers
├── nginxproxymanager
│   ├── data
│   ├── letsencrypt
│   ├── .env
│   └── docker-compose.yml
└── vaultwarden
    ├── vw-data
    ├── backups
    ├── .env
    └── docker-compose.yml

Vaultwarden의 실제 데이터는 다음 폴더에 저장됩니다.

~/dockers/vaultwarden/vw-data

Docker 컨테이너는 다시 만들 수 있지만 vw-data에는 계정과 금고 데이터, 첨부 파일, 암호화 키와 서버 설정이 들어 있으므로 삭제하면 안 됩니다.

Ubuntu 초기 설정

패키지를 업데이트하고 서버 시간대를 한국으로 설정합니다.

메모리가 적은 소형 인스턴스라면 2GB 스왑 파일도 함께 만들 수 있습니다.
이미 스왑이 설정돼 있다면 스왑 생성 부분은 건너뛰어도 됩니다.

# 패키지 업데이트
sudo apt update
sudo apt -y upgrade

# 서버 시간대를 한국으로 설정
sudo timedatectl set-timezone Asia/Seoul

# 기존 스왑 확인
swapon --show

# 2GB 스왑 파일 생성
# 이미 스왑이 있다면 아래 네 줄은 실행하지 않아도 됩니다.
sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

# 재부팅 후에도 스왑 유지
# 기존 설정이 있을 때 중복으로 추가하지 않습니다.
grep -q '^/swapfile ' /etc/fstab || \
  echo '/swapfile swap swap defaults 0 0' | sudo tee -a /etc/fstab

# 최종 확인
timedatectl
free -h
swapon --show

Docker와 Docker Compose 설치

Docker와 Docker Compose를 설치하고 부팅할 때 자동으로 실행되도록 설정합니다.

# Docker와 Docker Compose 설치
sudo apt install -y docker.io docker-compose-v2

# docker-compose-v2 패키지를 찾을 수 없을 때는 아래 명령을 사용합니다.
# sudo apt install -y docker.io docker-compose-plugin

# Docker 실행 및 자동 시작
sudo systemctl enable --now docker

# 설치 확인
docker --version
docker compose version

과거 문서에서 많이 보이는 docker-compose 대신 현재는 공백이 들어간 docker compose 명령을 사용합니다.

일반 사용자 계정에서도 sudo 없이 Docker를 사용하고 싶다면 다음 명령을 실행한 뒤 로그아웃하고 다시 로그인합니다.

sudo usermod -aG docker "$USER"

공용 Docker 네트워크 생성

Nginx Proxy Manager와 Vaultwarden을 서로 다른 Compose 파일로 관리하면서도 내부 네트워크로 연결하기 위해 공용 Docker 네트워크를 만듭니다.

docker network inspect proxy-network >/dev/null 2>&1 || \
  docker network create proxy-network

이 네트워크를 사용하면 Vaultwarden의 포트를 외부에 직접 공개하지 않고 Nginx Proxy Manager에서 컨테이너 이름으로 연결할 수 있습니다.

Nginx Proxy Manager 설치

Vaultwarden 웹 금고는 브라우저의 Web Crypto API를 사용하기 때문에 HTTPS 환경이 필요합니다. Vaultwarden도 HTTPS와 리버스 프록시 사용을 권장합니다.

여기서는 웹 화면에서 프록시 호스트와 SSL 인증서를 관리할 수 있는 Nginx Proxy Manager를 사용합니다. Nginx Proxy Manager 역시 공식적으로 Docker Compose 설치 예시를 제공합니다.

설치 폴더와 비밀번호 만들기

# 설치 폴더 생성
mkdir -p ~/dockers/nginxproxymanager/{data,letsencrypt}
cd ~/dockers/nginxproxymanager

# 데이터베이스용 무작위 비밀번호 두 개 생성
openssl rand -base64 32
openssl rand -base64 32

출력된 두 비밀번호를 각각 복사해 안전한 곳에 보관합니다.

환경변수 파일 생성

아래 명령 전체를 복사해 붙여넣되 비밀번호 부분은 방금 생성한 값으로 교체합니다.

cat > .env <<'EOF'
DB_MYSQL_ROOT_PASSWORD=첫_번째_비밀번호로_교체
DB_MYSQL_PASSWORD=두_번째_비밀번호로_교체
EOF

# 다른 사용자가 파일을 읽지 못하도록 권한 제한
chmod 600 .env

EOF 사이에 입력된 내용이 .env 파일로 저장되므로 별도의 편집기를 사용할 필요가 없습니다.

Docker Compose 파일 생성 및 실행

cat > docker-compose.yml <<'EOF'
services:
  app:
    image: jc21/nginx-proxy-manager:latest
    container_name: nginx-proxy-manager
    restart: unless-stopped
    ports:
      - "80:80"
      - "81:81"
      - "443:443"
    environment:
      DB_MYSQL_HOST: db
      DB_MYSQL_PORT: 3306
      DB_MYSQL_USER: npm
      DB_MYSQL_PASSWORD: ${DB_MYSQL_PASSWORD}
      DB_MYSQL_NAME: npm
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
    depends_on:
      - db
    networks:
      - proxy-network

  db:
    image: jc21/mariadb-aria:latest
    container_name: nginx-proxy-manager-db
    restart: unless-stopped
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: npm
      MYSQL_USER: npm
      MYSQL_PASSWORD: ${DB_MYSQL_PASSWORD}
      MARIADB_AUTO_UPGRADE: "1"
    volumes:
      - ./data/mysql:/var/lib/mysql
    networks:
      - proxy-network

networks:
  proxy-network:
    external: true
EOF

# Compose 문법 확인
docker compose config

# 이미지 다운로드 및 실행
docker compose pull
docker compose up -d

# 실행 상태 확인
docker compose ps

docker compose config에서 오류가 없다면 Nginx Proxy Manager가 실행됩니다.

관리 페이지는 다음 주소로 접속합니다.

http://서버-i

최초 로그인 정보는 설치 시점의 Nginx Proxy Manager 공식 문서를 확인하고,
로그인한 뒤 관리자 이메일과 비밀번호를 즉시 변경합니다.

81번 포트는 관리자 페이지용입니다.
가능하면 인터넷 전체에 공개하지 말고 Ubuntu 방화벽이나 Oracle Cloud 보안 목록에서 본인이 사용하는 IP만 접근하도록 제한하는 편이 안전합니다.

Vaultwarden 설치

설치 폴더와 관리자 토큰 만들기

# 설치 폴더와 백업 폴더 생성
mkdir -p ~/dockers/vaultwarden/{vw-data,backups}
cd ~/dockers/vaultwarden

# 관리자 페이지에 사용할 무작위 토큰 생성
openssl rand -base64 48

출력된 관리자 토큰은 반드시 별도로 보관합니다.

관리자 페이지는 설치 후 다음 주소로 접속할 수 있습니다.

https://vault.example.com/admin

환경변수 파일 생성

아래의 도메인과 관리자 토큰을 실제 값으로 바꿉니다.
처음 계정을 생성해야 하므로 회원가입은 우선 허용합니다.

cat > .env <<'EOF'
DOMAIN=https://vault.example.com
SIGNUPS_ALLOWED=true
ADMIN_TOKEN=방금_생성한_관리자_토큰으로_교체
EOF

chmod 600 .env

Docker Compose 파일 생성 및 실행

cat > docker-compose.yml <<'EOF'
services:
  vaultwarden:
    image: vaultwarden/server:latest
    container_name: vaultwarden
    restart: unless-stopped
    env_file:
      - .env
    environment:
      DOMAIN: ${DOMAIN}
      SIGNUPS_ALLOWED: ${SIGNUPS_ALLOWED}
      ADMIN_TOKEN: ${ADMIN_TOKEN}
    volumes:
      - ./vw-data:/data
    networks:
      - proxy-network

networks:
  proxy-network:
    external: true
EOF

# Compose 문법 확인
docker compose config

# 이미지 다운로드 및 실행
docker compose pull
docker compose up -d

# 실행 상태 확인
docker compose ps

# Vaultwarden 서버와 Web Vault 버전 확인
docker exec vaultwarden /vaultwarden --version

Vaultwarden은 컨테이너 이미지와 호스트의 데이터 폴더를 연결해 데이터를 영구 저장하는 방식을 권장합니다. 위 구성에서는 호스트의 vw-data 폴더가 컨테이너의 /data에 연결됩니다.

버전 확인 결과에는 다음 두 항목이 표시됩니다.

Vaultwarden 1.x.x
Web-Vault 2026.x.x

Vaultwarden은 서버 본체 버전이고 Web-Vault는 서버에 포함된 웹 인터페이스 버전입니다. 두 숫자가 다른 것은 정상입니다.

Nginx Proxy Manager 연결

Nginx Proxy Manager 관리자 페이지에 접속합니다.

http://서버 ip:81

Details

다음과 같이 입력합니다.

Domain Names: vault.example.com
Scheme: http
Forward Hostname / IP: vaultwarden
Forward Port: 80

다음 항목을 활성화합니다.

Block Common Exploits
Websockets Support

SSL

SSL Certificate에서 Request a new SSL Certificate를 선택합니다.

다음 항목을 활성화합니다.

Force SSL
HTTP/2 Support
HSTS Enabled

Let’s Encrypt 이용약관에 동의한 뒤 저장합니다.

정상적으로 설정되면 다음 주소로 Vaultwarden에 접속할 수 있습니다.

httpas

과거 설치 예시에서는 실시간 알림을 위해 3012 포트를 별도로 연결하기도 했지만
현재 구성에서는 별도의 3012 포트 매핑이 필요하지 않습니다.

첫 계정 생성 후 회원가입 차단

Vaultwarden 웹 페이지에서 사용할 계정을 먼저 생성합니다.
계정 생성이 끝났다면 아래 명령을 실행해 회원가입을 차단합니다.

cd ~/dockers/vaultwarden

# SIGNUPS_ALLOWED=true를 false로 변경
sed -i 's/^SIGNUPS_ALLOWED=true$/SIGNUPS_ALLOWED=false/' .env

# 변경된 설정 확인
grep SIGNUPS_ALLOWED .env

# 컨테이너에 설정 적용
docker compose up -d

결과가 다음과 같이 표시되면 정상입니다.

SIGNUPS_ALLOWED=false

Vaultwarden 관리자 페이지에서 설정을 저장한 적이 있다면 vw-data/config.json의 값이 .env보다 우선 적용될 수 있습니다.

실행 시 다음과 같은 메시지가 표시되더라도 오류는 아닙니다.

The following environment variables are being overridden by the config.json file

관리자 페이지에서 저장한 설정이 환경변수보다 우선 적용되고 있다는 안내입니다.

Bitwarden 클라이언트 연결

브라우저 확장 프로그램이나 데스크톱 앱에서 바로 로그인하면 공식 Bitwarden 서버로 연결됩니다.

로그인 화면에서 자체 호스트 또는 Self-hosted 항목을 눌러주세요.
서버 주소를 입력한 뒤 저장버튼을 눌러주세요.

로그인 화면에서 서버 설정 또는 Self-hosted 항목을 열고 서버 주소를 입력 한뒤,
Vaultwarden에서 만든 계정으로 로그인합니다.

브라우저 확장 프로그램과 앱은 공식 Bitwarden 클라이언트를 사용하지만 데이터는 직접 구축한 Vaultwarden 서버와 동기화됩니다.

Vaultwarden 데이터 백업

Vaultwarden 데이터는 다음 폴더에 저장됩니다.

~/dockers/vaultwarden/vw-data

일반적으로 다음 파일과 폴더가 포함됩니다.

db.sqlite3
config.json
attachments
sends
rsa_key.pem
rsa_key.pub.pem

데이터베이스뿐 아니라 첨부 파일과 암호화 키, 설정을 함께 복구하려면 vw-data 폴더 전체를 백업해야 합니다.

아래 명령은 Vaultwarden을 잠시 멈추고 데이터 전체를 압축한 뒤 다시 시작합니다.

cd ~/dockers/vaultwarden

# 백업 폴더 생성
mkdir -p backups

# 데이터베이스가 변경되지 않도록 잠시 중지
docker compose stop vaultwarden

# 현재 날짜와 시간을 붙여 전체 데이터 압축
tar -czpf \
  "backups/vw-data-$(date +%Y%m%d-%H%M%S).tar.gz" \
  vw-data

# Vaultwarden 다시 실행
docker compose start vaultwarden

# 생성된 백업 확인
ls -lh backups

서버 내부에만 백업하면 인스턴스나 디스크에 문제가 생겼을 때 백업도 함께 사라질 수 있습니다. 중요한 백업 파일은 로컬 컴퓨터나 별도 저장장치에도 복사하는 것이 좋습니다.

Vaultwarden 수동 업데이트

Compose 파일에 latest를 적었다고 실행 중인 Vaultwarden이 자동으로 업데이트되는 것은 아닙니다.

최신 이미지를 내려받고 새 이미지로 컨테이너를 재생성해야 합니다.

업데이트 전 백업부터 진행합니다.

cd ~/dockers/vaultwarden

# 업데이트 전 데이터 백업
mkdir -p backups
docker compose stop vaultwarden
tar -czpf \
  "backups/vw-data-$(date +%Y%m%d-%H%M%S).tar.gz" \
  vw-data
docker compose start vaultwarden

# 최신 이미지 다운로드 및 적용
docker compose pull
docker compose up -d

# 업데이트된 버전과 실행 상태 확인
docker exec vaultwarden /vaultwarden --version
docker compose ps

컨테이너는 새 이미지로 교체될 수 있지만 다음 볼륨 연결은 유지됩니다.

volumes:
  - ./vw-data:/data

따라서 호스트의 vw-data 폴더를 직접 삭제하지 않는 한 업데이트 과정에서 금고 데이터가 초기화되지 않습니다.

과거 글에서 사용했던 다음 방식은 더 이상 권장하지 않습니다.

docker stop vaultwarden
docker rm vaultwarden
docker run ...

볼륨과 환경변수, 네트워크 등을 모두 정확히 다시 지정하면 사용할 수 있지만 설정을 빠뜨릴 위험이 있습니다.

현재는 실행 설정을 docker-compose.yml에 기록하고 다음 두 명령으로 업데이트하는 편이 간단하고 안전합니다.

docker compose pull
docker compose up -d

Nginx Proxy Manager 수동 업데이트

Nginx Proxy Manager도 같은 방식으로 업데이트합니다. 공식 업데이트 안내 역시 docker compose pull과 docker compose up -d를 사용합니다.

업데이트 전에 Nginx Proxy Manager의 data와 letsencrypt 폴더를 백업합니다.

cd ~/dockers/nginxproxymanager

# 백업 폴더 생성
mkdir -p backups

# 컨테이너 잠시 중지
docker compose down

# 설정과 인증서, 데이터베이스 전체 백업
tar -czpf \
  "backups/nginxproxymanager-$(date +%Y%m%d-%H%M%S).tar.gz" \
  data letsencrypt .env docker-compose.yml

# 최신 이미지 적용
docker compose pull
docker compose up -d

# 실행 상태 확인
docker compose ps

data 폴더에는 Nginx Proxy Manager 설정과 데이터베이스가 포함되고, letsencrypt에는 발급된 인증서가 저장됩니다.

선택 사항: 주간 자동 업데이트

자동 업데이트는 필수 설정이 아닙니다.
새 버전을 직접 확인한 뒤 업데이트하고 싶다면 이 부분은 건너뛰면 됩니다.

과거에는 Watchtower를 이용해 Docker 컨테이너를 자동으로 업데이트하는 방법이 널리 사용됐습니다.

하지만 Watchtower 공식 저장소는 2025년 12월 17일 읽기 전용으로 전환됐습니다.

제 서버에서는 Docker Engine이 업데이트된 뒤 Watchtower가 다음 오류를 반복하며 더 이상 동작하지 않았습니다.

client version 1.25 is too old
Minimum supported API version is 1.44

Watchtower 컨테이너는 실행 목록에 있었지만 실제로는 Vaultwarden을 업데이트하지 못했습니다.

그 결과 Vaultwarden 서버가 약 두 달간 구버전에 머물렀고 Bitwarden 확장 프로그램과 호환성 문제가 생겼습니다.

현재는 별도 자동 업데이트 컨테이너 대신 Ubuntu의 systemd timer를 사용해 매주 한 번 다음 작업을 수행하도록 구성합니다.

Vaultwarden 데이터 백업
Vaultwarden 업데이트
Nginx Proxy Manager 업데이트
최근 Vaultwarden 백업 8개 유지
사용하지 않는 Docker 이미지 정리

설치 경로 확인

아래 자동 업데이트 설정은 Ubuntu 사용자 이름이 ubuntu이고 설치 경로가 다음과 같다고 가정합니다.

/home/ubuntu/dockers/vaultwarden
/home/ubuntu/dockers/nginxproxymanager

다른 사용자나 경로를 사용했다면 스크립트 상단의 경로를 실제 환경에 맞게 변경해야 합니다.

자동 업데이트 스크립트 생성

아래 명령 전체를 복사해 실행합니다.

sudo tee /usr/local/sbin/update-vaultwarden-stack.sh >/dev/null <<'EOF'
#!/usr/bin/env bash
set -Eeuo pipefail

VAULTWARDEN_DIR="/home/ubuntu/dockers/vaultwarden"
NPM_DIR="/home/ubuntu/dockers/nginxproxymanager"
BACKUP_DIR="$VAULTWARDEN_DIR/backups"
LOCK_FILE="/run/lock/vaultwarden-stack-update.lock"
VAULTWARDEN_STOPPED=0

log() {
  echo "[$(date --iso-8601=seconds)] $*"
}

# 백업 중 오류가 나더라도 Vaultwarden이 정지 상태로 남지 않게 합니다.
restart_vaultwarden() {
  if [[ "$VAULTWARDEN_STOPPED" -eq 1 ]]; then
    cd "$VAULTWARDEN_DIR"
    docker compose start vaultwarden || true
  fi
}

trap restart_vaultwarden EXIT

# 중복 실행 방지
exec 9>"$LOCK_FILE"
flock -n 9 || exit 0

mkdir -p "$BACKUP_DIR"
cd "$VAULTWARDEN_DIR"

log "Vaultwarden을 중지하고 데이터를 백업합니다."
docker compose stop vaultwarden
VAULTWARDEN_STOPPED=1

tar -czpf \
  "$BACKUP_DIR/vw-data-$(date +%Y%m%d-%H%M%S).tar.gz" \
  vw-data

log "백업 후 Vaultwarden을 다시 실행합니다."
docker compose start vaultwarden
VAULTWARDEN_STOPPED=0

log "최근 백업 8개만 유지합니다."
find "$BACKUP_DIR" \
  -maxdepth 1 \
  -type f \
  -name 'vw-data-*.tar.gz' \
  -printf '%T@ %p\n' |
  sort -rn |
  tail -n +9 |
  cut -d' ' -f2- |
  xargs -r rm -f

log "Vaultwarden을 업데이트합니다."
cd "$VAULTWARDEN_DIR"
docker compose pull
docker compose up -d

log "Nginx Proxy Manager를 업데이트합니다."
cd "$NPM_DIR"
docker compose pull
docker compose up -d

log "컨테이너가 시작될 때까지 기다립니다."
sleep 15

log "Vaultwarden 상태"
cd "$VAULTWARDEN_DIR"
docker compose ps

log "Nginx Proxy Manager 상태"
cd "$NPM_DIR"
docker compose ps

# 주요 컨테이너가 실행 중인지 확인
docker ps --format '{{.Names}}' | grep -qx 'vaultwarden'
docker ps --format '{{.Names}}' | grep -qx 'nginx-proxy-manager'
docker ps --format '{{.Names}}' | grep -qx 'nginx-proxy-manager-db'

log "사용하지 않는 이전 이미지를 정리합니다."
docker image prune -f

log "자동 백업 및 업데이트를 완료했습니다."
EOF

sudo chmod 750 /usr/local/sbin/update-vaultwarden-stack.sh

systemd 서비스와 타이머 등록

매주 일요일 오전 4시에 실행하도록 서비스와 타이머를 한 번에 생성합니다.

sudo tee /etc/systemd/system/vaultwarden-stack-update.service >/dev/null <<'EOF'
[Unit]
Description=Back up and update Vaultwarden and Nginx Proxy Manager
Requires=docker.service
After=docker.service network-online.target
Wants=network-online.target

[Service]
Type=oneshot
ExecStart=/usr/local/sbin/update-vaultwarden-stack.sh
TimeoutStartSec=45min
EOF

sudo tee /etc/systemd/system/vaultwarden-stack-update.timer >/dev/null <<'EOF'
[Unit]
Description=Weekly Vaultwarden stack backup and update

[Timer]
OnCalendar=Sun *-*-* 04:00:00 Asia/Seoul
Persistent=true
RandomizedDelaySec=10m
Unit=vaultwarden-stack-update.service

[Install]
WantedBy=timers.target
EOF

# 설정 적용 및 자동 실행 활성화
sudo systemctl daemon-reload
sudo systemctl enable --now vaultwarden-stack-update.timer

# 다음 실행 일정 확인
systemctl list-timers --all | grep vaultwarden

RandomizedDelaySec=10m을 사용했으므로 매주 일요일 오전 4시부터 4시 10분 사이에 실행됩니다.

예약 시간에 서버가 꺼져 있었다면 Persistent=true 설정에 따라 다음 부팅 후 놓친 작업을 실행합니다.

자동 업데이트 시험

예약일까지 기다리지 않고 한 번 직접 실행해 봅니다.

# 자동 백업과 업데이트 즉시 실행
sudo systemctl start vaultwarden-stack-update.service

# 실행 결과와 로그 확인
systemctl status vaultwarden-stack-update.service --no-pager
sudo journalctl \
  -u vaultwarden-stack-update.service \
  -n 100 \
  --no-pager

# 생성된 Vaultwarden 백업 확인
ls -lh ~/dockers/vaultwarden/backups

Type=oneshot 서비스는 작업을 마치면 inactive (dead)로 표시될 수 있습니다.

이는 오류가 아니며 다음과 같이 성공 여부가 표시되면 정상입니다.

status=0/SUCCESS

자동 업데이트가 부담스럽다면 이 설정을 적용하지 않고 앞에서 설명한 수동 업데이트 명령만 주기적으로 실행해도 됩니다.

문제가 생겼을 때 확인할 명령

Vaultwarden 실행 상태:

cd ~/dockers/vaultwarden
docker compose ps

Vaultwarden 버전:

docker exec vaultwarden /vaultwarden --version

Vaultwarden 최근 로그:

docker logs --tail 100 vaultwarden

Nginx Proxy Manager 실행 상태:

cd ~/dockers/nginxproxymanager
docker compose ps

Nginx Proxy Manager 최근 로그:

docker logs --tail 100 nginx-proxy-manager

Vaultwarden과 Nginx Proxy Manager가 공용 네트워크에 연결됐는지 확인:

docker network inspect proxy-network

Vaultwarden 백업 확인:

ls -lh ~/dockers/vaultwarden/backups

자동 업데이트 일정 확인:

systemctl list-timers --all | grep vaultwarden

자동 업데이트 로그 확인:

sudo journalctl \
  -u vaultwarden-stack-update.service \
  -n 100 \
  --no-pager

사용 후기

처음 설치했을 때는 리버스 프록시 설정이 생소해 시행착오가 많았습니다.

Docker도 서버 엔지니어 지인이나 회사에서 자주 듣기만 했던 단어라 어렵게 느껴졌지만, 실제 설치 과정은 폴더를 만들고 Compose 파일을 작성한 뒤 몇 개의 명령을 실행하는 것으로 끝났습니다.

몇 년 동안 운영해 보니 설치보다 중요한 것은 다음 세 가지였습니다.

  • 데이터 볼륨

  • 백업

  • 업데이트

컨테이너는 다시 만들 수 있지만 vw-data가 사라지면 금고 데이터를 복구하기 어렵습니다.

또한 Compose 파일에 latest를 사용한다고 서버가 저절로 업데이트되는 것도 아닙니다. 최신 이미지를 내려받고 컨테이너를 재생성해야 실제 버전이 변경됩니다.

Bitwarden 클라이언트는 브라우저나 앱스토어를 통해 자동으로 업데이트되는데 Vaultwarden 서버만 오래된 상태로 남으면 호환성 문제가 생길 수 있습니다.

자동 업데이트가 부담스럽다면 다음 명령을 정기적으로 실행하는 것만으로도 충분합니다.

cd ~/dockers/vaultwarden
docker compose pull
docker compose up -d
docker exec vaultwarden /vaultwarden --version

다만 업데이트 전에는 반드시 vw-data를 백업하는 것이 좋습니다.

장점

  • 다양한 서비스의 데이터 가져오기 지원

    여러 비밀번호 관리 서비스에서 내보낸 데이터를 Bitwarden 형식으로 가져올 수 있습니다.

  • 공식 Bitwarden 클라이언트 사용

    Chrome, Edge, Firefox 브라우저 확장 프로그램과 Windows, macOS, Linux, iOS, Android용 공식 Bitwarden 앱을 사용할 수 있습니다.

  • URL 매칭 방식

    기본 도메인, 호스트, 정확한 URL, 정규식 등 다양한 URL 매칭 규칙을 지정할 수 있습니다.

  • 직접 관리하는 저장소

    데이터를 외부 비밀번호 관리 서비스가 아니라 자신이 운영하는 서버에 저장할 수 있습니다.

  • 비교적 가벼운 서버 구성

    공식 Bitwarden 셀프호스팅 서버보다 상대적으로 가볍고 Docker 기반으로 설치할 수 있습니다.

단점

  • 서버를 직접 관리해야 함

    서버 장애와 데이터 백업, 보안 업데이트, 도메인과 SSL 인증서, 리버스 프록시를 직접 관리해야 합니다.

  • 공식 서버와의 호환성 차이

    Vaultwarden은 비공식 호환 서버이므로 Bitwarden 클라이언트 업데이트 직후 일시적인 호환성 문제가 발생할 수 있습니다.

  • 자동완성 사용성 차이

    Enpass는 입력 영역을 클릭했을 때 계정을 선택하는 과정이 자연스럽게 표시되는 반면 Bitwarden은 자동완성 설정이나 인라인 자동완성 메뉴를 별도로 조정해야 할 수 있습니다.

    여러 계정을 사용하는 사이트에서는 Enpass의 계정 선택 방식이 더 편하게 느껴졌습니다.

  • 첨부 파일 사용성

    신분증 이미지 등의 파일을 첨부할 수 있지만 파일 종류와 클라이언트에 따라 Enpass처럼 내부에서 바로 확인하기보다 다운로드가 필요한 경우가 있습니다.

  • 기본 항목 유형

    Enpass의 금융, 여행, 라이선스 등 세분화된 템플릿과 비교하면 기본으로 제공하는 항목 유형이 단순하게 느껴질 수 있습니다.

  • 직접 로고를 지정하기 어려움

    Enpass와 달리 항목별로 원하는 로고나 심볼 이미지를 직접 등록하는 기능은 제한적입니다.

마무리

사용 환경에서 Enpass의 동기화 서비스가 차단되지 않고 필요한 기능을 합리적인 비용으로 이용할 수 있다면 완성도와 편의성 측면에서는 Enpass가 더 잘 맞을 수 있습니다.

Vaultwarden은 무료라서 무조건 편한 서비스가 아니라 비용 대신 서버 운영과 관리 부담을 직접 감수하는 방식에 가깝습니다.

다만 데이터를 직접 관리하고 여러 환경에서 공식 Bitwarden 클라이언트를 사용하고 싶다면 충분히 매력적인 대안입니다.

]]><![CDATA[5분 만에 만드는 나만의 단축주소]]>https://lab.dongri.me/p/custom-short-url-in-5-minuteshttps://lab.dongri.me/p/custom-short-url-in-5-minutesSun, 13 Feb 2022 10:10:10 GMT
구글, 올해 G스위트 유료화 재차 통보... 7월 1일 무료판 종료 | 아주경제

대학교 무제한 용량 폐지에 이어서 Google Workspace 무료 버전 유료화 발표로 google 서비스를 타 서비스로 옮기는 작업을 하고 있습니다.

medium을 통해 공유한 파일들 또한 google drive를 통해 공유하곤 했는데요, 이를 타 서비스로 옮기면서 접속 통계 및 유지보수 목적으로 제 도메인이 적용된 단축 주소를 적용하기로 했습니다.

ushort.io을 통한 커스텀도메인 연결 방법 소개 (유료)

개인도메인 이용한 단축url 만들기

앞서 일부 다른 서비스들도 살펴보았지만, 가급적 인지도와 오래 이용 가능한 점을 고려하여 google firebase를 선택했습니다. (그러다 유료화되면…😖)

먼저 google 계정과 Firebase 프로젝트가 생성되어 있어야 합니다. 저는 Google Workspace 유료화 정책으로 인해 새로운 google 개인계정을 생성했습니다.

Fireboase 기본 프로젝트 생성

이미 이전 글에서 프로젝트 설명하였으므로 관련 글을 참고하시면 됩니다. (프로젝트 추가까지만 진행하시면 됩니다.)

단축URL 설정하기

Dynamic Links

좌측메뉴에서 참여를 누르면 나오는 Dynamic links을 선택 후 시작하기 버튼을 눌러주세요.

사용하고자 하는 도메인을 입력해 주세요.

단축 URL만을 위한 도메인을 갖고 있는 게 아니라면 보통 2차 도메인(서브도메인)을 사용합니다. (short.domain.com/단축 URL)

경로 프리픽스는 설정한 도메인에 접두어 등을 붙이는 방식인데요,
굳이 사용하지 않으므로 넘어갑니다. (아니라면 댓글로 알려주세요.)

https://example.com/접두어/link-suffix

도메인 소유를 확인하고 연결하는 과정을 거칩니다.

도메인 소유를 확인하고 연결하는 과정을 거칩니다. 상세 설명은 생략하며 TEXT를 통해 인증하고 A 호스트에 Firebase에서 제공하는 IP주소를 연결하고자 하는 도메인에 연결해 줍니다.

관련해서는 기존에 쓰인 글을 이어서 참고하시면 도움이 됩니다.

도메인 연결만 성공한다면 거의 다 오신 겁니다.

단축 URL 추가하기

맞춤법 검사를 원하는 단어나 문장을 입력해 주세요. 여기서부터는 기존에 만들어 두었던 실제 환경을 기반으로 설명해 드립니다.

처음엔 비어있는 목록이 나옵니다. 스크린샷은 무시하시고 새 동적 링크를 눌러주세요.

생성하기

1. 단축 URL 링크 설정

서브도메인 뒤에 단축 URL이 임의로 생성됩니다.
원하시는 문자로 수정 가능하며, 저는 그대로 두었습니다.

2. 동적 링크 설정

딥 링크 URL
해당 단축 URL이 어느 것인지를 설명하는 이름입니다.

동적 링크 이름
외부에 노출되지는 않으며, Firebase 콘솔에서 관리를 편하기 위해 입력하는 내용이기에 명확하게 확인할 수 있는 이름 혹은 설명을 입력해 주세요.

이 글에서는 자동화 혹은 앱 개발에 사용하거나 UTM을 사용한 추적(?) 등을 활용하지 않기 때문에 생략하고 바로 만들기 버튼을 눌러줍니다.

완료

모두 다 끝났습니다.

목록에서 기존에 생성된 단축어 링크 등을 확인할 수 있으며, 추후 본 링크가 변경되었을 경우 수정도 할 수 있습니다. 구글 애널리틱스와 연동하지 않았지만 간략하게 몇 번 클릭했는지, 재방문 횟수 등도 확인이 가능합니다.

서버에 따로 설치할 필요 없이, Firebase에서 초반의 도메인 세팅만 잘 끝낸다면 이후에 같은 방법으로 쉽게 나만의 단축 URL을 만들고 관리할 수 있습니다.

]]><![CDATA[Oracle Cloud에 code-server 설치하기]]>https://lab.dongri.me/p/oracle-cloud-code-server-installhttps://lab.dongri.me/p/oracle-cloud-code-server-installTue, 01 Feb 2022 12:38:48 GMT

애플스토어에 일시적으로 VS-Code 기반의 Code App가 무료로 풀려서 설치하는 김에 이전에 시도하다 실패한 code-sever을 설치해봤습니다.

‎Code App

저는 Oracle Cloud를 무료로 사용하고 있기에 Oracle 기반이라고 못 박아 두었지만 사실 어지간하면 웬만해서 모든 클라우드/OS에서 설치가 가능합니다.

이미 여러 좋은 레퍼런스들이 있고, 저도 그 글들을 참고해서 설치하였기에 애써 작성해 주신 공유 글들에 해를 끼치지 않고자 링크로 대신하며 진행 도중 달라진 부분이나 추가로 덧붙일 부분만 서술합니다.

Code Server - 구축편
Code-server 설치와 활용 on Linux

설치하면서 느낀 부분들

  • code-server / Nginx 설치순서는 바뀌어도 상관없습니다.

  • 일부 명령어 오류가 나는 부분은 아래와 같이 입력했습니다.

NginX 재시작
$ sudo systemctl reload nginx.service → 
$ sudo systemctl restart nginx
code-server 서비스 등록
$ systemctl — user enable — now code-server →
$ sudo systemctl enable — now code-server@$USER

  • htpasswd 비밀번호 변경은 생성 명령어 그대로 쓰면 덮어씌워짐

비밀번호 수정
$ sudo htpasswd -c /etc/nginx/.htpasswd [유저 아이디]
유저 삭제
$ sudo htpasswd -d /etc/nginx/.htpasswd [유저 아이디]

  • Certbot 사용 시 http-01 방식이 아니라서 다시 바꿀까 했지만,
    Cloueflare로 서버 IP를 숨기는 저의 경우 원글의 DNS-01 방식이 더 적합했습니다.

  • 월의 마지막 날에 SSL 인증서 업데이트 동작하는 스케줄러 명령어는

$ crontab -e
0 0 28–31 * * /usr/bin/test $(date -d ‘+1 day’ +%d) -eq 1 && [쉘 스크립트 경로]
인터넷 검색해보니 저장할데 딱히 없으면 /root에 스크립트 파일 저장함.

  • 무료 저사양 클라우드여서 그런지 cloudflare를 거쳐서 그런지는 모르겠지만 로딩속도가 느립니다. iPad 등 원격으로 IDE를 사용할 수 있다는 데에 의의를 두는 게 좋겠습니다.

]]><![CDATA[Medium 커스텀 도메인 연결하기]]>https://lab.dongri.me/p/medium-custom-domain-setuphttps://lab.dongri.me/p/medium-custom-domain-setupSat, 02 May 2020 14:05:46 GMT

2020.11.01.
이 방법은 다른 medium 사용자 또한 자신의 도메인으로 접속이 가능한 문제가 있어 추천하지 않습니다. 최근 이 문제로 저작권 관련 medium이 블록 당했기 때문에 조만간 관련 글을 작성하겠습니다.

커스텀 도메인을 연결하기 까지…

처음 Medium을 접했을 당시 커스텀 도메인 연결이 잠시 중단되었던 상태고, 추후 일회성으로 9만 원을 받는 것으로 바뀌더니 1년 뒤 완전히 폐지되었습니다. Medium으로 이사했을 당시 관련 내용을 쓰기도 했습니다.

Cloudflare의 Page rules를 이용해 포트 포워딩 개념으로 사용하다가 최근 Notion(노션)을 Cloudflare workers를 이용해 연결하는 것을 보고 관련 코드를 짜깁기하다 보안 문제로 막히는(?) 것을 보고 포기했었는데 최근에 Medium을 완벽하게 연결할 수 있는 서비스를 발견했습니다.

Cloudflare의 Page Rules를 통해 포워딩을 사용했던 모습
Cloudflare의 Workers에서 뭔지도 모르는 Notion 연결 스크립트 짜깁기 하다 메인까진 성공했으나, 안의 링크 클릭 시 보안 오류가 떠서 실패

이제 시작해 볼까요?

Medium에 연결하고자 하는 도메인이 Cloudflare에 추가(연결)가 되어 있는 것을 기반으로 설명을 진행하겠습니다. 정말 과정이 단순하고 쉬우므로 3분이면 바로 적용할 수 있습니다.

1. expressinstantboom 접속하기

Do It을 누르거나, 아래로 스크롤 해주세요.

우선 expressinstantboom.com/medium에 접속합니다. (꼭 뒤에 /medium이 붙여서 접속해야 합니다. 메인 도메인에선 설정을 연결하는 링크나 메뉴가 없습니다.)

Custom Domains On Medium Generator | Express Instant Boom

2. Medium Publication 주소 입력하기

1번 화면에서 DO IT 버튼을 누르거나 아래로 스크롤 하면 Medium Publication 주소를 입력하는 input box가 나타납니다. Publication을 등록하지 않았다면 medium에서 등록해 주시고 예시에 따라 입력하신 후 NEXT를 눌러주세요.

3. 연결하고자 할 Custom domain 입력

Medium Publication이 존재한다면 확인되었다는 토스트 알림과 함께 연결할 도메인을 입력하는 폼이 나옵니다. 연결할 도메인 주소를 입력해 주세요.

저는 2차 도메인(서브도메인)을 입력했으나, 단일 도메인으로 사용하실 분은 1차 도메인(메인 주소)을 입력하시면 됩니다.

4. CNAME 등록하기

연결할 Custom domain의 CNAME을 expresshacks.com으로 설정해 줘야 합니다.

Cloudflare에서 해당 CNAME을 입력한 뒤 꼭 Proxied를 설정해 줍니다. CNAME 연결은 타 서비스에서도 가능하나 이 기능을 사용하기 위해 Cloudflare 기준으로 설명을 해드린 것이며 바로 뒤에 그 이유를 알 수 있습니다.

구름아이콘을 선택해 활성화 해주세요.

5. 연결 완료

CNAME 갱신이 안되어도 걱정하지 마세요.

CNAME 확인을 못 했다는 Alert가 나타나지만 무시해도 됩니다. 원래 DNS 변경 시 퍼지는 데 시간이 걸리니까요. 1~2분 정도 후 새로 고침 하거나 시크릿 모드를 통해 연결할 도메인으로 접속하면 적용된 모습을 볼 수 있습니다.

좀 더 스크롤 하면 아래에 바로 $19를 내고 SSL 적용을 하겠느냐는 메시지가 나오는데, 우리는 4번에서 구름 모양의 Proxied를 활성화했으므로 No, Thank you를 눌러주면 됩니다.

가볍게 No, Thank you를 눌러줍니다.

Cloudflare Proxy를 통하면 자동으로 SSL이 적용되기 때문에 굳이 $19를 낼 필요가 없습니다.

SSL이 적용되어 있지 않으면 아래와 같은 화면이 보입니다.

저는 기존에 포트 포워딩을 사용했고 이때 https:// (보안 접속)을 적용했기 때문에 lab.dongri.me을 입력하면 자동으로 https://가 붙으며 위와 같은 오류가 나타납니다.

비보 안으로 접속할 때는 주소창 왼쪽에 주의 요함이라고 나타나며 우리가 중요 내용을 통신하는 것이 아니므로 문제가 될 것은 없지만, 사이트를 이용하는 사람들에게 안 좋게 보일 수 있으므로 Cloudflare의 Proxy를 통해 SSL(실제 보안 효과는 없다 하더라도)을 적용해 주는 것이 좋습니다.

적용이 잘 되는지 확인해 보기

이제 도메인이 잘 연결되는지 확인해 봅니다. 페이지 내의 링크가 *.medium.com/* 이 아닌 제 도메인으로 되어 있고, 클릭·이동해도 커스텀 도메인 기반으로 제대로 작동합니다.

도메인이 제대로 연결되었는지 확인해봅니다.
내부 링크도 잘 바뀌었습니다.

Cloudflare Business 플랜 이상 사용해야 국내 엣지를 거치기 때문에 속도가 느릴까 봐 걱정했지만, 괜찮은 속도로 잘 나와줘서 만족합니다.

RSS Feed까지 적용되지 않는 점은 아쉽지만, 그래도 커스텀 도메인 연결을 통해 자신만의 브랜딩을 표출할 수 있게 되어서 좋은 것 같습니다.

서비스가 사라지지 않고 오래오래 있어 줬으면 좋겠습니다. (Medium에서 자체 기능을 공식 제공해 주는 게 가장 좋겠지만요!)

]]><![CDATA[제주 코딩 베이스 캠프 후기]]>https://lab.dongri.me/p/jeju-coding-basecamp-reviewhttps://lab.dongri.me/p/jeju-coding-basecamp-reviewTue, 20 Aug 2019 01:01:01 GMT

카카오와 구름과 함께, 코알못에서 웹서비스 런칭까지!

약 일주일간 제주 코딩 베이스캠프에 참가했습니다. 폭염으로 가득 찬 내륙을 피해 제주도에서 디지털 노마드를 하며 공부할 수 있다는 설렘으로 가득 찼고, 실제 기대 이상으로 많은 배움을 받았는데요,

제주 코딩 베이스 캠프(이하 제코배)를 참여하고 싶은데, 어떤지 궁금하거나 살짝 망설여 지시는 분들이 계신다면 제 글을 보시고 결정하시는 데 조금이나마 도움이 되었으면 합니다.

제주 코딩 베이스 캠프에 참여하기가 어렵다면, 온라인으로 수강하는 방법 또한 있습니다. 가격도 오프라인 참가에 비해 저렴합니다.

코알못에서 웹서비스 런칭까지: 온라인 제주 코딩 베이스캠프 - 구름EDU

제코베는 5일간 front-end(html, css, JS)와 back-end(django, python) 등을 배우고 해커톤을 통해 배운 것들을 활용해 간단한 서비스도 만들고 내 실력을 검증해 볼 수 있는 캠프입니다.

제코배에 참여하기에 앞서, 저는 front-end보다는 back-end를 경험해 보고 어떻게 돌아가는지 조금이나마 배워보고 싶은 마음이 컸습니다. 저의 별 보잘 것 없는 개발 지식은 과거 제로보드4를 기반으로 PHP가 객체지향을 지원하기 딱 직전에 멈춰있기 때문입니다. (그 이상은… Never…)

front-end에서 markup만 해도 디자이너와 개발자 사이에서 각자의 전공지식 부재와 의사소통 문제로 지장이 생기는 케이스를 많이 보는데, 개발자 수준의 능력은 없어도 내가 디자인하는 서비스가 전체적인 측면에서 어떻게 구축되고 유지되는지를 알아야 디자인하는 대상에 대해 잘 이해할 수 있고 궁극적으로 디자인과 서비스의 퀄리티가 달라진다고 생각하므로 제코베에 참가하게 되었습니다.

DAY 1&2 — html, css, javascript, bootstrap

제주 카카오 본사에서 제코배 진행

귀여운 제코배 교재와 함께 제주 카카오 본사에서 수업했습니다. 정확히는 오후 수업까지는 제주 카카오에서, 저녁 수업은 근처 스마트 빌딩에서 진행했습니다.

바울랩 이호준 대표님께서 제코배에 대한 설명과, 웹페이지가 열리기까지의 대략적인 과정을 설명해 주셨습니다.

Atom 에디터를 기반으로 간단한 HTML 실습도 했는데요, Emmet을 활용해 쉽게 마크업이 가능한 점이 인상 깊었습니다. 다만 후반 교육에서는 goorm ide로 개발을 진행하는데 초반부터 goorm ide을 사용했으면 하는 아쉬움이 남았습니다. (goorm ide에서도 Emmet을 지원하고, 실시간 라이브 코딩 가능)

이호준 대표님께서 수업 초반에

질문도 수업의 일환이고,
질문과 답변을 하면서 진도를 다 마치지 못해도 과정이므로 상관없다.

이렇게 말씀하셨는데 너무 좋았습니다. 학부생 때나 외부교육을 가면 시간상 제약과 수업에 방해가 되지 않기 위해 질문하기가 많이 어렵기 때문인데요, 이 말씀 덕분에 수업하면서 궁금한 점이 생기면 거침없이 질문하고 많이 배웠습니다.

1분 코딩으로 유명한 스튜디오밀 유준모 대표님께서 바톤을 이어받아 깊이 있게 html과 CSS 수업을 맡아주셨습니다. (따로 Canvas 교육도 하시는 것 같은데, 나중에 기회가 된다면 들어보고 싶습니다. google 김종민 님이 canvas 쓰시는 거 보면 너무너무 배우고 싶습니다) 과거의 저는 시멘틱을 중요시하고 요소의 사용을 최소화(class 지양, 필요 없는 엘리트먼트 없이 최소한으로 유지) 하는 식으로 진행했었는데 구식방법이라는 것을 알게 되었습니다. 질답시간에 배운 BEM방법론을 통해 앞으로 마크업을 효율적으로 진행할 수 있으리란 기대를 해봅니다.

더불어 순수 Javascript를 쓰기가 어려워(ex_ getElementByID) jquery만 사용해 왔는데 수업을 들으며 Javascript가 jQuery와 많이 유사해지고 쓰기도 편리해져 jQuery를 지양하고 순수 Javascript로 대체해야겠다는 다짐도 해봅니다.

boostrap는 제주 스퀘어 개발자이신 범재님께서 진행해 주셨습니다. 왜 boostrap을 사용하는지, 기본적으로 사용하는 요소들의 설명과 실습을 진행했습니다. 특히 나중에 복습이 가능하도록 별도의 노션으로 정리해 사전에 배포해 주신 점이 좋았습니다..

DAY 3&4 — python, django, git

직간접적으로 C, C#, Arduino, Processing(java 기반), PHP, Javascript를 써보면서 어쨌든 아주 비슷비슷했는데 Python은 배우면서 정말 고생했습니다.

쓰기 편하다고 하는데… 저는 아닌 거로…

별도로 컴퓨터에 설치하고 세팅했다면 진작 포기했을 텐데, goorm ide만 가지고 컨테이너 생성을 하면 알아서 다 설치된 상태에서 코딩만 하면 됐기에 좋았습니다.

새 언어를 배운다면 순차적으로 처리? 하는 과정을 머리로 생각하기 어려워 직접 하나하나 써보며 진행하기도 하는데 직접 파이썬 수업을 진행하시면서 어떻게 동작 하는지에 대한 과정을 하나하나 보여주신 점이 인상 깊었습니다.

수업 예시로 진행하는, “제주 카페 찾기”

python과 django 연동을 통해 웹서비스를 구축하는 수업에서는 사전에 주어진 템플릿을 구축하며 실습해 보는 식으로 진행되었습니다. 4일 차부터는 번아웃으로 수업을 이해하기보다 설명하는 명령어를 입력하며 따라하기 바빴습니다..

과거엔 개발자들이 미리 세팅된 환경에서 개발만 했다면, 요즘엔 Docker의 컨테이너나 Xen 서버를 구축해서 직접 개발자가 작업환경을 세팅하고 서비스를 개발하는 추세인 것 같습니다.

apt-get과 같은 명령어인 pip을 사용하는데, 과거 firebase를 설치하기 위해 명령 프롬프트 창에 npm을 쓰는 것과 비슷해 신기했습니다. (아 요즘은 이렇게 하는구나…)

정적인 요소를 별도로 분리하고, 텍스트큐브나 텀블러 테마처럼 {}로 이루어진 치환자를 통해 개발하는 점이 인상 깊었습니다.

git은 sourcetree를 가지고 진행하는 것 같으나, 해당 수업 때 자리가 없어서 참여하지 못한 점은 아쉬웠습니다. 다만, 범재 님께서 이 역시 사전에 노션에 정리해 PDF와 함께 공유해주셨으므로 주말에 찬찬히 공부해 보려고 합니다.

제코배 참가자 대부분이 개발 전공 혹은 사전에 다양한 지식을 가지신 분들이라 수업을 진행하는 데 무리가 없겠지만, 저와 같은 비전공자들은 python과 django 을 이용한 서비스 구축 부분을 이해하려면 사전에 서버와 해당 언어(?)에 대한 사전지식 및 공부가 돼 있어야 이해하며 원활한 수업이 가능할 것으로 생각됩니다. (너무너무 어렵습니다. 😢)

DAY4.5, 5 — hackathon

참관자격이라 참여하지는 못했지만, 해커톤에 한 번도 참가해 본 적이 없어 참가팀들의 결과물이 매우 궁금했습니다.

수업 둘째 날부터 팀을 꾸려 미리 개발을 시작한 팀도 있었고, 열기가 뜨거웠습니다. 넷째 날 수업 중간 7개의 팀을 공식으로 꾸려 1박2일(?) 해커톤이 진행되었습니다.

초상권 문제로 사진을 첨부하진 못했지만, 평가 전날 24시 카페에서 각각의 팀들이 열정 가득 뜨겁게 해커톤을 진행하는 모습을 보며 많은 것을 느꼈습니다.

해커톤 결과물을 심사하시는 심사위원들

심사 직전까지도 다들 결과물을 다듬느라 분주했고, 발표 목소리의 미세한 떨림에 저 또한 긴장감을 가지고 발표 슬라이드 장면 하나하나 주의 깊게 보았습니다. 하루 만에 결과물을 만들어 냈다는 점에 놀라기도 했고요…

수상자가 발표되고, 서로 박수치며 격려하며 제코베가 마무리되었습니다.

강렬한 제주도의 노을과 함께 제주 코딩 베이스캠프의 마무리

여담 및 마무리

중간에 카카오 개발자 두 분의 강의가 있었습니다. 자사 API 및 회사 소개에 대한 내용이었으며, 본사 투어도 했습니다. (본사는 외부만 둘러보는 게 아쉬웠음)

수업 중간 호준 님께서 제코배 참가자들에게 커피를 사주셨는데, 독특하고 매우 맛있습니다. 카페 이름은 모르지만, 유자가 들어간 아메리카보다는 저게 좋았습니다. 또 바로 옆에 조그마한 전시관이 있으니 둘러보시는 것도 좋습니다.

제코배 후원 goorm 머그컵

제코배에서 받은 goorm.io 제주 머그컵. 질도 좋고, 집에 가져가서 잘 쓰고 있습니다.

A’BOUT라는 제주에만 있는 카페체인점인데 오전 10시까지 모든 음료 1,400원에 브랜딩도 잘돼 있고 커피도 맛있습니다. 아침 수업 시작할 때 주위를 둘러보면 다들 A’BOUT 커피를 손에…

가장 기억에 남는 장면

제코베 수업이 끝난 후, 카페에서 별도로 수업 내용을 복습하기도 했습니다.

전공이 아니라 깊이 있는 이해 없이 인터넷에 있는 조각들로 공부해 왔는데 팀을 꾸려 수업 내용을 복습하고 궁금한 점은 질문을 통해 해소할 수 있었던 점이 가장 좋았습니다. (이날 몇 년 치 묵은 개발 관련 질문을 모두 해소했습니다.)

영화 라따뚜이 레미

영화 라따뚜이에서 레미가 동경하는 구스토가 TV에서 하는 말이 있습니다.

꿈을 꾸세요.
재능이 있다면, 능력이 있다면,
당신이 어떤 사람이어도 할 수 있을 거예요!

당연히 타 전공·업무를 맡고 있어 실무 개발자처럼 될 수는 없지만, 이번 제주도 코딩 베이스캠프를 통해 개발을 대하는 어려움과 두려움을 떨쳐낼 수 있었습니다. 또 (예제를 따라 하는 수준이지만) 수업을 통해 직접 웹 서비스를 발매하기도 했고요…

게임업계에서는 디자이너 또한 개발자라고 부릅니다. 하는 일은 다르지만, 밀접히 연관되어 있고 두 가지 모두 합쳐서 하나의 서비스를 만들어 내기 때문입니다. 개발자가 되지 않더라도, 제코배에서 배운 경험을 통해 개발자와 소통할 수 있는 디자이너가 되고자 합니다.

5일간의 여정을 끝내고, 다시 현실로… 😫

]]><![CDATA[jQuery 지양하기]]>https://lab.dongri.me/p/avoid-jqueryhttps://lab.dongri.me/p/avoid-jqueryMon, 19 Aug 2019 01:01:01 GMTYou (Might) Don’t Need jQuery

웹에이전시에서 작업한 사이트들을 살펴보면 jQuery 기반입니다. 심지어 1.x 대를 아직 사용하는 곳도 있고요… (IE 6 지원 때문이라기엔 사용한 CSS가 지원 안 함)길고 어려운 Javascript 때문에 플러그인도 많고 상대적으로 쓰기 쉬운 jQuery를 많이 사용해 왔으나 요즘 추세가 탈 jQuery이므로 저 또한 jQuery 대신 순수 Javascript(ES 숫자로 버전을 나누는 것 같지만 잘 모르므로)를 사용하는 시도를 하고 있습니다.

확실히 과거에 비해 현재 Javascript는 jQuery와 비슷해진 부분이 많고 쓰기도 쉬워졌습니다.

학습을 위하거나 포트폴리오 등 시간에 구애받지 않는 프로젝트라면 부담이 덜할 텐데, 실무에 이를 적용하려 하니 여러 자료도 살펴봐야 하고 오류 났을 때의 소요 시간이며 여러모로 부담되는 점이 많습니다.

그러다가 괜찮은 서비스(혹은 프로젝트?)를 찾아 다른 분들과 함께 나누고자 합니다.

You Dont Need jQuery

You Might Not Need jQuery

오늘날 프론트엔드 개발 환경은 급격히 진화하고 있고, 모던 브라우저들은 이미 충분히 많은 DOM/BOM API들을 구현했습니다. 우리는 jQuery를 DOM 처리나 이벤트를 위해 처음부터 배울 필요가 없습니다. React, Angular, Vue같은 프론트엔드 라이브러리들이 주도권을 차지하는 동안 DOM을 바로 처리하는 것은 안티 패턴이 되었고, jQuery의 중요성은 줄어들었습니다. 이 프로젝트는 대부분의 jQuery 메소드의 대안을 IE 10 이상을 지원하는 네이티브 구현으로 소개합니다.

노트: jQuery는 여전히 훌륭한 라이브러리이며 많은 유즈 케이스를 갖고 있습니다. 원하지 않으신다면 마이그레이트하지 않으셔도 됩니다.

외국에서도 jQuery를 탈피가 대세인가 봅니다. 지금도 여전히 jQuery가 훌륭한 라이브러리지만, 그 중요성이 많이 퇴색했으므로 네이티브로 구현하자는 게 취지 같습니다.

한국어 문서 또한 있습니다.

nefe/You-Dont-Need-jQuery

사용법은 매우 간단합니다.

input box에 jQuery에서 사용하던 함수(?)를 적거나 네이티브 함수를 입력하고 하단의 IE지원 여부를 선택하기만 하면 됩니다.

그러면 위와 같이 1:1로 비교해 대체할 수 있는 함수를 쉽게 확인할 수 있습니다.

jQuery가 그리울 때

jQuery에서는 class에 대해 $(“.class”) 하나만으로 해당하는 엘리트먼트에 이벤트를 적용하거나 효과를 줄 수 있습니다. 반면 네이티브에서는

querySelectorAll

이 녀석을 사용해야 합니다. 그냥 querySelector 를 사용하면 최상단에 적용된 요소만 지정되기 때문입니다.

더 불편한 것은 querySelectorAll을 사용했다 해서 이벤트를 먹인다고 모든 요소에 이벤트가 적용되는 것이 아니라 for 문으로 배열 하나하나에 이벤트를 지정해야 한다는 점입니다.

const imgSliderNext = document.querySelectorAll("ul.sliderControl button.next");

for (let i = 0; i < imgSliderPrev.length; i++) {
  imgSliderPrev[i].onclick = (() => {
    imgSlider.goTo("prev");
  });
}

이게 아닐 수도 있지만, 인터넷 찾아보니 이렇게 사용하는 것 같습니다.

또, 원하는 효과나 방식을 검색해 나오는 stack overflow 답변의 코드가 jQuery가 압도적으로 많습니다. jQuery에 해당하는 부분을 일일이 바꿔줄 수는 있지만, 코드가 복잡하거나 어려울 땐 Copy & Paste가 불가능합니다.

또 plugin으로 한 번에 구현이 가능한데, 그러질 못해 대안을 찾아야 할 때 jQuery가 그립습니다.

]]><![CDATA[CSS Position Sticky]]>https://lab.dongri.me/p/css-position-sticky-guidehttps://lab.dongri.me/p/css-position-sticky-guideSat, 17 Aug 2019 14:55:57 GMTSticky로 독특한 인터랙션(구동 효과) 주기

요즘 새로 진행하고 있는 프로젝트의 마크업을 담당하면서, 랜딩 구동 효과 구현을 위해 position의 Sticky 속성을 사용하고 있습니다. Sticky라는 속성이 있다는 것은 알았지만 어떻게 동작하는지, 또 어디다 사용할 수 있는지 몰랐었는데 이번에 활용하면서 다양한 인터렉션에 활용할 수 있음을 알게 되었고 이에 대한 경험을 다른 분들과 함께 나누고자 합니다.

Sticky는 뭐하는 속성일까?

웹페이지 스크롤 시, Sticky가 적용된 엘리트먼트의 부모 요소의 height 범위 내에서는 fixed(고정)로 작동되지만, 그 외의 경우에는static으로 동작하게 하는 속성입니다.

스크롤 시에, 부모 범위 안에서는 fixed가 되고 그 밖의 범위에서는 fixed가 되지 않습니다.

이미지만으로 이해하기 어렵다면, CODEPEN에 있는 예제로 직접 체험해 볼 수 있습니다.

Positon Sticky
CSS Position Sticky — How It Really Works!, Elad Shechter

Sticky를 사용할 때의 큰 어려움은 없습니다. 고정하고 싶은 요소에 다음과 같이 선언해 주기만 하면 됩니다.

position: -webkit-sticky; 
position: sticky;

현시점에서 모든 브라우저(IE 미지원, edge 16 이상)에서 지원하나, safari에서 그냥 Sticky로는 적용이 불가능하기 때문에 -webkit- prefix를 추가로 붙였습니다. 참고로 부모 요소의 height 범위 내에서만 Sticky가 동작하기 때문에 scroll이 가능할 만한 충분한 높이가 있어야 합니다.

어떻게 활용 가능한가요?

영문권역 사이트의 예제는 과거 iOS에서 많이 사용하던 알파벳(혹은 가나다) 카테고리 혹은 GNB&LNB로 가리킵니다. 이렇게만 보면 사용할 일이 생각보다 적겠구나 할 수 있겠지만 그렇지 않습니다. Javascript로만 표현할 수 있을 것 같은 상호작용을 sticky로 쉽게 구현할 수 있습니다!

kwangmyung.org
plus-x lpoint
vinylc

위 3개 예시 인터렉션 모두 CSS Sticky로 대체 가능하지만, 아쉽게도 Javascript를 사용해 구현되어 있습니다. (물론 fade in-out, 내용이 바뀌는 등의 구동은 Javascript를 사용해야 합니다.)특히 l.Point의 경우 스크롤을 위아래로 바꿀 때 튕기는 버그가 있는데 CSS Sticky를 활용한다면 쉽게 해결할 수 있습니다.

apple iPhone XS 프로모션

apple iPhone XS 프로모션 사이트의 일부분인데, 실제로 저 부분을, 개발자도구를 사용해 살펴보면 Sticky를 사용해 구현한 것을 볼 수 있습니다.

Sticky를 활용한 예시

git.dongri.me/example/sticky/

Sticky를 이용한 예시를 제작했습니다. 스크롤 위치 (뷰포트 범위내에 특정 엘리트먼트가 존재하는지 여부)와 이미지 변경 및 슬라이드를 위한 Javascript만 사용되었을 뿐, 화면에 고정되는 효과는 Sticky만 이용했습니다.

css

@charset "UTF-8";
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:""}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}

html { min-width: 1400px; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; scroll-behavior: smooth; }
body { font-family: "Spoqa Han Sans", "Roboto", sans-serif; color: #1a1d33; }
div.wrap { width: 1400px; padding: 0 50px; margin: 0 auto; position: relative; box-sizing: border-box; }

section#intro { background: #f5f7fa url("../images/bg_intro.png") 50% 50%; width: 100%; height: 100vh; overflow: hidden; }
section#intro div.wrap { position: relative; top: 50%; transform: translateY(-50%); z-index: 1; }
section#intro header { padding-left: 268px; }
section#intro header:after { width: 100%; height: 2px; background: #1a1d33; position: absolute; left: -1060px; top: 157px; content: ""; display: block; }
section#intro header h1 { font-size: 93px; font-weight: 900; line-height: 80px;  }
section#intro header h1 span { display: block; color: transparent; text-stroke: 2px #1a1d33; -webkit-text-stroke: 2px #1a1d33; }
section#intro header p { font-size: 15px; position: absolute; top: 56px; left: 695px; }
section#intro h2 { font-size: 28px; font-family: "NanumSquare", sans-serif; font-weight: 700; letter-spacing: 10px; line-height: 41px; position: absolute; top: 6px; left: 50px; }
section#intro h2 span { font-size: 15px; font-weight: 400; letter-spacing: 0; vertical-align: top; line-height: 30px; }
section#intro ul { margin-top: 50px; }
section#intro li { margin-top: 16px; }
section#intro li:first-child { margin: 0; }
section#intro dt { font-size: 15px; font-weight: 500; line-height: 20px; }
section#intro dd { font-size: 14px; font-weight: 400; color: #6d6d6d; line-height: 20px; }
section#intro a.scroll { text-indent: -999999px; display: block; position: relative; bottom: -145px; border-radius: 9px; border: 1px solid #1a1d33; width: 18px; height: 32px;  }
section#intro a.scroll:after { background: #1a1d33; width: 2px; height: 5px; border-radius: 2px; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); display: block; content: ""; animation: scrollAni 1.3s infinite .2s;  }

@keyframes scrollAni { 0% { transform: translateY(0); } 100% { transform: translateY(5px); opacity: 0; } }

section#contents { background: #fff; background-size: contain !important; width: 100%; margin-top: 50vh; min-width: 1400px; }
section#contents hr { display: none; }
section#contents div.wrap { position: relative; margin: 0 auto; min-width: 1400px; padding-bottom: 5vh; }

section#contents div.imgSlider { width: 796px; height: 467px; box-shadow: 0 0 54px 0 rgba(0, 0, 0, .2); position: sticky; top: 50%; transform: translateY(-50%); background: #fff; }
section#contents div.imgSlider div.nav { position: absolute; z-index: 99; right: -78px; bottom: 77px; background: #fff; height: 70px; width: 225px; transform: rotate(-90deg); }
section#contents div.imgSlider p.title { color: #313131; font-size: 12px; line-height: 70px; position: absolute; top: 0; left: 25px; text-align: left; }
section#contents div.imgSlider p.num { color: #b3b3b3; font-size: 11px; line-height: 70px; position: absolute; top: 0; right: 25px; text-align: left; letter-spacing: 1px; }

section#contents div.imgSlider button { display: none; }
section#contents div.imgSlider div.slider div.tns-item { width: 796px; height: 467px; }

section#contents div.title { padding: 50px 0 0 860px; width: 1400px; margin: 0 auto 80vh auto; box-sizing: border-box; position: relative; z-index: 0; }
section#contents div.title:nth-of-type(2) { margin-top: -17vh; }
section#contents div.title:last-child { margin: 0 auto 25vh auto; }
section#contents div.title:after { position: absolute; content: ""; font-size: 65px; font-weight: 800; color: #f1f1f1; display: block; top: 0; margin-left: -3px; z-index: -1; }
section#contents div.title.ideafestival:after { content: "MICRO WEB"; }
section#contents div.title.at:after { content: "UI WEB"; }
section#contents div.title.mobile:after { content: "MOBILE UIX"; }
section#contents div.title h2 { font-size: 35px; font-family: "NanumSquare", sans-serif; line-height: 44px; font-weight: 300; }
section#contents div.title h2 strong { font-weight: 800; display: block; }
section#contents div.title p { margin-top: 20px; font-size: 16px; line-height: 24px; color: #3e3e3e; font-weight: 400; }
section#contents div.title a { display: inline-block; margin-top: 35px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 400; padding: 13px 18px 13px 72px; background: #121e54 url("../images/bg_arrow.svg") 18px 50% no-repeat; background-size: 41px; transition: background-color .3s; }
section#contents div.title a:hover, section#contents div.title a:focus { background: #1b2b72 url("../images/bg_arrow.svg") 18px 50% no-repeat; background-size: 41px; }

section#contents div.title ul.sliderControl { list-style: none; margin-top: 80px; text-align: right; padding-right: 120px; box-sizing: border-box; }
section#contents div.title ul.sliderControl li { display: inline-block; margin-right: 15px; }
section#contents div.title ul.sliderControl li:last-child { margin: 0; }
section#contents div.title ul.sliderControl li button { outline: 0; cursor: pointer; display: block; width: 12px; height: 20px; text-indent: -999999px; padding: 16px 10px; border: 0 none; background: none; opacity: .4; transition: opacity .2s; }
section#contents div.title ul.sliderControl li button:hover, section#contents div.title ul.sliderControl li button:active { opacity: 1; }
section#contents div.title ul.sliderControl li button:active { transform: translateY(1px); }
section#contents div.title ul.sliderControl li button.prev { background: url("../images/bg_leftArrow.svg") 50% 50% no-repeat; background-size: 11px; }
section#contents div.title ul.sliderControl li button.next { background: url("../images/bg_rightArrow.svg") 50% 50% no-repeat; background-size: 11px; }

footer { padding: 20px 10px; border-top: 1px solid #eee; font-size: 12px; color: #4d4d4d;  }
footer address { width: 1400px; margin: 0 auto; display: block; box-sizing: border-box; padding: 0 50px;  }

HTML

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>Dong-gri Handicraft</title>
  <meta name="author" content="dongri.me" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,600,700,900&display=swap" />
  <link rel="stylesheet" href="https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css" />
  <link rel="stylesheet" href="./common/css/style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/tiny-slider.css" />
  <script src="common/js/common.js"></script>
</head>
<body>
  <section id="intro">
    <div class="wrap">
      <header>
        <h1><span>DONGRI</span>HANDICRAFT</h1>
         <p>— 2019.08.10</p>
      </header>
      <h2>주니어<br />디자이너,<br />동그리<span>dongri</span></h2>
      <ul>
        <li>
          <dl><dt>MICRO WEB.</dt><dd>Ideafestival</dd></dl>
        </li>
        <li>
          <dl><dt>PC WEB.</dt><dd>Audio-technica</dd></dl>
        </li>
        <li>
          <dl><dt>MOBILE UI.</dt><dd>Shopick</dd></dl>
        </li>
        <li>
          <dl><dt>MOBILE UI.</dt><dd>Brothumb<i>!</i></dd></dl>
        </li>
      </ul>
      <a href="#contents" class="scroll">scroll</a>
    </div>
  </section>
  <section id="contents">
    <div class="wrap">
      <div class="imgSlider">
        <div class="nav"><p class="title">전경이미지</p><p class="num"><span class="current">1</span>/<span class="total">3</span></p></div>
        <div class="slider">
          <div><img src="./common/images/img_ideafestival01.jpg" alt="" /></div>
          <div><img src="./common/images/img_ideafestival02.jpg" alt="" /></div>
          <div><img src="./common/images/img_ideafestival03.jpg" alt="" /></div>
          <div><img src="./common/images/img_ideafestival04.jpg" alt="" /></div>
        </div>
      </div>
      <div class="title ideafestival">
        <h2>더 나은 미래를 위한 <strong>IDEAFESTIVAL</strong></h2>
        <p>SK 이노베이션이 기업을 대표하는 사회공헌 프로그램 <br />Ideafestival과 자사 홍보를 위한 <br />마이크로 웹 사이트 프로젝트를 진행했습니다.</p>
        <a href="https://ideafestival.dongri.me/" target="_blank" rel="noopener">LAUNCH PROJECT</a>
        <ul class="sliderControl">
          <li><button class="prev">prev</button></li>
          <li><button class="next">next</button></li>
        </ul>
      </div>
      <hr />
      <div class="title at">
        <h2>음악에 대한 사랑과 열정으로 <strong>AUDIO-TECHNICA</strong></h2>
        <p>일본을 대표하는 정통 오디오 명가인 audio-technica의 <br />한국어 PC·MOBILE UI WEB 컨셉 디자인 프로젝트를 진행했습니다.</p>
        <a href="https://at.dongri.me/" target="_blank" rel="noopener">LAUNCH PROJECT</a>
        <ul class="sliderControl">
          <li><button class="prev">prev</button></li>
          <li><button class="next">next</button></li>
        </ul>
      </div>
      <hr />
      <div class="title mobile shopick">
        <h2>V COMMERCE SERVICE <strong>SHOPICK</strong></h2>
        <p>SHOPICK은 SNS을 활용한 인플루언스 마케팅에 <br />착안해 비디오를 결합한 신개념 모바일 V 커머스 <br />쇼핑 플랫폼입니다.</p>
        <a href="https://portfolio.dongri.me/uix/shopick/" target="_blank" rel="noopener">LAUNCH PROJECT</a>
        <ul class="sliderControl">
          <li><button class="prev">prev</button></li>
          <li><button class="next">next</button></li>
        </ul>
      </div>
      <hr />
      <div class="title mobile brothumb">
        <h2>V COMMERCE SERVICE <strong>Brothumb<i>!</i></strong></h2>
        <p>SHOPICK은 SNS을 활용한 인플루언스 마케팅에 <br />착안해 비디오를 결합한 신개념 모바일 V 커머스 <br />쇼핑 플랫폼입니다.</p>
        <a href="https://portfolio.dongri.me/uix/shopick/" target="_blank" rel="noopener">LAUNCH PROJECT</a>
        <ul class="sliderControl">
          <li><button class="prev">prev</button></li>
          <li><button class="next">next</button></li>
        </ul>
      </div>
    </div>
  </section>
  <footer>
    <address>© Dong-gri All rights reserved.</address>
  </footer>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/min/tiny-slider.js"></script>
<script src="./common/js/scrollMonitor.js"></script>
<script src="./common/js/common.js"></script>
</html>

원래 jQuery를 사용하다가, 제주도 코딩 베이스캠프(제코배) 이후 DOM만을 이용하려고 하다 보니 많이 어렵기도 하고, 적응이 안 되어 이미지 슬라이드 부분에 약간의 버그가 존재합니다. 그 점은 감안하고 봐주시면 감사하겠습니다.

CSS만으로도 효과적인 구동 효과(인터랙션)이 가능

이전에는 Javascript만을 사용해 하나하나 구현해야 했다면, 날이 갈수록 CSS의 성능과 다양한 속성들이 추가됨에 따라 CSS만으로 효과적인 구동 인터랙션을 줄 수 있게 되었습니다.

완전히 Javascript를 배제하긴 어렵고, 브라우저 하위 호환성도 고려해야 하지만 국내 에이전시에서 구축한 사이트와 해외 웹 사이트들의 화려한 인터랙션을 살펴보며 CSS로 대체할 수 있는 부분을 연구하면서 조금씩 활용한다면 좋을 것 같습니다.

]]><![CDATA[구름 IDE(goorm IDE) git 연동하기]]>https://lab.dongri.me/p/goorm-ide-git-setuphttps://lab.dongri.me/p/goorm-ide-git-setupMon, 15 Jul 2019 15:00:00 GMT기존의 InteliJ를 사용하다가 (큰 작업은 InteliJ / 간단한 단일 파일 수정은 VS Code 혹은 Brakect) 구름 IDE를 사용하고 있습니다.

가장 큰 장점은, 작업물이 클라우드에 올라가 있어 일부 javascript (jQuery기준 .load) 함수를 사용하면 로컬 크로스에 막혀 별도의 명령어로 풀어서 실행해야 하는 불편함이 감소한다는 것이고, 또 한글을 완벽하게 지원한다는 점입니다.

전문가들은 기본기가 있어서 크게 불편은 없겠지만, 지식이 약한 저 같은 초보들은 도움말이 있어도 접근하기가 난해해 이번에 git을 연동한 경험과 정보를 글로 남겨 다음에 다른 분들에게 도움이 되었으면 합니다.

git 연동 컨테이너 생성하기

로그인 후 MY 구름 IDE로 이동합니다.
새 컨테이너를 생성합니다.

goorm IDE는 초반 컨테이너 생성 시에 git과 연결이 되어있지 않으면 다음에 연결이 불가능합니다. 따라서 이미 컨테이너 생성이 돼 있으시다면 새로 생성해 주셔야 합니다.

소스에서 Github을 선택하시고, Github의 아이디와 비밀번호를 입력한 뒤 목록 가져오기를 통해 프로젝트를 선택합니다.

gitLab 등의 타 서비스는 이용해 보지 않아서 모르겠지만, 그런 경우에는 3번째 Git/SVN 라디오버튼을 체크하신 뒤 진행하시면 되지 않을까 싶습니다.

또한 이때 git 로그인 정보가 내부 프로젝트에 평문으로 저장되므로, 혼자서 개발하는 것이 아닌 다른 사람들과 함께 작업한다면 별도의 git 계정을 생성하는 것을 권장합니다.

입력 정보를 다 작성하신 뒤 생성을 누르면 일명 뚝딱이가 나타나고 잠시 기다리면 컨테이너 생성이 완료됩니다.

git commit

작업하신 후, 탭 메뉴의 소스코드 관리 > git > Commit을 통하거나,
퀵 메뉴의 COMMIT를 통해 소스코드를 commit 할 수 있습니다.

변경 사항이 있다면, 리스트에 나타나고 commit 하고자 하는 파일을 선택한 뒤, 우측 하단의 주황색 commit 버튼을 클릭합니다.

변경 사항을 textarea에 입력한 뒤 확인을 누르시면 github에 반영이 됩니다. 또한 Log tab을 통해 반영 사항을 볼 수 있습니다.

컨테이너를 생성했는데, git이 비활성화 되어있어요!

제가 처음에 비활성화로 나타나서 당황했었습니다.
지금은 이와 관련된 해결책을 찾아 원활하게 연동해 사용 중입니다.

프로젝트 탭에서 속성으로 이동합니다.

소스 코드 관리로 이동해 SCM 설정에서 유형 Git 선택, 유저이름과 패스워드 란에 github 계정정보를 입력하고 인증하시면 이용이 가능합니다.

]]><![CDATA[Windows 10 이미지 미리보기 오류 해결하기: 원인과 해결 방법]]>https://lab.dongri.me/p/windows-10-thumbnail-preview-fixhttps://lab.dongri.me/p/windows-10-thumbnail-preview-fixSat, 24 Feb 2018 09:35:23 GMT
파일 확장자에 따라 (혹은 복불복으로) 안 나오는 이미지 미리보기

어느 순간부터 나타나지 않는 이미지 미리보기

Photoshop이나 Illustrator로 작업을 하다 보면, 벤치마킹 혹은 사용하려고 두었던 이미지를 Drag & Drop으로 가져와야 할 경우가 많습니다. 주로 인터넷에서 다운로드 한 파일이라 파일이름이 복잡(해시값)한지라 주로 윈도우 탐색기에서 이미지를 미리 보면서 가져옵니다.

그런데 어느 순간부터 이미지 미리보기가 나타나지 않기 시작했습니다. 이는 탐색기뿐만 아니라, 그래픽 툴의 ‘열기(혹은 가져오기) 옵션’에서도 동일한데요, 명령 프롬프트 창에서 sfc /scannow 명령어를 날려도 정상이라고만 나타납니다.

하지만, 우리는 윈도우 어느 부분이 꼬여서 안 나온다는 것을 이미 잘 알고 있죠. 그저 포맷해야 한다는 현실을 부정하고 싶을 뿐…

Windows 포맷을 해도 또다시 안 보이기 시작한 미리보기

한창 재학 중이라 여러 작업을 진행하며 동시에 포트폴리오까지 준비중 이어서 어쩔 수 없이 포맷을 못 하다가 이번에 포맷했습니다.

다시 원상태로 미리보기가 잘 나오는가 싶더니 금일 작업하려 탐색기를 열어보니 또다시 미리보기가 나오지 않습니다. 포맷을 한지 일주일도 채 되지 않은지라 깊은 빡침이 몰려오는 순간, 구글링을 통해 문제 해결 방법을 찾았고 성공했습니다.

우리는 답을 찾을것이다 언제나 그랬듯이

영화 ‘인터스텔라’ 명대사
윈도우10 폴더 사진 미리보기 이미지 오류 해결하기

친절한효자손 님이 작성하신 글을 통해 문제를 잘 해결할 수 있었습니다. 레지스터리 문제였고, 일부 삭제 및 값을 추가한 뒤 재부팅하는 방법입니다. 관련된 내용은 원글 (rgy0409.tistory.com/2175)를 참고하시면 됩니다.

Windows 10 이미지 미리보기 오류 해결 레지스터리 파일

프로그램을 이것저것 설치하며 윈도우를 사용하다 보면, 안 그래도 복잡한 레지스터리에 여러 값이 쌓여 더 복잡해지고 경로를 찾아다니기가 힘들어집니다. 또한 컴퓨터 응용 능력이 부족하신 분들은 잘못 건들이다가 고장 날까 봐 겁내시는 경우도 많고요…

다음 동일한 문제 발생 시 쉽게 해결하기 위해서 레지스터리 파일(.reg)을 간단하게 만들어봤습니다. 그냥 다운받아서 실행하여 적용하신 후 재부팅하기만 하시면 됩니다.

다운로드

윈도우 탐색기 이미지 미리보기 오류 해결 레지스터리 다운로드하기

좌: 레지스터리 패치 적용하기 전 / 우: 적용한 후 정상적으로 나오는 화면

저는 일반 PC에 익숙해져 있고 편해하는지라 Windows를 사용하고는 있지만,
이런 자잘한 문제를 보면 OSX를 쓰고 싶다는 생각이 불끈불끈 솟네요.

]]><![CDATA[KT WiFi 보안망 접속불가 프로파일: 원인과 해결 방법]]>https://lab.dongri.me/p/kt-wifi-secure-profile-fixhttps://lab.dongri.me/p/kt-wifi-secure-profile-fixFri, 24 Nov 2017 17:21:28 GMT얼마 전 기존에 사용하던 iPhone 6을 떠나보내고, KT 공식 온라인 샵을 통해 iPhone7을 구매했습니다.

제품도 원하던 대로 잘 왔고 개통도 잘 되었습니다. 그러나 문제가 생겼는데 바로 KT에서 제공하는 WiFi 보안망 접속이 안 되는 것이었습니다.

KT WiFi 보안망 접속 시 ID와 PW 요구

보안망 접속 시에 아이디와 비밀번호를 요구하는 창이 뜹니다. 아쉽게도 문제 되는 화면의 스크린샷을 찍지 못해 Google 검색을 통해 비슷한 상황인 스크린샷을 퍼왔습니다.

좌: 구 iOS에서의 화면 / 우: 신 iOS에서의 화면

물론, 공개만으로는 인증 없이 접속이 잘 되지만 비 보안망을 사용할 경우 보안에 좋지 못하기 때문에 되도록 지양해야 합니다.

위와 같은 문제는 두 가지로 나누어 볼 수 있습니다.

  1. 공식 대리점을 통한 것이 아닌, 직접 구매한 단말기를 개통한 경우

  2. USIM 칩 문제

1번은, 이 포스트에서 설명하는 프로파일을 적용한다고 해서 해결되는 것이 아니라 KT 고객센터를 통해 iPhone의 MAC Address를 등록해야 합니다.

2번은 USIM칩의 문제로 사료되는데, 1년 이내 구매한 USIM은 무상 교환이 가능하나 1년이 넘은 경우에는 약 8,800원을 주고 새로 구입해야 합니다. USIM 자체의 고장보단 기존에 사용하던 USIM은 그대로, 새로운 단말기(KT를 통해 구입한 단말기)로 옮길 때에 발생합니다. 이 경우는 개통 시 자동으로 KT 전산에 MAC Address가 등록되지만, USIM에는 적용이 안 되는지 보안 접속이 되지 않습니다.

저는 2번의 경우였고, USIM을 새로 구입하는 것은 아닌 것 같아 해결 방법을 찾아보았습니다.

KT에서 배포한 WiFi 프로파일 설치

가장 손쉬운 방법은 고객센터를 통해 해당 민원을 제기하고 프로파일만 받으면 되는데, 상담원이 따라서 다르긴 하지만 대다수가 잘 모르고 이유는 모르겠지만 잘 안 해주려고 합니다. 물론 인터넷에 같은 증상을 겪은 이용자들이 올린 해결책이 있지만 적용할 수가 없습니다.

인터넷에 공유되고 있는 프로파일은 접속 불가능

출처 — https://www.clien.net/service/board/lecture/3190578

동일한 문제를 가진 이용자들이 과거 KT에서 받은 프로파일을 공유한 글을 많이 볼 수 있는데, 도메인 주소가 만료돼서 더 이상 접속을 할 수가 없습니다.

고객센터를 통해 프로파일을 제공받아도, 17년 11월부터는 사용 못해

현재, 지하철 등 공공장소에 가면 기존의 Olleh WiFi 외에도 KT Wifi, KT GiGA WiFi 라는 이름의 SSID를 볼 수가 있는데요, KT가 Olleh 브랜드를 버리면서 이에 따라 SSID도 변경하며 생긴 새로운 SSID입니다.

2017년 11월을 기준으로 KT 와이파이는

  • ollehWiFi, olleh GiGA WiFi (KT 고객 전용, 2017년 11월부터 순차적으로 송출 종료 예정)

  • KT_Free_WiFi (개방형, 공공장소 및 대중교통 객실에서 송출)

  • KT, KT WiFi, KT GiGA WiFi (KT 고객 전용, 2017년 11월부터 송출)

  • KT_starbucks, KT-starbucks (개방형, 국내 스타벅스 매장에서 송출)

역시나 나무위키에 따르면, 기존의 OllehWiFi를 11월부터 순차적으로 종료할 예정이라고 합니다.

하지만, 여전히 KT 고객센터에서는 이를 반영하지 않은 기존 OllehWiFi 프로파일만 배포합니다.

KT WiFi, KT GIGA WiFi 프로파일 배포

그래서 제가 고객센터를 통해 받은 프로파일을 기반으로 KT WiFi와 KT GIGA WiFi에 접속할 수 있도록 수정하였습니다. 더불어 기존 KT에서 받은 Olleh WiFi 프로파일 또한 공유하려고 합니다.

다음의 주소를 iPhone Safari를 통해 프로파일을 설치하시면 됩니다. 반드시 Safari를 통해 접속하셔야 프로파일을 설치할 수 있습니다.

KT WiFi PROFILE 다운로드하기

설치 방법

혹시라도 접속이 안 되는 사태를 방지하기 위해, OllehWiFi (고객센터에서 제공받은 파일 그대로)를 포함 총 3개의 프로파일을 설치하시면 됩니다.

  1. olleWiFiSetting.mobileconfig —기존 KT에서 배포한 Olleh WiFi용 프로파일

  2. ktWiFiSetting.mobileconfig — KT WiFi용 프로파일

  3. ktGIGAWiFiSetting.mobileconfig — KT GIGA WiFi용 프로파일

설치를 누르시고, 자신의 iPhone 비밀번호를 입력합니다.
이어서 설치 버튼을 눌러 프로파일 설치를 완료합니다.

설치하신 후 환경설정에서 네트워크 초기화를 한번 진행해 주셔야 합니다. 단, 이때 저장된 WiFi 설정들이 초기화됩니다.

일반 > 재설정 > 네트워크 설정 재설정

프로파일 설치 완료

3개의 프로파일을 모두 정상적으로 설치했다면 다음과 같이 나타납니다. 이제부터 지하철 등 공공장소에서 제공하는 KT WiFi 보안망 접속이 가능해집니다!

제가 수정한 프로파일은 변경된 SSID 부분을 반영하고, 프로파일 ID만 변경했습니다. 따라서 (이 포스트를 통해 받으셨다면) 이상한 바이러스나 악성코드는 전혀 없고, 혹시라도 설치 후에도 접속이 안 된다면 그냥 프로파일만 삭제해 주시면 됩니다.

프로파일 설치 후 정상 접속 가능

저는 잘 적용하여 정상적으로 이용하고 있습니다. 프로파일을 통해 WiFi 보안망을 이용할 경우에 ‘개인 정보 보호 경고’라는 메시지가 뜨는데, 이는 접속 정보를 미리 저장해놨기 때문에 발생하는 것으로 예상해 봅니다.

KT 고객센터에서 배포한 프로파일을 설치해도 동일한 메시지가 나타납니다.

정 불안하시다면, 제가 고객센터를 통해 공식으로 받은 프로파일을 설치하시면 됩니다. (단, Olleh WiFi만 접속되며 새롭게 변경되는 SSID는 반영되어 있지 않습니다.)

직접 고객센터를 통해 프로파일 설치 주소를 얻었습니다.

2018.10.06일 기준,
http://zone.wifi.kt.com/wprofile/olleWiFiSetting.mobileconfig
KT측에서 위 링크를 삭제했습니다.
구글 드라이브를 통해 다운로드 및 설치 하셔야 합니다.

2018.11.14일 기준,
새로 업데이트 된 공식 주소 입니다.
http://wifi.kt.com/wprofile/olleWiFiSetting.mobileconfig

다시 언제 막힐지 모르니, 미리 받아두시는 것을 권장합니다.

2019.05.24 기준,
3개의 프로파일을 한가지로 합쳤습니다. 위 Google Drive 링크에서 2019.05.24 디렉터리 안의 KT_WiFi_PROFILE.mobileconfig 파일 내려받으셔서 설치하시면 됩니다.

위와 같이 3개의 WiFi 프로파일을 통합했습니다. (2019.05.24)

저처럼 KT에서 iPhone을 사용하고 계시고 동일한 문제를 겪으시는 분들께 도움이 되었으면 합니다.

]]><![CDATA[Google Maps Style 적용하기]]>https://lab.dongri.me/p/google-maps-style-guidehttps://lab.dongri.me/p/google-maps-style-guideSat, 12 Aug 2017 11:36:18 GMT저는 지금까지 외부 지도 API를 삽입할 때 스타일 변경이 가능할 것은 OpenStreetMap만 있는 줄 알았습니다.

한국 타이포잔치 2015에 적용된 OpenStreet API (typojanchi.org/2015)

한국 타이포잔치 2015년도 사이트에 OpenStreetMap이 쓰였기 때문입니다.
오늘 Google에서도 지도의 스타일을 변경할 수 있다는 것을 알게 되었습니다.

Google map의 다양한 스타일 변경을 공유할 수 있는 snazzymaps
Snazzy Maps - Free Styles for Google Maps

JSON 타입의 스크립트를 Google Maps 삽입 스크립트와 함께 넣어주시면 되는 건데요,

지도 스타일 지정 시작 | Google Maps JavaScript API | Google Developers

여기에 자세히 설명되어 있습니다.

아무리 위 방법을 적용해도 Google Maps는 바뀌지 않습니다. 이유는 국내 법상 측량 지도를 해외로 반출할 수 없기 때문입니다. 이와 관련하여 기능상의 제약이 따른 것으로 보입니다.

되도록, 국내 지도는 OpenStreetMap을 해외 지도는 Google Maps를 이용하는 것이 좋겠습니다. (단, OpenStreetMap은 사용자들이 직접 만드는 것이라 국내 번화가나 유명장소 이외에는 잘못된 데이터가 많거나 정보가 부족합니다.)

]]><![CDATA[배치 파일(batch file)로 Host 차단 스크립트 만들기]]>https://lab.dongri.me/p/batch-file-hosts-block-scripthttps://lab.dongri.me/p/batch-file-hosts-block-scriptSat, 15 Jul 2017 13:26:22 GMT
도스 명령어로 HOSTS 일괄 수정하기

위의 포스팅을 참고하여 좀 더 다듬어 봤습니다. 소프트웨어를 사용할 때 되도록 정당한 대가를 주고 구매해서 사용하고 있습니다만 그렇지 못할 정도로 비싼 몇몇 프로그램들이 있습니다. 물론, 어떤 이유에서든 불법인 것은 맞습니다.

불법으로 과자를 구해 적용할 때 대다수가 인터넷을 이용한 인증을 사용하므로 이를 HOST 파일을 이용해 차단해야 합니다. 친절한 경우 레지스트리 파일이나 BAT 파일로 제공하나, 그렇지 않은 경우 일일이 추가해야 하고 관리자 권한으로 접근해야 하는 등 쉽지만 번거로운 작업을 많이 거쳐야 합니다.

이에 따라, 관리자 권한을 확인과 기존 HOST에 등록된 것과 중복 여부를 확인하는 구문을 더 추가했습니다.

@echo off
color 1F
title HOST Edit Script
bcdedit > nul || (echo 오른쪽 마우스 클릭 후, 관리자 권한으로 다시 실행해주세요. & pause & exit)

SET NEWLINE=^& echo.

FIND /C /I "차단하고자 할 주소" %WINDIR%\system32\drivers\etc\hosts
IF %ERRORLEVEL% NEQ 0 ECHO %NEWLINE%^127.0.0.1                   차단하고자 할 주소>>%WINDIR%\system32\drivers\etc\hosts

맨 마지막 줄을 복사·붙여 넣기 하셔서 차단하고자 할 주소를 넣어 사용하시면 됩니다.

메모장에서 해당 코드를 삽입 후,
다른 이름으로 저장 → 파일 형식 ‘모든 파일’ → 확장자 ‘.bat’

]]><![CDATA[Firebase 발급 및 도메인 연결]]>https://lab.dongri.me/p/firebase-hosting-custom-domain-setuphttps://lab.dongri.me/p/firebase-hosting-custom-domain-setupSun, 07 May 2017 17:41:36 GMTFirebase는 작년 Google GDG Incheon 행사 때 가서 처음 접했습니다. 많이 들어보셨을 거로 생각하는 Google Web engine과 비슷합니다. Google에서 서비스하는 것까지도요… 실시간 데이터 서버라는데 비전공자인 저로서는 잘 모르겠습니다.

Telegram bot을 좀 더 다듬어 보고 싶어서 Firebase를 다시 꺼내보는 김에 포스팅하게 되었네요.

Firebase는 우리가 일반적으로 생각하는 호스팅과는 다르며 또 AWS처럼 아예 서버를 발급받아 주물럭거릴 수 있는 건 아닙니다. AWS를 사용하고 싶으나, 13년도 생활코딩 수업 때 사용한지라 더 이상 무료로 사용할 수가 없습니다.

저 같은 컴알못들에겐 GitHub의 웹호스팅과 같다고 생각하면 편할 것 같습니다. 뭐 다양한 봇도 올리고 애플리케이션/게임 제작할 때 활용한다고 하지만 아직 그 정도까지의 실력과 이해도가 있는 것은 아니니까요… 하지만 무료 SSL 적용과 자체 도메인 연결이 되며, 정적 페이지를 운영하기에는 좋은 것 같습니다. 얘 또한 Github 처럼 Jekyll을 올릴 수도 있겠죠?

Firebase 프로젝트 생성하기

먼저 Google Firebase(firebase.google.com)에 접속합니다. Google 계정으로 로그인한 뒤 시작하기 버튼을 눌러줍니다.

곧이어 나타나는 화면에서 ‘프로젝트 추가’를 눌러줍니다.

되도록 서비스하는 국가 근처의 지역을 선택하는 것이 좋습니다.

생성하고자 하는 프로젝트의 이름을 지정하고, 국가를 선택합니다. 어느 국가를 선택하느냐에 따라 서버 위치가 달라지겠죠? 접속 지연율(Ping) 등을 고려했을 때 가까운 일본으로 선택합니다.

좌측 패널에서 Hosting을 눌러줍니다.

로딩 화면이 잠깐 뜨고 나서, 다음의 프로젝트 관리 페이지로 이동합니다. 좌측 메뉴에서 Hosting을 선택해 줍니다.

호스팅 패널에서 시작하기를 눌러줍니다.

시작하기를 눌러주시면, 초반에 호스팅 설정 레이어 창이 나타납니다.

Firebase 이용과 배포를 위한 세팅 안내, 계속을 눌러 마친 후 도메인 연결을 눌러줍니다.

Firebase는 FTP가 아닌, NodeJS 기반의 CLI를 이용하여 배포하기 때문에 반드시 NodeJS를 설치하신 후 세팅 작업이 필요합니다. 세팅 후에도 지정한 디렉터리 안에서 작업 한 후 CLI로 배포해야 하고요… 위 방법까지 설명하기엔 포스팅이 길어지므로 패스하겠습니다. 사실 하라는 대로 따라 하면 되기 때문에 그리 어렵지는 않습니다.

계속을 눌러주시고, 도메인 곧이어 나타나는 화면의 ‘도메인 연결’을 눌러줍니다.

도메인 연결하기

처음 호스팅을 개설하면 주어지는 도메인은 다음과 같습니다.

프로젝트 이름-랜덤영숫자.firebaseapp.com

기본 제공하는 도메인 주소가 복잡하며 앱 개발과 같이 비공개적으로 API를 사용한다면 상관없겠지만, 우리는 정적인 페이지를 호스팅할 것이기 때문에 별도 구매한 도메인으로 연결하고자 합니다.

연결하고자 하는 도메인을 입력하고, TXT 레코드로 인증합니다.

도메인은 캡쳐 상 실수했는데 서브도메인으로 연결하고자 하면 서브도메인을 입력하시면 됩니다. (test.catgarret.net 연결하고 싶은 경우, 그대로 입력)

리디렉션 여부를 확인하신 뒤, 계속을 누르면 도메인 소유주를 확인하는 단계로 넘어갑니다.

저는 CloudFlare를 이용하므로, 해당 서비스에서 추가 했습니다.

이때 위의 값을 복사하신 후, 자신이 구입한 도메인 회사나 혹은 별도의 DNS 서비스를 이용한다면 해당 서비스로 이동하셔서 인증값을 추가해 주시면 됩니다.

소유주 확인이 됐다면, 위와 같은 창이 나타나게 됩니다.
역시 DNS 관리 서비스에서 A 레코드에 주어진 IP주소를 추가하면 됩니다.

A 레코드를 추가한 모습
도메인 연결 후 바로 접속하면 SSL 오류가 뜹니다.

Firebase에서 SSL을 발급 및 적용하는 데 시간이 걸리기 때문에, 도메인 연결 후 바로 접속하시면 위와 같은 오류가 나타납니다.

한 5분에서 10분 후에 접속하시면 SSL이 잘 적용된 모습을 볼 수 있을 겁니다.

GDG Incheon 행사 때, 당시 따로 만든 페이지를 도메인 연결해 봤습니다. 더불어, 기존에는 인증서 발급을 Comodo 를 사용했던 것 같은데, Let’s Encrypt로 갈아탄 것 같습니다.

개발자들이야 Firebase에서 매우 잘 알고 있고 그 활용도가 높아, 이 포스팅이 도움이 되지는 않습니다. 사실 이 포스팅은 저 같은 비전공자, 디자인계열 전공자를 위해서 작성했습니다.

특히 학교에서는, 졸업작품이나 포트폴리오로 Wordpress를 굉장히 강요하는데요… (이 부분에 있어서는 저는 부정적입니다) 일단 졸업하려면 시키는 대로 해야 하니까요…

무료 웹호스팅은 올해 기준으로 사라져가는 추세이고, 남아 있는 무료 호스팅이 있다고 하더라도 하드 50MB, 트래픽이 100MB 정도로 짭니다. Firebase는 DB 10GB, 파일 5GB, 호스팅 1GB까지 되니까 훨씬 좋겠죠~

본인이 HTML, CSS, 기초적인 JS 능력만 된다면, 정적인 페이지로 이를 구성하는 것도 나쁘지 않다고 생각합니다.

사실, 그럴바에 Behance나 Tistory 테마수정해서 쓰는게 백번천번 낫습니다.

]]><![CDATA[온라인 폰트 서비스 (Cloud & Web) 분석 ]]>https://lab.dongri.me/p/cloud-web-font-services-analysishttps://lab.dongri.me/p/cloud-web-font-services-analysisThu, 16 Mar 2017 15:00:00 GMT산돌구름과 Typesquare 두 개의 서비스는 성향이 다릅니다. (산돌구름은 클라우드 방식의 폰트 서비스, Typesquare은 웹 폰트 서비스) 성향은 다르지만 둘 다 폰트를 암호화해서 제공한다는 점이 공통되었고 두 서비스를 분석해 보았습니다.

산돌구름

기존 폰트는 ttf 혹은 otf형식의 파일로 제공되나 별도의 DRM이 걸려있지 않기 때문에 파일이 유출되면 폰트제작사의 손실이 커집니다. 따라서 몇몇 대안으로 운영체제에 프로그램을 설치하고 인증받아 폰트를 인식시키는 방식이 쓰였으나 잦은 프로그램 꼬임과 폰트의 업데이트가 있을 시 반영하기 어렵다는 문제가 있습니다.

산돌구름 매니저 프로그램

그래서 이를 보완해서 나온 것이 클라우드 방식의 폰트 서비스입니다. 매니저 프로그램을 설치하고 로그인을 하면 자신이 구매한 폰트리스트가 뜨며 선택적으로 적용 및 이용하면 됩니다. 클라우드 방식의 장점으로는 폰트의 업데이트가 있을 시에 신속하게 반영이 가능하고 저렴하고 합리적인 요금제로 다양한 폰트들을 사용할 수 있다는 점이 있습니다.

산돌구름은 폰트를 어떻게 제공할까?

여기서 산돌에서는 산돌구름을 통해 폰트를 어떻게 제공하는지 궁금했습니다. 클라우드라지만 폰트를 클라이언트에 다운로드하여야 하는데 이 과정이 어떻게 이루어지는지요.

패킷내역을 조회한 화면

폰트를 선택하고 적용 버튼을 누르면 먼저 산돌 구름의 CDN 서버에서 클라이언트로 폰트가 담긴 ZIP을 다운로드하고 압축을 풉니다.

확장자 뒤에 s가 붙은 것으로 보아 무언가 암호화가 되어있는 것 같다.

압축을 풀면 otf건 ttf건 뒤에 s자가 붙은 확장자의 폰트 파일이 나옵니다. 확장자를 ttf 혹은 otf로 변경해도 정상적인 글꼴이 아니라며 설치가 되지 않습니다. 암호화가 된 것을 확인할 수 있습니다.

암호화된 폰트를 온라인 폰트 변환 사이트에서 변환하는 모습

신기하게도 해당 암호화된 파일을 온라인 폰트 변환 사이트를 통해 변환을 시키면 변환이 됩니다.

정상적으로 폰트가 나오지 않습니다.

변환된 폰트를 열어보면 정상적으로 나오지 않습니다. 하지만 Windows에서 제공하는 기본 폰트 뷰어에서는 별 오류 없이 나타나긴 합니다. (예시가 대체 글꼴로 나타나기는 하지만요)

암호화가 되어서 파일이 깨지거나 손상되었다면 올바르지 않은 글꼴이라는 오류가 나타나야 정상일 것 같은데 말이죠.

Fontlab으로 열어본 암호화된 폰트파일

Fontlab으로 열어보았더니 그 이유를 알 수 있었습니다.

바로 폰트에 해당하는 방 번호(유니코드)가 지정되지 않았던 것입니다. 길 잃은 글리프들에 올바른 방 번호를 지정하면 정상적인 폰트로 사용할 수 있습니다. (물론 불법입니다. 합법적인 방법으로 구매하셔서 이용하시는 게 좋겠지요?)

결론

산돌구름의 암호화 방식은 글리프는 그대로 두고 글리프에 해당하는 방 번호들을 없애거나 특정 로직을 이용하여 치환해서 적용시키는 것 같다는 유추를 해봅니다.

Typesquare

Typesquare는 모리사와의 웹 폰트 호스팅 서비스입니다. 보통 웹 폰트는 용량이 큰 otf와 ttf를 베이스로 압축된 woff, woff2, eof(IE 전용)를 제공합니다.
하지만이 방식은 용량이 아무리 적어도 DRM이 적용되지 않는 RAW 포맷이기 때문에 보호할 수 없는 단점이 있습니다.

웹 폰트에 관한 기본 개념과 문제점은 «새로운 웹폰트서비스 - ag 타이포그라피연구소»를 참고해 보세요.

새로운 웹폰트서비스 | ag 타이포그라피연구소

Google Webfont에서 기본으로 제공하는 방식은 위에서 알려드린 ttf, otf, woff, woff2 등을 사용합니다. Typesquare에서는 별도의 API를 통해 웹 폰트를 제공하고 있었고 분석해 보았습니다.

모든 폰트를 임베드하지 않고, 필요한 글자만 선택적으로 임베딩

Base64 인코딩으로 받아오는 방식
문서에 포함된 폰트만 받아오기 때문에 Base64가 아닌 woff 파일일지라도 열어보면 특정 문자만 폰트 적용이 된 것을 볼 수 있습니다.

Typesquare에서는 선택한 폰트의 폰트 파일 자체를 가져오는 것이 아닌, Javascript를 이용하여 해당 웹 문서에 들어있는 글자 수를 인식하고 그 글자 수에 해당하는 폰트만 Base64 형식으로 가져옵니다.

자세히 보면 API로 넘기는 부분에 인증코드나 텍스트와 같은 파라미터값을 볼 수 있습니다.

물론 아무 곳에서나 폰트를 적용할 수 없게 API를 이용해 도메인을 인식하여 서버에 등록된 URL인지를 확인하여 제공합니다.

API에 넘길 수 있는 글자 수 제한도 있습니다. 혹시나 해서 한글 2,350자만을 추려서 임의로 넣었지만 가져오지 못했습니다. 글자 수를 줄이면 정상적으로 가져왔고요…

결론

어떻게 보면, 필요한 글자만 가져와서 선택적으로 적용하는 데 있어 네트워크의 자원을 아낄 수 있다는 점 (방문자 수가 많은 사이트라면 트래픽도 고려해야겠지요.), ttf나 otf와 달리 어느 정도 보호할 수 있다는 장점이 있습니다.

하지만 Javascript에 의존한다는 점과 Base64로 가져오는 만큼 아무리 선택적으로 폰트를 가져온다 한들 원래의 포맷보다 용량이 크다는 단점이 있겠습니다.

마무리

개인적으로 Typesquare의 방식이 끌리는데요, 모바일 웹에선 속도가 생명이라 폰트 하나만 넣어도 그 차이가 큽니다. 현재까지 통용되는 방식이라곤 폰트 파일에서 가장 사용 빈도가 높은 일부 글리프만 남겨두고 삭제하는 식으로 용량을 줄이지만 그래도 한계가 존재합니다.

차라리 Typesquare처럼 문서에 존재하는 글리프만 추려서 선택적으로 가져온다면 트래픽 절감에 큰 도움이 되지 않을까 생각해 봅니다.

]]>