<![CDATA[동그리 연구소 · Dongri LAB]]>https://lab.dongri.mehttps://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 LABhttps://lab.dongri.meSubstackMon, 20 Jul 2026 14:36:13 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[INTEL NUC13 (NUC13ANKi7) 구매 후기]]>https://lab.dongri.me/p/nuc13-nuc13anki7https://lab.dongri.me/p/nuc13-nuc13anki7Sun, 14 Jul 2024 12:25:11 GMT

맥북프로를 클램셸 모드로 써오다가 작년 배터리 스웰링으로 한번 거금을 주고 교체했습니다. K-직장인 생활을 하다 보니 생산적인 작업보다는 단순 게임(스타크래프트)이나 유튜브, 웹서핑 용도로만 쓰고 있습니다.

Intel 맥용 스타크래프트 버전이 있지만, 윈도우 보다는 살짝 불안하기도 하고, Jump Desktop을 사용해 밖에서 아이패드로 맥을 사용하고 싶은데 강제 절전모드 때문에 잘되지 않는 문제와 한국인이라면 윈도우가 필요할 때가 가끔 있는지라 원격이 가능한 미니 PC에 대한 욕망을 가지게 되었습니다.

미니 PC 뭐를 사야 하나??…

가성비로 따지면, 일반 데스크톱과 노트북이 제일 좋지만, 안 그래도 좁은 책상에 자리를 차지하는 것이 싫었습니다. (추후 맥북도 맥미니 혹은 맥 스튜디오로 바꿀 예정)

요즘 CPU는 4~5년 전 데스크톱 CPU를 한창 상회하는 것으로 알고 있고, 아주 가끔 Adobe (Lightroom, Photoshop, Illustrator, Aftereffects), Figma 제품 정도를 사용하지만, 별도의 3D 작업은 하지 않고, Visual Studio와 스타크래프트를 원활히 구동할 수 있는 성능 정도면 됐습니다.

순전히 저만의 취향으로 4~5가지 후보군 중1 택 하기로 합니다.

HP Elitedesk 800 mini G9

  • 디자인: 중

  • 가격: 비쌈 (170만 원대 후반)

  • 성능: 상 (i7-13700, Windows 11 Pro, NVIDIA® GeForce RTX™ 3050Ti, 32GB RAM, 1TB SSD)

DELL 뉴 OptiPlex 마이크로 폼 팩터

  • 디자인: 상

  • 가격: 비쌈 (300만 원대 초반)

  • 성능: 상 (i7-14700T, Windows 11 Pro, Intel UHD 7700, 16GB DDR5 RAM, 512GB SSD)

INTEL NUC (14세대부터는 ASUS로 이관, 14세대는 정식 출시 전이라 13세대 기준)

  • 디자인: 상

  • 가격: 중간 (130만 원대 후반)

  • 성능: 중 (i7-1360P, Free-dos, Intel Iris X 그래픽), 64GB RAM, 1TB SSD

Lenovo 미니 PC

  • 디자인: 중

  • 가격: 비쌈 (160만 원대)

  • 성능: 상 (i9-12900T, Free-dos, Intel UHD 7700, 16GB RAM, 256GB SSD)

중국발 N100 혹은 AMD 미니 PC

  • 디자인: 하

  • 가격: 저렴 (~70만 원대)

  • 성능: 하 (N100, N5105, AMD 7840h, Windows 11, 16GB RAM)

DELL은 너무 비쌌고, Lenovo나 중국발 미니 PC는 전원부가 불안정하고 그래픽 작업이 어려울 것 같아 행사 중인 INTEL NUC 13에 RAM 64GB, 1TB SSD 옵션으로 약 137만 원을 택했습니다.

다만 기본 옵션으로 탑재되는 SSD가 DRAM이 없는 모델이어서 따로 Platinum P41 M.2 NVMe 2280 [2TB TLC]을 28만 원 정도에 따로 구매해 총 165만 원에 구매했습니다.

2TB SSD까지 합친 금액치고는 비싼 것 같지만, RAM 64GB에 1TB NVMe SSD가 하나 더 생기는 거라 나쁘진 않은 것 같습니다. 참고로 직접 베어본과 동일 부품(SSD, RAM)을 따로 구매했을 때 최저가보다 저렴하여 옵션에 추가하는 방식으로 구매하게 되었습니다.

NUC 13(NUC13ANKi7) 첫 인상

CPU만 있는 베어본에 SSD와 RAM이 추가되기 때문에 한 번 개봉된 흔적이 보입니다. 어댑터는 박스에 포함되어 있지만, 전원 케이블은 별도로 들어있습니다.

총판업체에서 주문 조립하는 건이라 특정 SSD 구매 및 장착은 지원되지 않는다고 하여 따로 구매 후 직접 갈아 끼우려고 합니다.

구성품은 단출합니다. VESA 마운트를 지원하는 모니터에 거치할 수 있도록 도와주는 가이드와 전원 어댑터, 설명서와 i7 스티커, 여분의 나사가 동봉되어 있습니다. C TYPE 포트가 있는 만큼 전원도 거대한 어댑터가 아닌 C TYPE을 지원해 줬으면 좋을 텐데 아쉽습니다.

사진 뒷배경도 검은색이라 잘 보이진 않지만, 별다른 기교 없이 깔끔한 디자인이라서 마음에 듭니다. 또한 iPhone 15 Pro MAX와 비교했을 때도 사이즈가 작아 라우터 옆에 박아두고 쓰기 딱 좋습니다.

분해 · SSD 교체하기

원래는 2TB 옵션 구매 후 파티션을 나누어 사용하려고 했었습니다.

RAM은 삼성 노트북 메모리 DDR4 3200 (25600) 32GB라 괜찮은데 SSD가 이메이션 SSD Z971 M.2 NVMe으로 DRAM이 없는 저가형 제품이라 하여, 1TB로 옵션을 낮추고 (1TB여야만 RAM 64GB 가능) 별도로 [SK hynix] Platinum P41 2TB를 구매해 교체하기로 합니다.

하판을 열기 위해서는 4개의 나사를 풀어야 합니다. 처음에는 드라이버로만 열 수 있는 줄 알고 가지고 있는 일반 크기의 십자드라이버로 시도했다가 안 열려서 멘붕이 왔더랬죠… 일반적인 크기보다 큰 십자드라이버가 필요합니다.

어찌어찌 큰 드라이버를 찾아서 열고나니 손으로 돌려서 열 수도 있게끔 되어 있는 것을 보고 다시 닫을 때는 손으로 나사를 돌려서 닫았습니다.

SSD 뒤편에는 WiFi 모듈이 있습니다. 그리고 SSD는 두 개를 달 수 있지만, 한 곳만 NVMe과 나머지 하나는 M.2 SATA 방식이라 다른 타입의 SSD를 별도로 구입해 장착해야 하는 점은 아쉽습니다. 이제 기판을 닫고 원격용 미니 PC를 세팅합니다.

실전! 원격용 미니 PC 구동

안정적인 인터넷 연결을 위해 WiFi가 아닌 유선렌 포트로 연결하고 라우터 옆에 두었습니다. 원할 때마다 전원을 인가하기 위해서 WOL을 세팅했으나 잘되지 않았고 유동 IP이어서 알리에서 구매한 IoT 장비를 활용하기로 합니다.

Smart Life를 이용한 NUC 전원 관리

BIOS에서 Restore AC Power Loss 옵션을 활용해 IoT 플러그인에 전원이 인가되면 자동으로 전원이 켜지도록 했습니다.

IP 변경, 접속 변동시 Telegram 알림 전송

IP주소의 변동과 원격 접속은 스케줄러를 통해 IP주소를 업데이트하고 텔레그램으로 알림이 가도록 하게 했습니다.

원격 미니 PC 구축 완성

이렇게 해서 원격 미니 PC 구축이 완료됐습니다. 🎉

iPad & Samsung Galxaxy DEX 원격 접속 한계

MS RDP(RD Client) 단축키 연속 입력 안 됨

네트워크 속도와 화질은 MS의 RDP(RD Client) 가 제일 좋았습니다. 다만 단축키의 연속 입력이 되지 않아, 스타크래프트를 할 때나 단축키 사용이 잦은 Photoshop, Figma 작업은 사실상 불가능했습니다. 이는 iPad OS, 삼성 갤럭시 덱스 (안드로이드용)에서 구동하는 RDP 모두 동일합니다. 애플리케이션 안정성은 안드로이드보다 iPad OS가 더 좋았습니다.

DEX 모드 전체화면 사용 시 상·하단 UI 불편

외장 모니터에 연결하여 사용 시 휴대성 측면에서 iPad OS의 스테이지 매니저보다 삼성 DEX 모드가 더 간편하고 자리도 덜 차지 해서 좋습니다.

하지만 DEX 모드에서 전체화면 사용 시 상단으로 마우스 포인터가 이동하면 숨겨진 닫기 버튼이 나오고, 하단으로 이동 시에는 작업표시줄이 겹쳐 불편합니다.

또한 RDP 아이콘이 상단 중앙에 고정된 것도 아쉽습니다. iPad OS처럼 좌측에 고정된다면 좋을 것 같은데 말이죠…이 어느 곳에서나 원격 접속이 가능해졌습니다.

낮은 화질과 불안정한 네트워크 감안하면 Jump Desktop으로 해결 가능

예전에 OSX 원격 접속용으로 구매한 Jump Desktop을 통한 원격 접속 시에는 단축키 연속 입력이 안 되는 부분이 말끔하게 해결됩니다.

하지만 심하진 않지만, 화질이 물결무늬 현상처럼 열화되어 있고, 평상시 작업에는 문제가 없으나 스타크래프트 할 때에 네트워크가 불안정한 (렉처럼 화면이 밀리는) 현상이 발생합니다.

집에서의 간단한 작업이나 화질이 중요한 작업 시에는 RD Client를 사용하고, 색상 지장이 없는 때에만 그래픽 편집은 Jump Desktop을 사용하고 있습니다. OSX 나 PC에서 RDP 을 사용할 때의 수월한 경험보다는 뭔가 나사가 하나 빠진 듯한 느낌입니다.

그래도 좁은 방안의 책상이 넓어지고, 네트워크만 연결되어 있다면 언제 어디서나 쉽게 나에게 최적화된 PC를 바로 이용할 수 있어서 좋습니다.

RDP 애플리케이션과 DEX 모드, 스테이지 매니저가 나온 지 한참이나 됐는데도 완벽한 실사용이 어려운 것은 아쉽습니다. 하지만 편리성도 큰 만큼 시간이 걸리더라도 언젠가는 꼭 완벽하게 이용이 가능할 정도의 높은 완성도로 개선되었으면 좋겠습니다.

]]><![CDATA[자동이체(예약송금 UX 관찰기)]]>https://lab.dongri.me/p/scheduled-transfer-autopay-ux-reviewhttps://lab.dongri.me/p/scheduled-transfer-autopay-ux-reviewFri, 28 Jun 2024 15:21:44 GMT

통장 쪼개기를 실천하면서 파킹통장과 각종 적금 특판에 가입하기 위해 개설한 계좌 개수가 많아졌습니다. 자연스레 다수의 계좌를 관리하기 위해 핀테크(Fin Tech) 서비스에서 제공하는 자동이체 (혹은 예약송금) 서비스를 유용하게 쓰고 있습니다.

기존 은행 앱에서 수기로 등록하던 자동이체와 계좌 목록관리와 달리, 다수의 계좌번호를 외우지 않아도 미리 오픈뱅킹에서 불러와 등록된 리스트에서 선택하기만 하면 한 곳의 플랫폼에서 모든 자동이체를 관리할 수 있다는 점이 가장 큰 장점인 것 같습니다.

저에게 가장 잘 맞는 자동이체 기능을 제공하는 핀테크 서비스들을 살펴보았습니다. 우선, 제가 자동이체를 사용하는 이유와 필요한 기능을 정리해 봤습니다.

자동이체(예약송금) 기능을 쓰는 이유와 필요한 기능

  1. 통장 쪼개기 실천

  2. 타행 자동이체

  3. 휴면계좌 방지

  4. 급여자작

자동이체 시 필요한 기능

  1. 출금계좌 메모기능

  2. 월말(30~31), 월초, 오전/오후 등 세부 예약 기능

  3. 활동성 계좌 유지를 위한 자동이체 최소 금액

  4. 송금계좌 메모기능

  5. 일시정지 기능

가장 대표적 핀테크 앱인 토스의 자동이체를 편리하게 잘 사용했었지만, 출금 계좌 메모(출금 표시)가 되지 않아 다른 플랫폼을 찾아다녔고 최종적으로 삼성 금융 네트웍스의 모니모에 정착하고 있습니다.

toss(토스)

접근성

전체 > 송금 > 자동이체

토스의 모든 서비스들이 들어있고 주 서비스가 아니기 때문인지 전체 메뉴를 통해 진입해야 합니다. 한 번 이상 사용 시에는 전체 메뉴에서 “자주 사용하는 메뉴”로 상단에 나타나기 때문에 접근하기는 쉬우나, 처음 자동이체 기능의 서비스 여부를 알고 진입하기는 난이도가 있어 보입니다.

이체목록 · 등록/수정 과정

자동이체 등록된 목록들을 한눈에 볼 수 있고, 토글 버튼으로 쉽게 동작 여부를 결정할 수 있습니다. 특히 시중 은행 애플리케이션과 달리 자동이체에 대한 별도의 제목(별명)을 만들어 쉽게 관리할 수 있어 저는 이모지로 분류 + 세부 내용 형식으로 쉽게 가독성을 높여 사용하고 있습니다.

토스는 최소 금액 제한이 없고, 반복 주기를 매일·매주·매월로 다양하게 제공하고 있습니다.

알림 기능을 통해 유저가 계좌에 송금 가능액이 있는지를 확인할 수 있도록 하루 전 알려 주는 부분이 좋았습니다.

분류 · 자동이체 내역 조회

자동이체 내역은 계좌별로 분류해서 볼 수 있어서 좋지만, 자동이체 진행 중·일시정지 상태로 분류해서 볼 수 없는 점은 아쉽습니다. 그리고 (저는 굳이 따로 찾아보진 않을 것 같으나) 자동이체 내역만 한눈에 모아서 볼 수 있게끔 배려한 모습이 인상 깊습니다.

정리

  • 접근성: 낮음

  • 자동이체 제목 지정: 가능

  • 자동이체 최소금액: 1원

  • 출금(빠져나가는 통장 표시) 계좌 메모: 미지원

  • 송금(받는 사람 통장 표시) 계좌 메모: 지원

  • 자동이체 내역확인: 지원

  • 자동이체 일시정지: 지원

  • 자동이체 일괄 삭제: 미지원

  • 자동이체 계좌별 분류: 가능

  • 자동이체 일시정지/진행별 분류: 불가능

  • 자동이체 주기: 1회, 반복(주 · 월 · 매일)

  • 송금 시간대 지정: 불가능

Naver Pay(네이버 페이)

첫 예약송금 기능을 제공했을 때는 UI·UX가 너무 불편했는데 이후 한번 개편해서 다행입니다.

접근성

네이버 페이 앱에서 우측상단의 메뉴를 통해 바로 예약 송금을 이용할 수 있어서 좋았습니다. 하지만 전체 메뉴를 거치지 않고 자산·송금 메뉴를 통해 접근 시에는 뎁스가 너무 많아 찾기 어려워 보입니다.

이체목록 · 등록/수정 과정

간단하게 구성된 토스와 달리 텍스트로 구성되어 있어 내용을 자세하게 볼 수 있다는 장점은 있지만 이체 건이 많아질 경우 오히려 눈에 잘 안 들어올 수도 있겠다 싶었습니다.

자동이체 최소 금액은 1천 원부터이고, 송금 시간대를 오전·오후로 나눠 선택할 수 있는 특징이 있었습니다. 또한 자동이체 내역을 계좌별뿐만 아니라 사용 중·정지상태로도 볼 수 있습니다.

정리

  • 접근성: 보통

  • 자동이체 제목 지정: 가능

  • 자동이체 최소금액: 1,000원

  • 출금(빠져나가는 통장 표시) 계좌 메모: 지원

  • 송금(받는 사람 통장 표시) 계좌 메모: 지원

  • 자동이체 내역확인: 지원

  • 자동이체 일시정지: 지원

  • 자동이체 일괄 삭제: 미지원

  • 자동이체 계좌별 분류: 가능

  • 자동이체 일시정지/진행별 분류: 가능

  • 자동이체 주기: 1회, 반복(주 · 월)

  • 송금 시간대 지정: 오전 · 오후

PAYCO(페이코)

접근성

금융 > 송금 > 예약

예약송금을 송금에 속한 하나의 기능으로서 잘 녹여냈다고 생각합니다. 다만, 예약을 굳이 페이지가 나와야 하는지는 모르겠습니다.

이체목록 · 등록/수정 과정

깔끔한 UI에 다른 핀테크 서비스들이 제공하는 자동이체의 기본기능은 다 제공됩니다. PAYCO만이 가지고 있는 장점은 “잔액 부족 시 다음날 재시도“기능입니다. 송금 하루 전 알림 기능은 토스에도 있지만, 다음날 다시 시도하는 기능은 PAYCO에서만 제공하고 있습니다.

자동이체건들의 배치와 일괄 삭제를 지원해 편리하게 관리할 수 있도록 해두었습니다. 계좌별, 자동이체 상태에 따른 분류 기능만 제공하면 완벽할 것 같네요.

자동이체 내역은 별도로 자동이체 내역건만 제공하는 토스와 달리 전체 송금 내역에서의 부가기능(분류)으로 제공하고 있습니다.

정리

  • 접근성: 높음

  • 자동이체 제목 지정: 가능

  • 자동이체 최소금액: 100원

  • 출금(빠져나가는 통장 표시) 계좌 메모: 미지원

  • 송금(받는 사람 통장 표시) 계좌 메모: 지원

  • 자동이체 내역확인: 지원

  • 자동이체 일시정지: 지원

  • 자동이체 일괄 삭제: 가능

  • 자동이체 계좌별 분류: 불가능

  • 자동이체 일시정지/진행별 분류: 불가능

  • 자동이체 주기: 1회, 반복(주 · 월)

  • 송금 시간대 지정: 불가능

monimo(모니모)

접근성

더보기 > 자동이체

더보기 상단에 자동이체 개수와 크게 나와 있어 한눈에 쉽게 찾아볼 수 있습니다.

이체목록 · 등록/수정 과정

자동이체 단순 목록만 깔끔하게 보여줍니다. 타사 서비스와 다르게 상태에 따라 분류하거나 전체 삭제할 수 있는 기능이 없는 점은 아쉽습니다.

모니모 자체에 계좌에 대한 “별칭”을 지정할 수가 없어, 다 계좌의 경우 계좌번호를 알고 있어야지만 정확하게 지정할 수 있습니다. 종료일은 시작일로부터 1년까지만 설정이 가능하나 이와 관련된 내용은 따로 언급되어 있지는 않습니다.

다른 서비스들과 다르게 자동이체 등록 단계에서 29~31일인 경우, 해당 날짜가 없는 달은 말일에 이체된다는 고지되어 있는 부분은 좋았습니다.

정리

  • 접근성: 높음

  • 자동이체 제목 지정: 가능

  • 자동이체 최소금액: 1원

  • 출금(빠져나가는 통장 표시) 계좌 메모: 지원

  • 송금(받는 사람 통장 표시) 계좌 메모: 지원

  • 자동이체 내역확인: 지원

  • 자동이체 일시정지: 지원

  • 자동이체 일괄 삭제: 미지원

  • 자동이체 계좌별 분류: 불가능

  • 자동이체 일시정지/진행별 분류: 불가능

  • 자동이체 주기: 1회, 반복(주 · 월)

  • 송금 시간대 지정: 불가능 (오전 10시부터 이체)

Kakao Pay(카카오 페이)

접근성

카카오페이를 통해 예약송금 이용 시, 카카오톡 안의 카카오페이 예약송금으로 이동하게끔 되어 있습니다. 즉, 예약송금을 사용하려면 카카오톡만 사용하거나 카카오톡과 카카오페이 둘 다 설치되어 있어야 합니다.

또한, 송금 메뉴에서 더보기 아이콘을 눌러야 확인이 가능한데, 아이콘만으로 보기 메뉴를 통해 예약송금 기능을 이용할 수 있는지는 잘 모르겠습니다.

이용 목적 입력과 송금확인증 모아서 받기 기능이 있는 것이 카카오페이만의 예약송금 특징입니다.

송금확인증을 모아서 받기를 클릭 시 송금 실행 1년 뒤 송금내역을 정리하여 메일로 발송해 줍니다. 월세 등을 카카오페이로, 자동으로 이체한 뒤 추후 연말 정산할 수 있도록 제공하는 것으로 보입니다.

위와 같은 이유로 다른 핀테크 서비스들과 달리 자동이체 제목 입력 폼이 하단에 있습니다. 또한 최초 등록 시 목적을 한번 설정하면 그 이후에는 설정이 불가능합니다.

예약은 매월과 1회만 가능한 부분이 아쉽습니다.

정리

  • 접근성: 낮음

  • 자동이체 제목 지정: 가능

  • 자동이체 최소금액: 1원

  • 출금(빠져나가는 통장 표시) 계좌 메모: 미지원

  • 송금(받는 사람 통장 표시) 계좌 메모: 지원

  • 자동이체 내역확인: 지원

  • 자동이체 일시정지: 지원

  • 자동이체 일괄 삭제: 미지원

  • 자동이체 계좌별 분류: 불가능

  • 자동이체 일시정지/진행별 분류: 불가능

  • 자동이체 주기: 1회, 반복(월)

  • 송금 시간대 지정: 불가능 (오전 6시 ~ 오후 9시 이체)

결론

자동이체 서비스 플로우 자체는 PAYCO가 제일 자연스럽게 이동할 수 있도록 동선을 배치했으며, 접근성 측면에서는 모니모가 제일 좋아 보였습니다. 네이버 페이는 아이콘이 아닌 텍스트 버튼 등을 사용한 것으로 보아 다양한 연령대(고연령대)를 고려해 디자인한 것이 아닌가 유추해 봅니다.

출금계좌 메모와 더불어, 페이코의 자동이체 실패 시 재시도 기능과 카카오페이의 송금 확인증 모두가 제공되면 좋을 것 같네요.

원하는 기능을 지원하는 핀테크 서비스를 찾다가, 여러 서비스를 정리해 보았는데 나름대로 공부가 된 것 같습니다.

]]><![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[2024년을 향하는 UX/UI 디자인 트렌드]]>https://lab.dongri.me/p/ux-ui-design-trends-2024https://lab.dongri.me/p/ux-ui-design-trends-2024Sun, 03 Mar 2024 10:26:58 GMTPunit Chawla가 Prototypr(medium)에 작성한
"UX/UI Design Trends Going Into 2024"을 국문으로 번역한 글입니다.

UX/UI Design Trends Going Into 2024

매년, 우리는 멋져 보일 뿐만 아니라 다른 디자이너들에게 영향을 주어 트렌드를 "도둑질" 하도록 영향을 미치는 새로운 디자인 트렌드를 준비합니다.

좋든 싫든, 실제로 스마트하고 실용적인 디자인의 흐름이 있습니다. 이러한 흐름은 더 적은 공간에 더 많은 정보를 포함하는 것부터 사용자와 더 많은 상호 작용을 형성하는 것까지 다양할 수 있습니다.

계속해서 인터넷을 장악하고 있는 트렌드 중 일부를 살펴보겠습니다!

어린이 도시락으로 더할 나위 없는 — Bento Boxes

Bento box(이하 벤토)는 일본 도시락 문화의 필수품입니다.
음식을 체계적인 형식으로 보관(의역: 예쁘게 보관)하고 위생적으로 유지할 수 있도록 도와줍니다.

이미지 출처 — Freepik

누가 이런 생각을 했는지는 알 수 없지만, 음식이 가득 차 있는 벤토는 디지털에 비유해 볼 수 있을 만큼 훌륭한 소재입니다.

벤토는 드리블(Dribbble)이나 비헨스(Behance)와 같은 플랫폼에서 시작된 또 다른 디자인 트렌드로, 수백만 명의 디자이너들이 차용할 정도로 큰 인기를 얻고 있습니다. 그러나 "모듈식" 디자인의 개념은 웹사이트 대시보드에서 시작되었습니다. 여기에는 PayPal과 같은 판매 및 재무 대시 보드, Google Ads와 같은 분석 및 기타 여러 가지가 포함됩니다.

Windows Phone과 Lumia를 기억하시나요? 그들이 사용한 UI는 본질적으로 벤토 디자인의 초기 형태를 반복한 것이었습니다. 나중에 Microsoft는 이 개념을 확장해 데스크톱 시작메뉴에도 적용했습니다.

Windows 8 시작메뉴

이처럼 벤토 디자인은 업계 전반에서 사용되어 왔으나 Apple이 벤토 그리드를 사용하면서 폭발적인 인기를 끌게 됩니다. 가장 먼저 iPhone 랜딩 페이지에서 사용했고, 곧이어 Apple 이벤트 슬라이드와 프레젠테이션으로 확장되었습니다.

또다른 Apple의 포스터

Apple은 메가트렌드를 이끄는 것으로 널리 알려져 있고 벤토도 그중 하나일 뿐입니다. 모든 디자이너와 그들의 선임들은 프레젠테이션, 웹사이트, 제품 출시 등에 벤토를 사용해오고 있었습니다.

기존 벤토 디자인과 새로운 트렌드의 가장 큰 차이점은 그리드의 각 섹션이 그룹의 일부가 아닌 독특한 공간을 나타낸다는 것입니다.

다른 UI 디자인 트렌드와는 달리 벤토는 실제로 단순한 레이아웃 스타일 그 이상으로 진화하고 있습니다. 이제는 시제품뿐만 아니라 다른 독특한 레이아웃이 더해져 새로운 시각적 디자인 콘셉트로 진화했습니다.

이것 좀 보세요:

벤토 컨셉의 인터렉션 라이브 데모

위 예시는 diagram.com에서 가져온 것으로, AI 기반 디자인 도구로 무엇을 할 수 있는지 벤토 그리드를 사용하여 보여줌으로써 서비스를 훨씬 더 매력적으로 만들고 사용자로 하여금 친밀감 형성과 쉬운 이해를 돕습니다.

벤토 디자인을 사용하려 하는 디자이너들을 위해 특화된 몇 가지 웹사이트가 있습니다. 그중 하나는 bentogrids.com입니다. UI와 그래픽 디자인을 위한 벤토 그리드가 한 곳에 모여져 있습니다. 이 웹사이트를 만든 분들은 꽃길만 걷기를...

공간디자인 트렌드와 기술의 도약

한때 전 세계의 모든 기술과 디자인 애호가들이 체감했던 것처럼 2023년 6월 5일 아침, "중요한 이메일"을 확인하기 위해 화장실에서 핸드폰을 든 순간 당신의 피드는 완전히 애플의 새로운 비전 프로(Vision Pro)로 가득 찼습니다.

이미지 출처 — Apple.com

이후 몇 주 동안 기술분야에서는 이것이 전부였으며 모든 디자이너는 공간 디자인 기술을 익히려고 노력했습니다. 디자인 트렌드 외에도 다양한 AR/VR 스타트업이 주목을 받았으며 그들의 기술이 입소문을 타기도 했습니다. 이는 정말로 AR과 VR에 실질적인 힘이 되었습니다.

우수한 기술은 창의적인 디자인 가능성을 불러일으킵니다. 스마트워치부터 폴더블 폰까지, 디자이너들은 항상 진정한 적응력을 발휘해왔습니다. 공간 디자인도 마찬가지였습니다.

미래를 엿볼 수 있는 한줄기 빛

인기 있는 디자이너 중심의 툴 "Bezi"의 출시와 함께 이러한 변화가 시작되었습니다. 이 툴은 Figma나 Spline과 같은 디자인 도구와 매우 유사하지만 3차원 기능을 갖추고 있습니다. 디자이너들은 공간 디자인에 참여할 수 있으며, AR/VR 헤드셋을 연결하여 인터랙티브한 공간 경험을 만들 수 있습니다.

Bezi를 통해 우리가 만들 수 있는 것들을 살펴보겠습니다:

데모 이미지 Bezi.com

더 나은 AR/VR 경험에 큰 영향을 미치는 요소 중 하나는 더 나은 사용자 경험(UX)입니다. 아름다운 디자인 뒤에 있는 기술을 깊이 이해하고, 실제 VR 헤드셋을 사용하여 테스트하고, 공간 환경에서 물건들을 시험해 보는 것은 모두 사용자 경험의 일부가 될 것입니다. 우리가 앞으로 나아가면서 UX에 대한 현재의 이해에 새로운 교훈과 변화가 분명히 있을 것입니다. 하지만, 이것은 지금 습득하고 나중에 가능한 경우 미래에 활용할 수 있는 기술 중 하나입니다.

Apple의 넓은 상상력과 풍부한 자본 외에도 안경 착용에 완전히 새로운 경험을 선사하는 기술에 정통하지 않은 회사도 있습니다.

Google의 프로젝트 "Google Glasses"가 실제 대량 생산에 성공하지 못했더라도, 선글라스 회사인 레이밴(RayBan)은 새로운 메타 웨이페어(Meta Wayfarer)로 스마트 웨어러블 경쟁에 뛰어들었습니다.

이미지 출처 — Rayban

일반적인 RayBan 디자인에 속지 마세요. 내장된 카메라와 스마트 기능을 통해 비디오/이미지를 저장하고 소셜 미디어에 라이브 스트리밍할 수 있습니다. 이는 사용자 경험과 고객 경험에 새로운 차원을 불어넣습니다. 아마도, 2025년의 트렌드가 될지도 모릅니다!

누구나 애니메이션을 만들 수 있습니다!

더 많은 사람들이 새로운 기술에 접근할 수 있게 되면 종종 새로운 트렌드가 탄생하곤 합니다.

이것은 LottieFiles가 가진 하나의 임무였습니다. 제가 에반젤리스트로 회사에 입사했을 때, 이미 어떤 도구나 UI에 간편하게 추가할 수 있는 애니메이션에 감탄했습니다. Lottie를 활용한 애니메이션에 대한 수요를 조사한 그들은 Figma용 플러그인도 출시했는데, 이 플러그인을 사용하면 Figma로 만든 애니메이션을 Lottie에 적용가능한 JSON 파일로 변환할 수 있습니다.

Figma용 LottieFiles 플러그인

이 플러그인의 등장으로 인해 After Effects과 유사한 소프트웨어를 배워야 하는 큰 허들이 없어지게 되었고, 더 많은 디자이너들은 빠르게 애니메이션을 만들 수 있게 되었습니다.

요즘에는 모든 회사의 랜딩 페이지에서 매력적인 인터랙션을 발견할 수 있습니다. 이는 모두 웹 사이트 방문자의 경험의 차별화에 대한 필요성이 점점 커지고, 제품/서비스를 판매하는 도구로서 스토리텔링에 대한 수요가 높아진 덕분입니다.

다음 랜딩 페이지의 인터랙션을 예로 들어보겠습니다:

Apple Watch Series 9 랜딩 페이지 — 스크롤 시 더블 탭 인터랙션

스크롤 애니메이션이 적용되면 방문자들은 여러분이 제시하는 내용에 몰입할 것입니다. 웹플로우(Webflow)와 프레이머(Framer)와 같이 코드가 필요없는(No-code) 도구들은 디자이너들에게 코드를 길게 쓰지 않고도 이러한 애니메이션 기능을 제공하기 위해 끊임없이 혁신하고 있습니다.

누군가는 여기서 라이딩이 끝난다고 생각할 수도 있습니다. 애니메이션이 정점에 이뤘고 더 이상 기대할 것이 없습니다. 하지만 다행히 기술 분야의 사람들은 항상 차세대 혁신을 찾고 있습니다. 또한, 끊임없이 발전하는 유능한 도구들로 인해 상상할 수 있는 모든 것이 가능해집니다.

이러한 가능성 중 하나는 새로운 "애니메이션 버튼 트렌드"입니다. 애니메이션 기술을 도입해 단순한 버튼에 활기를 불어넣는 새로운 UI 스타일입니다. 버튼 주위에 간단한 외곽선 애니메이션부터 마우스 hover시 버튼 내부에서 별이 움직이는 것과 같은 변화까지 다양합니다.

이러한 트렌드는 종종 도미노 효과에 의해 생성됩니다. 먼저 한 디자이너의 소셜 미디어 게시물이 인기를 얻고, 그 후에 다른 유명한 디자이너들이 따라오게 됩니다.

플랫(Flat) 디자인의 종말?

요즘 많은 디자이너들이 플랫 디자인(예: Medium에서 볼 수 있는 것과 같은)에서 시각적으로 현실적인 스타일로 이동하고 있다고 이야기하고 있습니다. 이러한 스타일에는 3D 그래픽, 깊이 효과, 뉴모피즘(neumorphism), 스큐어모피즘(skeuomorphism) 등이 포함됩니다.

최근에는 많은 기업들이 3D를 핵심 스타일로 채택했습니다. 현재 웹 및 앱 디자인에서는 직접적으로 나타나지 않을 수 있지만, 로고는 이 새로운 트렌드로 업데이트되고 있습니다.

찬 카루나랏네(Chan Karunaratne)가 만든 새로운 3D 트렌드의 몇 가지 좋은 예시

다른 디자인 트렌드와 마찬가지로, 이러한 스타일을 채택하는 주요 이유 중 하나는 Spline 및 Vectary와 같은 "쉽게 사용할 수 있는" 온라인 웹 기반의 3D 도구들이 도입되었기 때문입니다. 이 도구들을 사용하면 웹 및 앱에 3D 에셋을 넣는 것이 매우 쉬워집니다. 또한, 이러한 도구들은 애니메이션을 사용하여 3D 에셋을 생생하게 만들며, 제가 경험한 것 중 가장 배우기 쉽습니다.

저에게는 기본적인 선형 그라데이션(linear gradient)과 그림자(shadows)가 디자인과 에셋에 깊이와 제3차원을 더할 수 있다는 것이 얼마나 믿기 힘든 일인지 알 수 없습니다.

에어비앤비(Airbnb)는 항상 디자인과 트렌드를 주도해온 기업입니다. 그들은 간단하면서도 효과적인 앱 디자인과 인터랙션으로 널리 알려져 있습니다. 2023년에는 새로운 중요한 기능을 가져올 앱 업데이트를 발표했습니다.

그들은 12개 이상의 3D적인 시각적 요소를 통합했으며, 발표 비디오는 거의 모두 3D에 관한 것입니다.

Aribnb에서 공개한 영상

아이소메트릭 비주얼, 3D 캐릭터와 애니메이션, 그리고 다양한 앱과의 상호 작용은 계속해서 보고 싶게 만듭니다. 플랫에서 3D로의 전환은 실제로 느리지만 꾸준하게 이뤄지고 있으며, 이것이 이 트렌드가 지속될 이유라고 생각합니다.

이 트렌드를 시작한 사람은 항상 베일에 가려지겠지만, 현실적이고 관련성이 높은 디자인에 대한 요구는 우리 자신의 창의성과 사용자를 위한 혁신을 불러 일으킵니다.

범람하는 A.I. 디자인 도구 - 아군 혹은 적?

인공지능은 지난 10년 동안 기술 분야에서 가장 많이 사용되고 인식되는 단어입니다. 일부 디자이너들은 미래에 자신의 직업에 대한 위협으로 받아들이지만, 대부분의 디자이너들은 이 기술을 사용하여 더 빠르고 퀄리티 높은 디자인을 만들고 있습니다.

생성형 동영상 제작에 사용되는 Adobe Firefly

"A.I. powered (인공지능으로 구현된)" 디자인 도구 세트는 다양한 수준에서 OpenAI API를 구현하려고 노력하고 있으며, 자체 인공지능 모델에도 작업 중입니다. 그러나 이러한 대부분의 인공지능 기능은 단순한 속임수에 불과합니다. 무작위로 UI를 디자인하거나 에셋을 섞어서 배치하고 심지어 어려운 문제에 기본적인 솔루션을 제공하기도 합니다. 이러한 것들은 많은 커뮤니티 회원들의 지지를 받고 있는 몇 가지 비판 중 일부에 불과합니다.

이런 복잡한 속임수 속에서도 구세주가 몇몇 있습니다. 그러한 영웅 중 하나는 팬들이 가장 좋아하는 Relume입니다. Webflow를 기반으로 한 이 회사는 Relume A.I.라는 강력한 와이어프레임 및 사이트 매핑 도구를 출시했습니다.

Relume A.I 구동모습

당신이 기본적으로 프로젝트 설명인 프롬프트를 입력하면, 완전하고 자세한 사이트 맵과 와이어프레임이 생성됩니다. 이 와이어프레임은 관련 데이터와 레이아웃으로 가득 차 있으며 빠르게 Figma나 Webflow로 복사할 수 있습니다.

저만 Chat-GPT가 인간의 창의성을 망치고 의존성만 증가시킨다고 생각하는 걸까요?

보다 세심하고 공감적인 사용자 경험(UX)

이미지 출처 — Josh Calabrese

이 정도면 비주얼과 UI 디자인에 대한 이야기는 충분합니다. 최소한 사용자 경험(UX)은 발전해 왔으며, 이는 UX 연구원과 디자이너가 중점을 두는 내용으로 정당화할 수 있습니다. 이는 디자인을 접근 가능하고 포괄적으로 만들기 위해 프로세스를 간소화하는 것을 의미합니다.

많은 디자이너들이 시각 디자인보다는 사용성에 관심을 가지고 있습니다. 이로써 더욱 간결하고 실행 가능한 디자인이 중심에 올라왔습니다. 디자이너들은 지난 몇 년간 업계의 변화에도 불구하고 바퀴를 재발명하기보다는 효과적으로 작동하는 방법을 고수하고 있습니다.

2019년부터 2023년까지 'UX 접근성'에 대한 Google 트렌드 그래프

위 Google 트렌드 그래프는 접근성이 뛰어난 디자인이 어떻게 산업 요구사항이 되었는지 보여줍니다.

이러한 접근성 기술은 색 대비, 가독성 있는 폰트, 인식 가능한 액션 요소부터 다양한 능력을 가진 사람들을 따라가는 것까지 다양합니다. 이를 통해 접근성에 초점을 맞춘 기능을 제공합니다.

왜 접근성이 필요한가요?

모든 연령층의 사람들을 위한 디자인이 필요하고 신체적 제약이 있기 때문에 접근성도 점점 더 강화되고 있습니다. 기업은 다양한 인구통계를 활용하고 모든 측면에서 포용성을 추구하고 있습니다. 점점 더 많은 사람들이 디지털 방식으로 전환함에 따라 디자이너가 접근 가능한 디자인을 중요시하는 것은 거의 필수입니다.

강좌와 부트캠프는 요구 사항을 멀리서도 감지하고 있으며, 학생들이 접근성 디자인에 대한 충분한 지식을 갖추고 디자인 분야에 진입할 수 있도록 준비하고 있습니다.

개인화

접근성 외에도, 개인화가 사람들을 앱이나 웹사이트에 묶어 두는 주요 요인입니다. 아마도 유튜브(Youtube)에서 이와 비슷한 메시지를 본 적이 있을 겁니다.

유튜브(Youtube)는 사용자가 어떤 종류의 콘텐츠를 선호하는지 평가하여 더 나은 추천을 제공합니다.

다양한 앱이 며칠 동안 새로운 기능을 실험하다가 사용들이 좋아하지 않아 철회하는 모습을 볼 수도 있습니다. 이는 UX 디자이너가 제품과 서비스의 미래를 어떻게 주도하고 있는지 직접적으로 보여줍니다.

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

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

사실 굳이 옮기지 않아도 과거 1–2만 원대에 구입한 Enpass의 평생 라이선스만으로 충분하나 회사 보안정책상 볼트를 저장하는 클라우드 서비스가 모두 차단되어 더이상 이용이 불가능 하게 되었습니다.

1-2만원에서 9만 원대로 가격을 훌쩍 올려버리고 더 비싼 가격의 상위 평생 라이선스를 만든 Enpass와 달리 Vaultwarden은 2FA-OTP도 무료로 이용가능한 부분도 한몫 했습니다.
(OTP 서비스는 Authy를 사용해왔으나 최근 일부 유저들의 개인정보가 유출되는 사고가 있어 사용하지 않습니다.)

저는 별도 NAS를 구동하진 않고 오라클 클라우드 프리티어 플랜의 인스턴스 공간이 남은 곳에 설치했습니다.

bitwarden와 Vaultwarden(구: bitwardenrs) 차이

bitwarden은 Bitwarden Inc. 에서 공식으로 배포하는 오픈소스이지만 일부 유료로 제공되는 기능들이 빠져있고 설치가 복잡합니다.
반면 Vaultwarden은 오픈소스 특성을 이용해 이러한 부분들을 손쉽게 설치 및 이용 가능하도록 해주는 파생 오픈소스입니다.

설치하기

문서들이 활발히 잘 공유되어 있으나 여러 공유된 문서들을 조합해 설치하였으므로 기록 목적으로 각 출처를 명시해 두었습니다.

우분투 인스턴트 초기화

오라클 클라우드 프리티어 Ubuntu 20.04 인스턴트 서버 초기 설정
/* apt 최신화 */
$ sudo apt update
$ sudo apt -y upgrade

/* 2GB 스왑 설정 */
$ sudo fallocate -l 2G /swapfile
$ sudo chmod 600 /swapfile
$ sudo mkswap /swapfile
$ sudo swapon /swapfile

/swapfile swap swap defaults 0 0 /* 윗 명령어 입력시 전환되는 에디터에서 추가 */

/* 해외 리전의 경우 타임존 세팅 */
$ sudo timedatectl set-timezone Asia/Seoul

Vaultwarden 설치

Installing Vaultwarden formally bitwarden_rs on Ubuntu 20.04 with Nginx
/* Docker 설치 및 세팅 */
$ sudo apt install docker.io
$ sudo systemctl enable --now docker

/* 버전 확인을 통해 정상 설치 확인 */
$ docker --version

/* Docker Compose 설치 및 세팅 */
$ sudo apt install docker-compose-plugin -y

/* 버전 확인을 통해 정상 설치 확인 */
$ docker compose version

/* 디렉터리 생성 (저는 Home안에 생성했습니다.) */
$ mkdir ~/dockers
$ mkdir ~/dockers/vaultwarden
$ mkdir ~/dockers/vaultwarden/vw-data
$ cd ~/dockers/vaultwarden

리버스 프록시 세팅 (Nginx Proxy Manager)

기본 http로 접속 시 보안 정책으로 이용이 불가능하기 때문에 리버스 프록시를 통해 https 이용이 가능하도록 설정합니다.

/* Nginx Proxy Manager 디렉터리 생성 */
$ mkdir ~/dockers/nginxproxymanager
$ cd ~/dockers/nginxproxymanager

/* SSL 인증서 저장을 위한 디렉터리 생성 */
$ mkdir data letsencrypt
$ vi docker-compose.yml

/* 이하 docker-compose.yml 내용 */
version: "3"
services:
  app:
     image: "jc21/nginx-proxy-manager:latest"
     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: "npm"
       DB_MYSQL_NAME: "npm"
     volumes:
       - ./data:/data
       - ./letsencrypt:/etc/letsencrypt
  db:
     image: "jc21/mariadb-aria:latest"
     restart: unless-stopped
     environment:
       MYSQL_ROOT_PASSWORD: "npm"
       MYSQL_DATABASE: "npm"
       MYSQL_USER: "npm"
       MYSQL_PASSWORD: "npm"
     volumes:
       - ./data/mysql:/var/lib/mysql
/* 컨테이너 실행 */
$ docker-compose up -d

이후 Letsencrypt 인증서 발급과 Nginx Proxy Manager 접속을 통해 기본 설정을 진행합니다.

Vaultwarden 후속 세팅 및 도커 재시작

How to Install Vaultwarden on Ubuntu 20.04

Vaultwarden를 넣어둔 디렉터리로 이동해 docker-compose.yml 을 생성 및 수정합니다.

$ vi docker-compose.yml

/* 이하 docker-compose.yml 내용 */
version: "2.1"
services:
   vaultwarden:
    image: vaultwarden/server
    container_name: vaultwarden
    volumes:
      - ./vw-data/:/data/
    ports:
      - 8088:80
      - 3012:3012
    restart: unless-stopped
    environment:
    - SIGNUPS_ALLOWED=false // 신규회원 가입 막기 (먼저 계정생성 후 진행할 것)
    - INVITATIONS_ALLOWED=false // 생성된 계정에서의 초대 차단
    - SHOW_PASSWORD_HINT=false // 비밀번호 찾기 차단

수정 완료 후 다음 명령어를 통해 도커 컨테이너를 시작합니다.

/* 이미 컨테이너가 실행되어 있을 경우 */
$ sudo docker-compose down

/* 현 디렉터리에 있는 도커 컨테이너 실행 */
$ docker-compose up -d

Vaultwarden 버전 업데이트

마운트 된 볼륨만 살아 있으면 컨테이너 삭제·재설치해도 상관없지만, 만일을 대비해 진행 전 데이터 백업은 필수로 진행합니다.

Vaultwarden이 설치된 Docker 디렉터리로 이동 후 다음의 명령어들을 입력합니다.

/* 최신버전 풀 */
$ docker pull vaultwarden/server:latest

/* Vaultwarden 컨테이너 정지 및 삭제 */
$ docker stop vaultwarden
$ docker rm vaultwarden

/* Vaultwarden 컨테이너 생성 및 실행 */
$ docker run -d --name vaultwarden -v /vw-data/:/data/ -p 8088:80 -p 3012:3012 vaultwarden/server:latest

후기

리버스 프록시 쪽 설정하는 게 생소해서 시행착오가 좀 있었고 (원 글 출처에 스크린샷이 없어서 더 헤맸습니다.) 도커는 과거 서버 엔지니어 지인 및 회사에서 자주 듣던 단어라 겁났는데 의외로 명령어 몇 줄로 끝나서 쉬웠습니다.
사용하는 환경에서 클라우드가 차단되지 않고 추가 기능들의 가격이 저렴하다면 저는 전반적으로 Enpass가 더 잘 맞는 것 같습니다.

장점

  • 엄청 다양한 비밀번호 관리 서비스들의 컨버팅을 지원하는 점이 좋았습니다.

  • 첨부파일 혹은 별도 항목을 열기 위해 2차 인증을 걸 수 있습니다.
    (단, 마스터 비밀번호만 가능)

  • URL Autofill의 다양한 양식 지정 가능 (특히 정규식 지원)

단점

  • Enpass는 input 영역을 클릭 시 알아서 계정을 입력할 수 있도록 해주는데 비해 bitwarden는 추가 기능을 켜야 이메일·패스워드 자동완성이 됩니다.

  • bitwarden는 자동완성 기능이 하나의 계정을 기준으로 이루어져서
    다중 계정이 있을 경우 리스트에서 선택이 가능한 Enpass의 편의성이 더 높았습니다.

  • 신분증 이미지 등을 첨부 가능토록 되어있으나
    Enpass처럼 바로 볼 수 있는 게 아니라 다운로드만 가능합니다.

  • 금융, 여행, 라이센스 등 Enpass에 비해 기본적으로 제공하는 카테고리가 적습니다.

  • Enpass와 달리 로고 혹은 심볼 이미지를 등록하지 못해 리스트에서 항목을 찾기 어렵습니다.

]]><![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[디자인 벤치마킹 최강자 — Eagle]]>https://lab.dongri.me/p/eagle-design-reference-tool-reviewhttps://lab.dongri.me/p/eagle-design-reference-tool-reviewSun, 13 Dec 2020 13:59:23 GMT

디자인 영감을 얻을 수 있는 다양한 사이트 (혹은 서비스)들이 존재하지만, 자체 스크랩 기능을 지원한다. 해도 한두 곳만 이용하는 것이 아니므로 매번 불편했습니다.

그동안 가장 큰 대안이라고 생각한 벤치마킹 도구가 Pinterest이지만, 벤치마킹한 원본 사이즈를 얻는 방법이 불편하고 오랜 기간 사용해도 잘 익숙지 않아 주로 클라우드 동기화를 걸어놓고 로컬에 저장해놨습니다.

로컬의 단점인 저장만 하고 다시 보지 않는다는 점과 디렉터리로 분류하지만, 시간이 갈수록 뒤죽박죽 해지고 큰 대안이 없어 그대로 사용하다 최근에 Eagle이라는 멋있는 도구를 발견해 지금까지 잘 사용하고 있는데요, 도메인이 .cool로 끝나는 것과 같이 쿨한 Eagle을 소개해 보려 합니다.

Eagle - A design library to fuel your best work

공식 홈페이지에 나와 있는 기능이 더 많지만, 제가 사용하면서 가장 만족했던 부분을 나열하자면…

다양한 포맷 지원

운영 디자인을 하면서 사용되는 일러스트나 모션이 들어간 애니메이션은 주로 Dribble에서 벤치마킹하는데 Dribble은 트레픽 최적화를 위해 JPG나 PNG, GIF가 아닌 webm, webp, MP4 등을 사용합니다.

Pinterest에서 위 확장자를 지원하는지는 모르겠지만, OSX는 기본 미리 보기(스페이스 누르면 나오는)에서 지원하지 않아 xee 등의 별도 프로그램을 사용해야 하며, windows의 경우 코덱을 설치하면 기본 미리 보기에서 뜨는 거로 알고 있지만 기본 상태에서는 지원하지 않습니다.

하지만 Eagle은 이러한 확장자들을 모두 지원하기 때문에 자료를 저장한 뒤 살펴보기가 수월합니다. 특히 PDF도 지원해서 기업 PPT나 브로슈어를 저장할 때 매우 유용합니다.

UI 인터렉션이나 애니메이션 벤치마킹 할때 장점이 극대화 되는 Eagle

특히 UI의 경우 인터렉션이나 애니메이션을 벤치마킹해야 하는 경우가 많은데, 특성상 화면을 녹화하거나 원본이. MP4인 경우가 많아 관리하기가 어려웠는데 Eagle은 이러한 불편함을 한 번에 해소해 줍니다.

다양한 분류체계 지원

01. 이미지 태그 및 설명

우측 패널을 통해 태그와 설명, 사이트 주소등을 입력할 수 있습니다.

단순히 파일만을 저장하는 것만 아니라, 태그를 지정하고 이미지에 대한 설명 혹은 출처 등 다양한 정보를 넣을 수 있습니다. 이벤트 프로모션의 경우 목적이나 시즌에 따라 표현 방법이 비슷비슷한데 이를 태그로 묶으면 나중에 따로 모아보기가 매우 편리합니다.

02. 폴더 계층과 색상지정

하위계층을 여러개로 나눌 수 있고 색상을 지정할 수도 있습니다.

폴더 계층 또한 여러 개를 지원하고, 색상별로 구분할 수 있으며 주로 SASS 서비스를 벤치마킹할 때 서비스 이름으로 구분해 간단한 설명과 함께 몰아넣을 수 있어 Notion과 같은 별도의 서비스를 쓰지 않아도 돼서 좋았습니다.

03. 등급 지정

이건 사용하다 단축키를 잘못 눌러 알게 된 기능인데, Adobe Lightroom과 같이 등급을 지정할 수 있어 벤치마킹한 자료마다 퀄리티 등을 따져 등급을 매길 수 있어 활용도가 높습니다.

유료 이미지 뷰어 뺨치는 편리함

마우스 휠 동작 시 확대/축소를 할지, 긴 이미지의 스크롤을 할지 등 가장 기본적이면서 필요한 기능을 제공합니다. 이미지 더블클릭 시 어디서 열지 등 세부적인 부분을 지정할 수 있으며 중복되는 리소스는 그대로 가져올지, 덮어씌울지 등을 선택할 수 있습니다.

한글화 지원

무엇보다 Eagle은 한글을 기본적으로 지원해서 편합니다!
xee를 유료로 사용하고 있지만 영문이라 기본적인 것 빼고는 손댈 엄두가 안 나는데 이 녀석은 한글을 지원해서 익숙해지기 쉬웠습니다.

살짝 아쉬운 클라우드 동기화 지원

블랙프라이데이 할인도 안 하는 Eagle을 결제한 이유 중 하나는 클라우드 동기화가 되기 때문인데요, 회사와 개인 PC 두 디바이스에서 동일한 벤치 자료들을 보기를 원했습니다.

Eagle은 하나의 큰 디렉터리 안에 다뤄져 가장 큰 부모 디렉터리(라이브러리라고 불리는)를 클라우드 서비스별 동기화 디렉터리에 지정하면 됩니다.

집에서는 맨날 뱅글뱅글 돌고, 변경 내용이 생겼다 없어졌다 하지만 다운로드만 되고 업로드는 전혀 안 됩니다.

저는 onedrive를 사용하는데, 회사 컴퓨터에서는 동기화가 제대로 되나 집에서는 다운로드만 되고 수정할 때는 클라우드 업로드가 되지 않아 enpass와 같이 애플리케이션 내에서 직접 연동해서 관리하는 방식이었으면 좋지 않을까 하는 아쉬움이 있습니다. 혹시 한국어가 가능한 Eagle 관계자가 이 글을 본다면 참고해 주시면 좋겠습니다.

다양한 브라우저, OS 플랫폼 지원

돈을 주고 사도 안 아까운 게, 일단 Windows와 macOS 둘 다 지원합니다. 또한 처럼 바로 이미지를 저장하고 스크린 캡처를 찍을 수 있는 브라우저 확장프로그램을 지원하는 데 대부분의 브라우저를 지원하고 있습니다.

이미지를 마우스 hover 하면 뜨는 pin 버튼을 눌러 저장하는 Pinterest는 사이트마다 Javascript의 충돌로 깨지거나, 원치 않은 환경에서도 보여 불편하지만, Eagle은 이미지를 잡고 아래로 끄는 동작을 하면 쉽게 저장할 수 있어 웹서핑에 방해되지 않고 직관적이어서 좋았습니다.

저처럼 Pinterest를 사용하기 불편한데, 로컬에서 벤치마킹을 관리하자니 다운받기만 하고 잘 보지 않으신 분이라면 Eagle을 사용해 보시는 것을 적극적으로 추천합니다.

]]><![CDATA[Mash Up Your Ideas!]]>https://lab.dongri.me/p/mash-up-your-ideas-workshop-reviewhttps://lab.dongri.me/p/mash-up-your-ideas-workshop-reviewSun, 08 Nov 2020 14:48:23 GMT
MASH UP YOUR IDEAS
매시업 캐치프레이즈 — mash-up.tistory.com

10월 10 일부로 Mash-UP 9기가 끝났습니다. 그사이 바쁜일이 많아 이제서야 9기를 곱씹어 보며 마무리하는 글을 남겨봅니다.

Mash-Up은 개발자와 디자이너들이 모인 IT 연합 동아리로, 직장인-학생 모두 매 기수 마다 다양한 프로젝트와 스터디를 진행합니다.

뻔한 글이 될 수도 있지만, 처음 IT 개발-디자인 연합 동아리를 알아보거나 고민하는 분들에게 도움이 되었으면 싶어 Mash-UP 9기 활동들을 나열해 보려 합니다.

주니어 디자이너로서 성장에 대한 갈망으로 시작한 Mash-UP 활동

신입 디자이너로 집-회사-집-회사 무한 루프를 타는 중, 주니어 디자이너로서의 성장에 대한 갈망을 느끼고 사이드 프로젝트나 스터디를 통한 성장과 손 굳음방지(?)를 위해 Mash-UP에 참여하게 되었습니다.

학부 시절에는 멋쟁이 사자(개발 동아리) 정도만 알았었고, 디자인-개발 연합동아리가 있다는 것은 회사에 다니면서 개발 인턴 친구를 통해서 였습니다.

동아리 활동을 한 번도 해본 적이 없어, 동아리 가입을 위해 지원서를 작성하고 오프라인 면접을 하는 과정을 거치며 느낀 생소함이 글 쓰는 지금도 느껴집니다.

Mash-UP 9기 시작

OT 발대식 및 달력미션(한명은 합성을…) — 초상권을 위한 blur 처리

COVID-19가 심하지 않을 시기여서 오프라인에서 처음 발대식을 했습니다. 낯을 많이 가리는 터라, 처음 보는 모르는 사람들과 어색하게 긴장하고 있어서 집에 가서 바로 쓰러져 잠을 잤던 것 같습니다. 동아리 내에서 조를 짜서 친해지기 위한 달력 미션(5월, 가정의 달)을 진행하기 위해 롯데월드에 방문해 재밌게 놀면서 클리어했습니다.

몇 번의 전체 모임과 프로젝트팀 결성 그리고 스터디

몇 번의 전체 모임을 진행하고 9기 진행을 위한 프로젝트팀을 결성했습니다. UX/UI, Backend, Web, Android, iOS 총 5개 팀에서 사전에 조사한 희망 플랫폼에 따라 나뉘어 프로젝트팀을 구성합니다.

저는 UX/UI 팀에서 Backend, Web, Android 3개의 팀에서 몇몇이 나와 프로젝트팀을 결성하게 되었습니다. 프로젝트와 별개로 해당하는 팀에서는 지속적으로 팀별 스터디를 진행합니다.

팀별 스터디

UX/UI는 포트폴리오, 아티클, 웹 스터디, 모각디 등이 있었고, 저는 취업 준비상태가 아니어서 아티클 스터디와 모각디를 진행했습니다. 매월 마지막 주에 온라인으로 모여 각자 작성한 아티클을 공유하며 서로 인사이트를 얻어갔습니다.

다영님의 재미있었던 챗봇 제작 후기 (https://uxdlab.tistory.com/14)

매달 주기적으로 직접 글을 작성하거나 해외의 글을 번역하느라 주말마다 바빴지만, 스터디에서 발표도 하고(발표 연습) 다양한 정보들을 얻어가면서(인사이트) 많은 도움이 되었습니다.

Android & WEB 프로젝트 면블리

플랫폼에 크게 제한을 두고 싶지 않았고 Android & WEB 프로젝트팀에 합류하게 되었습니다.

초반에 온라인 위주로 모여 면도 + 러블리라는 주제로 면도날 교체 주기와 면도기에 대한 다양한 정보를 알려주는 커뮤니티 앱을 구상했다가 오프라인 해커톤 때 생활용품 교체 주기 알림 서비스 tich(time to change)로 바뀌게 됩니다.

오프라인 중간 해커톤 — 초상권을 위한 blur 처리

COVID-19 및 바쁜 일상의 삶으로 온라인에서만 조금씩 진행되다 중간 해커톤에서 만난 뒤 프로젝트의 진행 속도가 급전개되고 서로 친해지게 된 계기가 되었습니다. COVID-19로 인해 중간 해커톤 이후 마지막 해커톤까지 서로 만나지 못해 매우 아쉬웠습니다.

Mash-UP에서 처음 사용해본 Figma

원래는 Sketch와 Photoshop & Illustrator 조합으로만 사용했었는데, 프로젝트를 진행하면서 처음 Figma를 사용했습니다. 프로젝트 때 사용했는데도 익숙해지지 않아서 아쉽지만… 디자이너-개발자가 동시에 함께 협업할 수 있는 색다른 경험이 되었습니다.

프로젝트 결과물은 play store에 출시되기 직전인 것으로…

UX/UI팀 발표

역시 COVID-19로 인해, 전체 모임과 함께 비대면 온라인 화상 플랫폼으로 진행됐습니다. 아티클 스터디와 비슷하다는 느낌을 많이 받았는데 팀 내에서 몇 명씩 나누어 디자인을 주제로 각자 발표하는 시간을 가졌습니다.

COVID-19로 인한 비대면 동아리 활동

그래도 재미있었던 유익한 Mash-UP

온라인으로 진행된 비대면 토크쇼 — 초상권을 위한 blur 처리

COVID-19가 심화되면서 기획됐던 MT가 취소되고, 3개월 동아리 활동을 쉬었습니다. 이후 동아리 운영진에서 동아리 재개를 위해 큰 노력을 했음이 느껴졌는데요, 대표적으로 온라인 토크쇼였습니다.

취업과 이직, 연애에 관한 주제로 토크쇼를 진행하고, 외부 인사를 초청해 강연했습니다. 사정상 토크쇼를 끝까지 참관하지 못했지만, 외부 인사 강연은 많은 도움이 되었습니다.

또 각자 팀마다 지원받아 전체 발표를 진행하는데, 그로스 해킹과 Z세대에 관한 트렌드를 깊이 있게 알 수 있어 유익했던 시간이었습니다.

Mash-UP 9기 마무리

최종 발표 또한 비대면 온라인으로 진행함으로써 Mash-UP 9기가 마무리되었습니다. 첫 동아리 활동, 직장을 다니면서 다양한 사람들과 프로젝트를 진행하면서 많은 것을 보고 느끼며 성장한 시간이었습니다.

Mash-UP 9기를 진행하면서 느낀 점을 정리하자면 아래와 같습니다.

  • 열정이 많은 사람들이 똘똘 뭉쳤다.
    직장, 학교생활 (대부분 4학년 취업 준비)을 하면서 이렇게 에너지를 쏟는 것에 대한 감탄과 존경. 한 사람 한 사람 배울 점들이 많았습니다.

  • 우물 밖에서 다양한 사람들과의 경험
    현 직장에서는 WEB UI/UX에 한정되어 작업을 하고 있습니다. 이론적으론 알지만 실제 Android APP 디자인은 Mash-UP이 처음이었습니다. 맛보기 정도였지만 혼자 포트폴리오용 컨셉 디자인을 하는 것과 개발자, 다른 디자이너와 부딪히며 다른 플랫폼을 디자인하는 것이 다름을 알게 되었습니다.

  • 일단 뭐라도 하게 됨
    집-회사-집-회사 무한 루프에, 집에 오면 아무것도 하기 싫어 게임을 하거나 영상만 보지만 동아리 활동을 하게 된다면 타의로 뭐라도 하게 됩니다. 자의로 열정을 가지며 진행하면 좋겠지만, 어쨌든 뭐라도 하는 게 안 하는 것보다 낫다고 생각하기에…

  • 개인 시간의 할애, 단체활동
    직장과 동아리를 겸하며 힘들었던 것은, 주중엔 오로지 직장에 에너지를 쏟고 주말엔 밀린 집안일과 휴식으로 지낸 것과 달리 주말 시간을 동아리 활동에 투자해야 한다는 점입니다. 따라서 동아리 활동하기 전 이러한 점에 대해 신중히 잘 생각해 봐야 함을 느꼈습니다. 프로젝트에 더 많은 시간을 할애해 디자인 완성도를 높였으면 하는 아쉬움이 남습니다. 소수의 개인이 아닌 여럿이 모인 단체 활동이기에 사소한 트러블이 생길 수도 있는데 부딪히면서 슬기롭게 헤쳐 나갈 수 있는 지혜를 갖춰야 함을 느꼈습니다.

Mash-UP 10기 모집 중

개발에 목마르고 디자인에 허기진 당신,
매쉬업에서 재미있는 프로젝트같이 안 할래요?

Mash-up | IT 연합 동아리

회사가 아닌 곳에서 다양한 사람들과 교류하며 프로젝트를 진행할 수 있는 경우가 거의 없기 때문에 좋은 기회라고 생각합니다.

즐겁기도 하지만, 힘들고 지칠 때도 있지만 그 안에서 많은 사람들과 프로젝트, 동아리 활동을 하면서 값진 소중한 경험을 얻어갈 수 있습니다. 다양한 사람들과 함께하며 인사이트를 얻어가실 분들은 Mash-UP 10기에 지원해 보시는 것은 어떨까요?

]]><![CDATA[저전력 작은 크기의 셋톱박스로 교체해 보자!]]>https://lab.dongri.me/p/kt-uhd4-m770-settopbox-self-installhttps://lab.dongri.me/p/kt-uhd4-m770-settopbox-self-installSun, 11 Oct 2020 16:33:25 GMT평소 IT 커뮤니티를 훑어보는데, 최근 KT Olleh TV 5년 이상 사용 시 일부 셋톱박스에 한해서 무상으로 교체가 가능하다는 내용과 신형 셋톱박스의 크기가 작아졌다는 글을 보고 도전해 봅니다.

출처: https://namu.wiki/w/olleh%20tv, 정확히는 UHD없는 SMT-E5015 버전

기존의 셋톱박스는 Olleh의 ‘O’의 라운드 값에 맞춰 디자인은 잘 되어있고, 전 세대들에 비해 크기가 작아졌다지만 그래도 크고 발열이 있어 여름에 힘든 단점이 있습니다.

그 크기가 소형스마트폰 크기로 줄어들고, 소비전력도 낮아진 점이 메리트가 있어 추석이 끝나자마자 신청합니다. (커뮤니티 대부분은 위 이유보다는 넷플릭스 지원이 더 큼…)

신청하기

KT톡을 통해 전화번호를 알아낼 수 있습니다.

100번에 전화하면 되지만, 여러 상담원 혹은 버튼을 거쳐야 하므로, 080–001–0122를 통해 진행합니다. 상담사와 연결이 되면

5년 이상 장기 이용자의 경우 UHD4 셋톱박스로 무상 교체가 가능한 것으로 알고 있어 연락드렸습니다.

라는 식으로 말씀하시면 알아서 진행해 줍니다. 이때 출동비 27,500원이 청구된다는 안내가 나오고 셀프개통으로 진행하고 싶다고 말하면 추가 비용 없이 접수 진행됩니다. 상담을 진행하며 TV 한 대 더 연결하라는 권유를 받게 되는데 생각해 보고 전화하겠다는 식으로 거절했습니다. (요즘 KT에서 추가상품 판매 실적을 강요하는 것 같았습니다.)

통화를 마치면, 셋톱박스 변경 안내와 계약 변경에 관한 문자를 받게됩니다. 계약 변경은 기존 상품의 약정과 별개로 셋톱박스만 변경되기 때문에 추가 약정이나 약정기간이 늘어나는 걱정은 하지 않으셔도 됩니다.

셀프개통 KIT 수령과 설치부터 개통까지…

수령 및 구성품

KT 셀프개통 지원센터라는 택배상자를 받게 되고, 안에는 아래의 용품들이 있습니다.

  1. 신형 UHD4(M770) 셋톱박스

  2. TP-link 허브

  3. CAT5 선

  4. 기존 셋톱박스 반납용 박스

보통 셋톱박스만 회사 자산 및 임대로 부여하고, 리모컨과 같은 부가 요소들은 소모품으로, 고객자산이 되는데 셋톱박스를 교체했더니 허브가 생겼습니다!

설치하기

셋톱박스가 담긴 상자를 열면, 기본 설명서와 함께 작아진 셋톱박스를 볼 수 있습니다.

기존 크기에 비해 엄청 많이 작아졌습니다. 리모컨은 버튼이 달라졌지만, 기존 리모컨의 디자인은 그대로 계승합니다.

UHD4(M770)의 가장 큰 장점은 소비전력이 2.9W / 1.0W로 낮다는 점입니다. 동봉된 어댑터에 렌포트가 탑재되어 USB-C 타입으로 셋톱박스에 인터넷과 전원이 동시에 공급되는 부분은 특이합니다.

무선 연결도 가능하지만, 사제 공유기가 아닌 KT의 특정 공유기를 유로로 임대해야 가능하고 불안정하다는 의견이 많아 유선으로 연결하는 것을 권장합니다.

랜선은 가정집 네트워크에 따라 다르지만, 저는 받은 허브는 사용하지 않고 기가 모뎀 랜포트와 연결했습니다.

설치 방법은 간단합니다. 윗부분의 HDMI 포트는 동봉된 케이블로 TV와 연결하고, 인터넷 연결선 (KT 모뎀과 연결)을 전원 어댑터에 연결해 준 뒤 USB-C 케이블을 셋톱박스와 연결해 주기만 하면 됩니다.

개통

정상적으로 연결이 됐다면, 위와 같은 셀프개통 인증 화면이 나오고 명의자 휴대폰 번호로 발송된 인증 번호를 입력하고 1~2분이 지나면 개통이 완료됩니다.

셀프개통에 관한 자세한 설치 방법은 KT Youtube에 자세히 나와 있으므로 참고하시면 도움이 됩니다.

반납하기

개통이 되면 자동으로 택배 수거 신청이 진행됩니다.

개통과 동시에 전산으로 택배 반품 신청이 접수됩니다. 기존에 사용하던 셋톱박스는 동봉된 반납용 박스와 뽁뽁이를 감싸 포장한 뒤 택배기사님이 수거할 때 드리면 끝납니다.

어댑터는 제외하고 반납하라 했지만, 처리하기가 애매하고 상태가 멀쩡해 소모품인 리모컨을 제외하고 모두 동봉했습니다.

후기

초기 셋톱박스 비밀번호가 아닌 이전 셋톱박스에서 사용하던 비밀번호가 그대로 이어져 설정 항목도 클라우드에서 가져오는 줄 알았는데, 셋톱박스 내의 설정은 사용자가 알아서 설정해야 합니다. (비밀번호는 공통으로 관리되는데 설정값은 그렇지 않은 점은 아쉽습니다)확실히 발열도 줄고, 부피가 크지 않아 크롬캐스트처럼 간단하게 뒷면에 달아놓을 수 있어서 좋았습니다. 리모컨도 IR + 블루투스 방식을 사용하며 특히 벽걸이 TV 설치할 때 UHD4(M770)의 장점이 커질 것 같습니다.

넷플릭스는 사용하지도 않고, 아직 사용할 생각이 없어서 써보지 않았습니다. 그리고 아직 넷플릭스가 탑재된 펌웨어 배포가 안 된 거로 알고 있고요… 신형 셋톱이라 불안정했던 적은 딱 한 번 발견했고, 그 이후로는 발견하지 못했으며 기본 시청하는 모든 동작들은 버벅임댐 없이 원활하게 이용할 수 있었습니다.

셀프개통이라는 것을 처음 이용했습니다. 당시 금요일 야근 후 집에 늦게 도착해 설치했습니다. 보통 기사님이 방문하시려면 평일만 가능해 연차를 사용해야 할 텐데 직접 시간 제약 없이 설치할 수 있어서 좋았습니다. COVID-19로 인해 걱정하시는 분들한테도 좋을 것 같고요… 이사나 신규 개통이 아닌 부분에 대해서는 셀프개통이 가능한 범위가 많아지면 출장비용도 아끼고 시간도 절약할 수 있어 점차 확대되었으면 하는 바람입니다.

https://www.youtube.com/watch?v=-l9hM_2Q1k4 현직 기사로 추정되는 분이 달아주신 의견

다만, 기계를 다룰 줄 모르거나 본인의 가정 인터넷 구성이 어떻게 되어있는지 모른다면 셀프개통 보다는 출장 서비스를 이용하시는 것을 권장해 드립니다.

]]><![CDATA[Galaxy S6 Edge 분해기]]>https://lab.dongri.me/p/galaxy-s6-edge-teardownhttps://lab.dongri.me/p/galaxy-s6-edge-teardownSun, 13 Sep 2020 09:03:17 GMT배터리 & 미들프레임 교체

그동안 취업 준비할 때 가죽가방을 사면서 덤으로 받은 카드 지갑을 들고 다녔는데, 바지 주머니에서 잘 빠져서 5년 전 쓰던 Galaxy S6 Edge를 서브 휴대전화 & 지갑으로 들고 다니기 시작했습니다.

발열이 심하고 배터리가 금방 닳는 게 종특이라지만, 너무 죽죽 다는 게 교체해 줄 때가 되었다고 느껴 Aliexpress에서 미들 프레임과 배터리를 주문해 자가 교체하기로 합니다. 특히 몇 번 떨어뜨리니 푹푹 파인 게 어찌나 마음이 아픈지… 미들프레임을 사는 게 돈이 아깝다 싶기도 했지만, 나중에 같이 사길 정말 잘했다는 생각으로 바뀝니다.

모서리, 상·하단 스크레치와 푹푹 패인 자국들…
갤럭시 s6 엣지 배터리 자가 교체기

위의 블로그에 동일한 교체기 (+미들 프레임까지…)도 있겠다 약 2.5주 후 배터리, 미들 프레임을 수령합니다.

Galaxy S6 Edge, 미들 프레임, 배터리 및 공구

미들 프레임은 생각보다 금방 왔는데, 배터리는 조금 늦게 받았습니다. Aliexpress에서는 배터리 운송을 보통 UPOST라는 곳을 통해 보내는데, 중국항구에 선적하면 그 이후로 배송 상태를 조회할 수 없기에 기다림의 시간이 더 크게 느껴졌습니다.

1. 뒷판 분해하기

배터리와 미들 프레임을 분리 하려면 우선 기기의 뒷부분은 열을 가해 떼어내야 합니다. 저는 히팅건이 없으므로 드라이기로 오랜 시간 열기를 쐬어줍니다.

히팅건도 없고, 드라이기로 지져도 안열리는 뒷판

열기를 가하면 금방 열릴 것 같으나 진짜 안 열립니다. 뽁뽁이로 집어도 안 열려 틈 사이를 일자 드라이버로 패어서 겨우 뜯어냈습니다.

보호필름을 붙이고 사용한지라 생각보다 깨끗한 뒤판을 재활용할 수 있다고 했는데, 뒤판과 하단 미들 프레임이 패일 수밖에 없어 아쉬웠습니다. 시작부터 기기 외관에 손상을 입히게 돼서 앞서 미들 프레임을 같이 구매하길 정말 잘했다고 느꼈습니다.

일자 드라이버로 뒷판과 미들 프레임 사이를 쑤셔 겨우 분리합니다.

2. 미들 프레임 분해

뒤판을 분리하면 뒤판과 미들 프레임 사이에 접착제가 남게 되며, 깨끗하게 제거해 줍니다. (단순 배터리만 교체한다면 그대로 두거나 별도 구매한 스티커를 결합 시 붙여줍니다)

그리고 꼭 잊지 않고 유심 모듈을 분리합니다.

주변에 남아있는 접착제를 제거합니다.

제거 후 미들 프레임에 메인보드와 결합되어있는 나사를 모두 제거합니다.

미들 프레임과 메인보드와 결합된 나사들

나사를 모두 풀었다면 무선충전 + 결제모듈이 달린 패드를 들어 올리고 한손은 배터리를 누르고, 다른 손은 디스플레이와 미들 프레임 틈을 손톱으로 벌리면서 밀어줍니다.

이때, 앞면의 하단버튼과 연결된 보드가 비틀어지면서 부서지거나 휘어질 수 있기 때문에 잘 보면서 조심해야 합니다.

무선충전 + 결제모듈 패드를 아래에서 위로 들어 올린 후, 배터리를 앞쪽으로 밀어줍니다.

3. 무선충전 + 결제모듈 패드 옮기기 (미들 프레임 교체시)

분리 후, 미들 프레임을 교체한다면 기존의 미들 프레임에 달린 무선충전 + 결제모듈 패드를 새 미들 프레임에 옮겨 줍니다.

코일과 충전패드는 위로 올라오고, 메인보드와 접촉되는 면은 미들 프레임의 뒤에 붙여주시면 됩니다.

뒤판, 미들 프레임, 메인보드가 분리된 모습

4. 배터리 교체하기

배터리를 교체하려면, 메인보드를 떼어내야 합니다. 안테나선과 결합된 모듈을 젖혀줍니다.

안테나와 모듈 접합부를 젖혀줍니다.

메인보드는 완전히 분리하는 게 아니라, 위에서 젖혀 아래로 뒤집어 줍니다.

메인보드를 위에서 아래로 젖혀줍니다.

배터리 또한 접착제로 고정되어 있는데, 분리할 때 힘이 많이 들어갑니다. 특히 리튬배터리는 접히면 폭발할 가능성이 높으니 조심조심 분리하며 남겨진 잔여 접착제를 제거합니다.

접착제가 강해 배터리가 살짝 뒤틀리고, 외관 포장이 뜯겼습니다.

분리했다면, 새로운 배터리에 접착스티커를 붙여줍니다. 배터리가 정품이 아니라 커넥터가 정품처럼 딱 맞아떨어지지 않으니 바로 끼워 넣지 마시고, 기판과 연결한 후 넣는 것이 포인트입니다.

기판에 배터리를 끼워 넣고 메인보드를 부착한 뒤 배터리 커넥터를 연결하려니 안 끼어져서 식겁했습니다. 댕기고 비틀어도 안 끼워 지길래, 아예 배터리를 분리한 후 먼저 끼워 넣고 붙였습니다.

배터리에 접착 스티커를 붙인 뒤 바로 기판에 끼우지 말고, 메인보드와 커넥터를 연결한 뒤 끼워주세요.

5. 조립은 분해의 역순

위의 분해 방법을 역으로 조립하면 끝.

미들 프레임 교체 시 다시 조립하기 전 꼭 버튼이 똑딱 잘 눌리는지 확인해 주시고, 만약 잘 안 눌린다면 기존에 미들 프레임 에서 떼와 옮겨주면 됩니다.

저는 전원 버튼이 잘 안 눌려, 기존 프레임에 부착되어 있던 버튼을 옮겨 심었습니다.

6. 애로사항

정품이 아닌 가품은 케이블이나 배터리 길이들이 약간씩 다릅니다. 전에 iPhone4 액정을 갈다가 케이블 길이가 맞지 않아 실패한 적이 있기 때문에 분해하기 어렵거나 이런 상황에 대처하기 어렵다면 꼭 공식 서비스 센터나 사설 수리센터에 맡기는 것을 권장합니다.

뒷판을 분해하는 것 빼고는 iPhone보다 쉽고 간편했습니다. iPhone은 3GS 모델 이후엔 나사도 많고, 마모되기 쉽고 신경 쓸 부분이 많아 난이도가 높습니다.

교체 비용으로 차라리 최신 안드로이드에 삼성페이가 되는 저가형 Galaxy 시리즈를 살 수도 있지만 CPU가 Galaxy S6 Edge와 비슷하고 무선충전이 되지 않는 큰 단점이 있어서 보류했습니다.

필수 애플리케이션만 설치해서 쓰는데도 버벅거리는 것을 보아 결제용으로만 쓰다가 나중엔 플래그쉽 중고로 갈아타려고 합니다.

내용이 거의 동일하지만, 교체에 성공할 수 있게 도와주신 TJobim님께 감사하며… (저분 블로그가 더 자세하게 잘 나와 있어요!)

]]><![CDATA[다국어 웹 타이포그래피 섞어짜기: 한글·영문 조판 기준]]>https://lab.dongri.me/p/multilingual-web-typographyhttps://lab.dongri.me/p/multilingual-web-typographySun, 16 Aug 2020 20:08:39 GMT

현재 디자인 을 하는 서비스들은 국문(Korean), 영문(English), 일본어(Japanese)를 제공하고 있으며, 이를 모두 지원하는 글꼴 — Noto Sans (혹은 본고딕) CJK을 사용하고 있습니다.

Noto Sans는 오픈소스이며 7종의 다양한 무게가 있어 많은 곳에서 즐겨 찾는 글꼴이기도 합니다. 글꼴에 감정이 없고, 적당한 완성도와 안정감을 갖추고 있어 IT 서비스나 회사의 객관적인 내용을 전달하기에 적합합니다. (윤고딕700 시리즈가 힌팅이나 자폭이 넓어 개인적으로 더 선호하지만 유료…)

특히 CJK 판은 한·중·일(+라틴 알파벳)을 모두 지원하며 다국어를 섞어 짤 때 어우러짐이 좋고 편리한 것이 장점입니다. 앞서 국문, 영문, 일본어를 이 글꼴 하나로 모두 아우를 수 있으므로 서비스하는 디자인 시스템에서 본문용 글꼴로 사용해 오고 있었습니다.

본문은 NotoSans를, 제목용 영문과 큰 숫자는 Sofia를 사용해 오다 내부에서 영문 버전에서 외국 서비스의 느낌이 더 어우러졌으면 좋겠다는 의견이 나옵니다.

출처: http://worklife.kr/

정확히 어떠한 점에서 글로벌 서비스처럼 안 느껴지는지, x height가 작다던가 특정 문자가 예쁘지 않다거나 하는 구체적인 명확한 이유가 있었으면 좋겠지만 모호한 “느낌” 으로 “우리 서비스도 외국 서비스처럼 세련된 타이포를 사용했으면 좋겠다”고 말하기 때문에 애매합니다.

디자이너와 개발자가 소통할 때 객관적으로 설득을 해야 한다 하지만, 반대로 요구하는 건 전혀 객관적이고 설득 적이지가 않…

서비스가 국문과 영문(혹은 영어권) 두 가지 언어만 지원한다면 상대적으로 쉽게 바꿀 수 있지만 세 가지 언어를 섞어 짤 때 모두 어우러지게 해야 하므로 어떻게 해야 하나 고민에 빠집니다.

가장 먼저 떠오른 글꼴들…

스포카 한 산스 (Spoqa Han Sans)

개인적으로 스포카 한 산스는 숫자가 예뻐 좋아합니다.

Noto Sans를 기반으로 커스한 글꼴이기 때문에 한·영·일에 사용하기 가장 적합한 글꼴입니다. 웹 폰트로 사용하기 적합하도록 글리프를 덜어내 용량을 줄였고, 라틴 알파벳 일부와 숫자를 커스텀해 심미성이 높습니다. (NotoSans의 숫자가 싫어 가격표기 부분에 따로 Sofia를 사용하곤 했습니다)

디자인 시스템을 개편하면서 초기에 스포카 한 산스를 사용했으나, Windows 환경에서 일부 글리프가 깨져서 나오는 문제가 있었기에 후보에서 제외합니다.

Univers, San Francisco + NotoSans 섞어짜기

5월달에 본 책 《2017 내가 쓴 한글 폰트》의 본고딕 파트에는 다음의 내용이 언급되어 있습니다.

부드러운 느낌의 로마자 산세리프 폰트를 그다지 선호하지 않다 보니 <Myriad>의 잔향이 있는 로마자가 아쉽다. 그 때문에 <Univers> 혹은 <San Francisco>와 함께 사용하는 경우가 많다.

한글활자연구회, 『2017 내가 쓴 한글 폰트』 (활자공간, 2019), 55p

완성도 있는 라틴알파벳을 조합해 실험해보고 서비스에 적용하고 싶었지만, Univers는 유료고, San Francisco는 타사에서 사용하는 것을 금지했기 때문에 눈물을 머금고 제외합니다.

다른 곳에선 어떻게 사용하고 있을까?

https://share.dongri.me/6Hbz

당장 떠오르는 국문(Korean)을 지원하는 글로벌 서비스가 많지 않고, 국내 대기업 사이트들과 타이포를 좀 잘 쓸 것 같은 이름있는 에이전시, 국내 기반 다국어 서비스들을 중점적으로 찾았습니다.

삼성(Samsung One)이나 ibm(ibm Plex)처럼 자사전용 다국어 서체를 제공하는 회사를 제외하곤 두 가지로 나뉨을 알 수 있었습니다.

  1. 국내 — Notosans + Roboto

  2. 영문 — Roboto, Proxima nova, inter (요즘 해외 서비스에서 많이 사용하기 시작함)

Helvetica도 있으나 유료 서체이며 대부분 후 순위로 넣거나, CSS Reset 개념으로 넣은 곳들이 대부분이라 제외했습니다.

그리고 의외였던 부분은 생각보다 다국적 서비스들은 국문(Korean) 폰트를 지원하지 않는 점이었습니다. (사이트 접속 시 굴림이나 맑은고딕으로 뜨던데 어떻게 보면 이게 글로벌 스타일 아닌지;;)

아예 처음부터 다국어를 지원하는 글꼴을 제외한 나머지 모두 대체글꼴의 개념으로 국문과 영문이 선언되어있을 뿐 애초에 따로 쓰거나(영문은 영문만 따로 특정 글꼴로, 국문은 국문만 쓰는 식으로) 같이 쓰일때 어우러질 수 있게 별도의 세부 조정을 하진 않았습니다.

Roboto ↔ Proxima nova ↔ Inter

framer에서 inter를 사용한다며 이를 사용하는 게 어떻겠냐 해서 기존의 NotoSans를 기준으로 많이 사용하는 Roboto와 Inter 그리고 Proxima nova를 비교하게 됩니다.

세가지 글꼴 비교해보기 (국문은 Noto Sans CJK KR)

상대적으로 투박한 Noto Sans와 비교하면 나머지 세 글꼴은 좀더 세련되 보입니다. Noto Sans 숫자 9의 Tail은 느슨하지만, 나머지는 덜 느슨해 올드해 보이지 않습니다. (뭣 모르는 진짜 주관적인 의견임을 고려해주세요)

Roboto는 1과 2-0이 쓰이면 사이가 다른 숫자에 비해 넓어보입니다. Proxima nova는 0-5의 사이가 1과 0에 비해 넓어보입니다. (예시 숫자는 임의 작성)

숫자는 Roboto가 예뻐 보이지만, 동일한 크기로 국문과 섞어 쓸 때 작습니다.

Proxima nova의 알파벳 a — Bowl이 너무 못생겨 보입니다.

Proxima nova 역시 국문과 섞어 쓸 때 작은 게 크게 드러나고 숫자 1과 2의 커닝이 다른 숫자와 달리 너무 붙어 보입니다. 또한 눌러쓴 듯한 느낌 때문에 자칫 귀여운 인상을 줄 수 있고, 국문 Noto Sans과 같이 쓸 때 크기가 작아 부적합 합니다. 그리고 알파벳 소문자 a의 bowl이 너무 못생겼습니다.

Inter는 무난해 보이고 역시 국문에 비해 작지만 X-height가 높아 차이가 크지 않았고 이로 인해 가독성 또한 높습니다. 숫자 2와 3이 아주 조금 좁았으면 좋겠지만 전체적으로 커닝이 어우러지게 잡힌 것 같아 Inter로 결정합니다.

Noto Sans에 비해 셋다 X-height가 작지만, 그나마 Inter가 제일 높습니다.

다만, 국문 본문을 medium으로 사용하는데 Inter의 medium과 비교했을 때 Inter의 medium이 Noto Sans의 medium보다 얇아, 한 단계 더 굵은 semi bold로 대체해서 사용하기로 했습니다.

Noto Sans CJK KR의 medium보다 Inter medium의 굵기가 더 얇습니다. (Inter의 굵기는 Semibold를 사용하는 것으로 차이를 보정합니다.)

실 서비스에 적용하기

원래는 영문은 Inter, 국문은 Noto Sans KR로 섞어 사용하려 했습니다. 하지만 단순히 대체 글꼴 선언만으로 지정하기엔 각자 다른 글꼴과 글리프 마다 세세하게 조정하기가 현실적으로 어렵고 성능상의 이슈 때문에 HTML의 Lang 속성에 따라 각각 다른 글꼴로 표현하기로 했습니다.

multilingualjs/multilingual.js

한글타이포그라피 학회에 등재된 다국어 섞어 쓰기를 제어하는 라이브러리가 있으나, Javascript로 일일이 구동되고 무거우므로 서비스에 적용하기엔 무리가 있습니다.

기존 서비스에서 일어의 경우 Noto Sans JP를 뿌려줬으나 서버사이드에서 언어에 따라 선택적으로 웹 폰트를 불러오는 게 아닌 css 상에서 import 하는 방식으로 이루어져 있는데, 이 경우 일어가 아닌 환경에서도 무조건 Noto Sans JP를 불러오게 되고 결론적으로 로딩속도가 느려지므로 제외하기로 했습니다.

한국어 임에도 불구하고 Noto Sans JP를 불러오는 모습

프롬디자인 UI LAB 스터디에서 플리토의 김동영 디자이너 발표의 영향도 있는데요, 플리토 서비스에서는 브랜드 지정서체는 브랜드 아이덴티티를 효과적으로 전달하는 수단이 될 수 있지만, 다국어를 지원하지 않으면 사용자에게 독이 될 수 있어서 시스템 폰트를 사용한다고 합니다.

UILAB_김동영_다국어 디자인을 위한 UXUI

국문에 Inter를 적용하지 않은 이유는 영문서비스처럼 느껴지지 않을진 몰라도 국문과 섞어짤때 라틴알파벳이 무리없이 잘 어우러지기 때문이며, 최종 다국어 섞어짜기(가 아니게 된) 글꼴 세팅은 아래와 같이 결정되었습니다.

  • 국문 (Korean) — Noto Sans KR

  • 영문(English) — Inter + Noto Sans KR (혹시라도 국문이 있을 경우를 대비)

  • 일어(Japanese) 및 기타 — 운영체제에 따른 시스템 폰트

마무리

디지털 폰트에서 Variable 기술이 나오고, 저용량의 압축효율이 높은 woff2 방식이 나오는 등 많이 발전하고 있지만, 편집디자인에서 Indesign의 합성글꼴처럼 세세하게 조정하지 못하는 점이 아쉽습니다. 기본 111,172자 최소 2,350자로 많은 한글 폰트를 웹에서 Weight 별로 불러오는 것도 제한을 많이 받습니다. 기술적으로 더 많이 발전이 이루어졌으면 하는 바람입니다.

저는 타이포그래피에 대한 깊은 내공이 없어 글자 하나하나 조판하는 식으로 하기보다는 국문의 크기와 얼마나 비슷하고 잘 어우러지는지, 숫자의 커닝을 보며 섞어짜기, 다국어 글꼴을 선정한지라 근거와 신빙성이 많이 부족해 더 많은 공부가 필요함을 느꼈습니다.

무엇보다도 이 글을 쓰게 된 무엇이 외국 서비스 같은 느낌이 들게 하며, 그렇게 만드는 명확한 이유를 찾아내지 못한 점이 아쉽습니다.

도움이 되는 글들 (본문에 소개한 글 제외)

]]><![CDATA[현대 터치 친화적인 디자인]]>https://lab.dongri.me/p/touch-friendly-designhttps://lab.dongri.me/p/touch-friendly-designSun, 19 Jul 2020 15:15:45 GMT구글의 크롬 엔지니어 매니저 Addy Osmani의 글입니다.

Modern Touch-Friendly Design

최근에 저는 베태랑 UX Designer인 스티븐 후버(Steven Hoober)와 터치 인터페이스에 대한 이야기를 나눴습니다. 후버(Hoober)의 “손가락, 터치 그리고 사람을 위한 디자인” 에서는 다음의 원칙을 권고하고 있습니다.

  • 화면 중앙에 주 콘텐츠(Primary)와 동작(Actions) 배치

  • 가장자리 부근에 2순위 동작(Primary Actions)과 탭 배치

  • 메뉴 뒤에 3순위 기능(Tertiary functions) 배치

  • 사용자가 어떻게 플렛폼과 특정 상호작용을 하는지 조사 합니다. 그립(Grip), 수행(Task), 문맥(Context)이 모두 핵심입니다.

다음은 앱을 만드는데 있어 이를 기반으로 디자인하려 노력하는 터치 친화적인 가이드이며, 다른 사람들에게도 추천합니다. Youtube와 Twitter의 모바일 웹에 위 가이드를 시각화 해보았습니다.

Addy Osmani 이미지 번역 추가 (Dong-gri)

더 깊게 파고들면, 실 생활에서 터치을 위한 디자인 하기 위한 후버(Hoober)의 발견법(heuristics)은 모든 기기에 존재합니다.

  • 한가지 방법이 아닌 다양한 방법들로 사용자가 기기를 사용할 수 있도록 디자인

  • 사람들이 화면의 중앙을 본다. — 핵심 콘텐츠를 중앙에 위치

  • 사람들이 화면 중심을 터치한다. — 가능한 핵심 동작을 중앙에 위치

  • 사람들은 그들이 본 것만 탭(tap)한다. — 터치 타겟 주변에 여백을 두어 사용자가 탭(tap)하고 상태 변화를 볼 수 있게 한다.

  • 사람들은 다양한 방식으로 다른 기기를 사용한다. — 사용자가 UI를 사용하는 방식에 대한 데이터를 수집한다.

왜 이런것들을 신경쓰는 건가요?

터치 상호작용에 대한 UX 리서치 결과는 다음과 같습니다.

  • 사용자의 75%가 엄지로 터치합니다.

  • 그러나 사용자의 49%는 한 손으로 잡고, 36%는 한손으론 스마트폰을 잡고 다른 손으론 터치하며, 10%는 양쪽 엄지를 사용합니다. (이로 인해 75%의 수치가 약간 오해의 소지가 있습니다.)

  • 한 손 사용자 중 67%는 오른쪽 엄지를 사용하며, 나머지 33%는 왼쪽 엄지를 사용합니다.

후버(Hoober)는 10년 넘게 인터렉션 디자인에서 중추적인 목소리를 냈으며 조쉬 클라크(Josh Clark)과 같은 사람들과 함께 “엄지 영역(Thumb Zone)”을 이끌어 왔습니다. 그동안 Thumb Zone은 한 손으로 화면을 터치하기에 가장 편안한 영역으로 여겨져 왔습니다. 하지만 2020년에는 Thumb Zone을 피하세요.

Addy Osmani 이미지 번역 추가 (Dong-gri)

최근 몇년 사이, 사람들이 스마트폰과 태블릿 PC를 어떻게 잡고 만지는가는 더욱 무의미해지고 있습니다. (Thumb Zone에서 말하는 것처럼) 모든 사용자들이 동일한 방법으로 스마트폰과 상호작용 한다는 것은말이 안되지만, 새로운 스티브(Steve)의 연구 결과에 따르면 수년간 제가 따르고 싶어하는 내용들이 있습니다.

사용자는 각기 다른 수 많은 방식으로 스마트폰과 상호작용 합니다. 한 가지 방법이 아니라 사용자가 기기를 사용하는 다양한 방식을 설계 해야 합니다. 대부분의 사용자들은 행동과 상황에 따라 상호작용하며 기기를 잡는 방식을 바꿉니다. 뿐만 아니라 사용자는 손가락을 움직이며 엄지손가락이 닿는 영역을 조절할 수 있습니다.

Addy Osmani 이미지 번역 추가 (Dong-gri) — Cradle의 정확한 해석이 불가능하여 의역했습니다.

사용자들은 화면의 중앙을 정말 좋아합니다!

후버(Hoober)의 연구에 따르면 사용자는 콘텐츠를 화면 중앙의 한 위치로 이동 한 다음 해당 항목을 탭하는 것을 선호 한다고 강조했습니다. 그는 읽거나 클릭할 수 있는 주요 항목은 화면의 중앙에 위치해 있어야 하고, 다른 화면(경로)으로 이어주는 보조적인 옵션은 화면의 상단이나 하단에 배치되어야 한다고 제안합니다.

이것은 머테리얼 디자인(Material Design)에서 제안한 하단 바(Bottom Bar)가 잘 동작하는 이유 중 하나 입니다. 하단 네비게이션 바(Bottom navigation bars)는 가장자리에 가까이 위치하며 주요 기능(actions이라 나와있지만 문맥상 기능으로 표기)에 편안하게 접근 할 수 있습니다. 최근 몇 년 동안 하단 탐색 패턴의 인기가 증가한 것은 놀라운 일이 아닙니다.

마무리…

나는 후버(Hoober)의 가이드라인을 충분히 읽는 것을 추천합니다. 다음의 파트들(1, 2, 3)을 읽어보세요. 이 지침들은 훌륭합니다.

추가자료

해외 레터를 구독하고 있어서 그쪽을 통해 번역했는데, 나중에 보니 관련 글이 많아 놀랐습니다. 후버의 글이 유명한가 봅니다.

윗글에서는 후버의 말도 맞지만 인터렉션에 따라 기기를 잡는 방법이 달라지고 그로 인해 터치 영역도 달라진다고 합니다. 저는 여기에 스마트폰이 커지면서 화면의 세로길이가 길어지는 것도 한몫 한다고 생각합니다.

개인적으로 스크롤 가능한 영역에서 터치를 할때 무의식적으로 중앙이나 손이 쉽게 닿는 위치로 이동한다음 터치하는 습관이 있는데, 이 글보고 놀랐습니다.

몇달전 Facebook혹은 Brunch를 통해서 터치 영역을 가늠할 수 있는 가이드 파일을 누군가 공유했던것 같은데 같이 첨부하려 했으나 찾지 못해서 아쉽습니다. (이 글을 보고 아시는 분이 계신다면 알려주세요.)

그 외에 후버를 국문으로 번역한 글이나, 가볍게 읽으면 좋을것 같은 글을 추가해봅니다. (터치 최소 사이즈 라던가, 일반 PC모니터에서의 주요 영역 등…)

이번 글 부터는 긴 수식어 대신 원문 출처와 약간의 의견을 추가하며 작성하고자 합니다. 오역은 댓글로 알려주시면 감사하겠습니다.

]]><![CDATA[구름IDE 대시보드 개선해보기]]>https://lab.dongri.me/p/goorm-ide-dashboard-redesignhttps://lab.dongri.me/p/goorm-ide-dashboard-redesignSat, 30 May 2020 14:59:55 GMTVOC(Voice Of Customer)를 반영한 디자인 개선 후기

불만이 있는 고객 중 15%의 고객만이 기업에 불만을 토로한다.
불만은 있으나 드러내지 않는 고객이 70%이상이다.

만족을 얻지 못한 고객의 91%는 그 회사의 물건을 다시는 구매하지 않으며, 최소한 9명에게 자신이 겪은 불쾌감을 이야기 한다.

불만이 있는 고객 중 20%는 거래처를 옮긴다.
고객의 이탈율을 5%줄이면 고객생애가치는 85%의 증폭효과가 있다.

신규고객 획득 비용은 고객유지비용의 5배 소요된다.

Technical Assistance Research Program 조사 중

서비스 이용에 불만이 있을 때 대부분 별다른 피드백 없이 사용하거나 조용히 떠나 버립니다.

소수의 사람만이 직접 불만을 제기하는데 이는 서비스에 대해 애정이 있는 사용자입니다. 따라서 어떻게 대처 하는가에 브랜드경험과 사용자 만족도가 달라진다고 생각합니다.

저는 올해 2분기 OKR(Objectives and Key Results)을 VOC(Voice Of Customer)에서 제기되는 사용성 문제를 디자인적으로 해결하는 것을 목표로 잡았습니다.

개선안의 100%가 반영되지는 않았지만 최근 일부가 적용되어 문제점을 어떻게 풀어나갔는지 글로 남겨보고자 합니다. (실 서비스와 다른 부분도 있으므로 감안해서 봐주시면 감사하겠습니다.)

컨테이너 생성을 어디서 하나요?

작년 하반기 IDE 서비스 리뉴얼 후 꾸준히 제기 되어온 VOC였습니다. 특정 단계를 거칠 필요 없이 대시보드의 바로 우측 사이드에 있음에도 불구하고 사용자가 컨테이너 생성 버튼을 찾지 못하는 이유를 고민하게 됩니다.

컨테이너 생성의 중요도와 달리 명확하지 못한 명도대비

구름IDE 대시보드를 흑백으로 전환한 모습

사이트를 흑백으로 전환해 보니 컨테이너 생성버튼을 찾지 못하는 이유를 바로 알 수 있었습니다.

ⓐ chrome web store plugin, ⓑ dashboard, ⓒ product hunt, ⓓ create container (각 버튼에서 가장 명도대비가 높은 곳을 기준으로 측정)

모든 버튼이 WCAG 2.1을 통과하지는 않지만 ⓑ의 경우는 면으로 채워져 있어 상대적으로 인지하기 쉬웠고, ⓐ와 ⓒ는 선으로 표현되어 있으나 채도 높은 색상과 명도 대비가 높은 부분이 일부 있어 상대적으로 인식이 잘 됩니다.

반면 ⓓ(컨테이너 생성)은 단일 색상으로 이루어져 있고, 색의 면적이 좁으며 ⓒ(product hunt)의 주황색에 시선이 묻혀 찾기가 어렵습니다.

정보가 많은 복잡한 부분에 위치

하단의 컨테이너 리스트와 달리 서비스 Header 부분이 더 복잡해보임

컨테이너 목록은 각종 컨테이너 정보들로 복잡하게 구성되어 있지만 카드 형식으로 크게 묶어 나름대로 정리가 되어 있으며 사용자는 정보를 얻고자 하는 컨테이너 카드에 주의를 집중하면 됩니다.

반면 컨테이너 생성은 좌측/우측으로 나누어져 있다 해도 위에서 파악한 명도 대비 문제, 주변의 자잘한 버튼들로 인해 눈에 띄지 않는다는 점을 발견했습니다.

신규 사용자가 보게되는 화면 (우측상단 Create yout first container popover은 미반영)

서비스를 처음 접하는 사용자는 컨테이너 목록부분에 알림메시지가 나오고, 상단부분에 컨테이너 생성에 대한 popover가 나와야 하지만 실 서비스에서는 반영이 되지 않아 빈화면을 중점적으로 보는 사용자 입장에서 컨테이너 생성을 진짜 어떻게 해야하는지 찾기 어려운 문제점도 가지고 있습니다.

생성된 컨테이너가 이미 있으면 컨테이너 문제가 발생하지 않습니다. (어디서 만드는지 이미 경험적으로 아니까요…) 구름IDE를 처음 이용하는 사용자에게 좋은 경험을 주어야 주 고객으로 발전할 수 있는데 그렇지 못한다는 점에서 심각성을 느꼈습니다.

서비스 플랜정보 VS 서비스를 이용하는 부분

구름IDE 대시보드는 서비스 플랜에 따른 자원 가용량을 알려주는 정보들로 이루어진 상단과, 생성된 컨테이너들을 관리하고 실행하며 서비스를 이용하는 실질적인 부분으로 이루어진 하단으로 나누어 집니다.

컨테이너를 생성은 실질적으로 서비스를 이용한다는 것인데, 서비스 플랜과 자원 가용량을 알려주는 부분에 위치한다는 것은 이용 흐름과 문맥에 맞지 않는다는 점을 발견했습니다.

원인파악을 기반으로 디자인으로 개선

Empty 생성버튼 추가, Header 버튼 정리

대시보드 화면에서는 대시보드 링크가 필요 없으므로 제거했습니다. 복잡했던 소셜, 플러그인 버튼과 컨테이너 생성버튼이 혼재되어있던 부분은 한 줄로 정리했으며 배경색으로 채운 버튼으로 변경해 좌측의 소셜, 플러그인 버튼보다 눈에 띌 수 있도록 시각적 위계질서를 부여했습니다.

문맥에 맞춰 컨테이너 리스트에 생성버튼 삽입

컨테이너를 실질적으로 이용하는 부분에 컨테이너 생성버튼을 추가했습니다. 개설된 컨테이너 수와 총 컨테이너 수를 함께 명시해 사용자가 몇 개를 더 생성할 수 있는지 쉽게 인지할 수 있도록 했습니다.

기존에 Header 영역에 있는 컨테이너 생성 아이콘을 제거하는 것에 대한 의견도 있었으나, 갑자기 한 번에 모든 것이 바뀌면 사용자에게 혼란을 가져올 수 있으므로 단계적으로 Fade-out 하기로 했습니다.

컨테이너 생성 문의 및 VOC 0건 달성

지속적으로 꾸준히 제기되어온 컨테이너 생성에 관한 문의

2주 전에 대시보드 컨테이너 생성버튼이 적용되었고, 그 이후로 관련 VOC가 더는 접수되고 있지 않습니다.

구름IDE는 개발자들을 위한 서비스이므로 디자이너로서 개발자만큼의 태스크 지식을 축적하는 데에 한계가 있으므로 개선작업을 진행하기가 어려울 때가 많습니다. OKR을 통해 조그맣더라도 무언가 서비스에 기여를 해서 기쁩니다.

뭔가 하나라도 서비스에 기여해서 기쁨
]]><![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에서 자체 기능을 공식 제공해 주는 게 가장 좋겠지만요!)

]]>