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

과거에는 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의 가로 스크롤을 제거하였습니다.

두 번째 섹션은 콘텐츠가 가로로 스크롤 되도록 구현해야 하기 때문에, 섹션의 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로 가로 스크롤을 구현할 때 기본값 그대로 사용한다고 보시면 됩니다.

결과물

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

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

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

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

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

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

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

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

Bluetooth command line tools

처음에는 PowerShell 스크립트만으로 블루투스 제어가 가능할 줄 알았으나, 지원되지 않는 것 같았습니다. 대신, Microsoft Windows용 명령줄 유틸리티인 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 명령어를 통해 확인할 수 있습니다.

배치 스크립트 예제

공식 홈페이지에서 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. 작업 스케줄러 창의 좌측에 위치한 기본 작업 만들기를 클릭합니다.

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

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

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

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

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

이미지

• 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를 공부해야 할 필요성을 느낍니다.

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

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

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

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

bitwarden와 Vaultwarden(구: bitwardenrs) 차이

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

설치하기

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

우분투 인스턴트 초기화

/* 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 설치

/* 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 후속 세팅 및 도커 재시작

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와 달리 로고 혹은 심볼 이미지를 등록하지 못해 리스트에서 항목을 찾기 어렵습니다.

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

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

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

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

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

Fireboase 기본 프로젝트 생성

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

단축URL 설정하기

Dynamic Links

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

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

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

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

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

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

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

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

단축 URL 추가하기

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

생성하기

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

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

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

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

완료

모두 다 끝났습니다.

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

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

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

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

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

설치하면서 느낀 부분들

• 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를 사용할 수 있다는 데에 의의를 두는 게 좋겠습니다.

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

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

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

이제 시작해 볼까요?

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

1. expressinstantboom 접속하기

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DAY 3&4 — python, django, git

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

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

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

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

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

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

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

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

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

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

DAY4.5, 5 — hackathon

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

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

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

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

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

여담 및 마무리

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

You Dont Need jQuery

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

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

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

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

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

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

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

jQuery가 그리울 때

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

querySelectorAll

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

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

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

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

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

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

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

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

Sticky는 뭐하는 속성일까?

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

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

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

position: -webkit-sticky; 
position: sticky;

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

어떻게 활용 가능한가요?

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

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

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

Sticky를 활용한 예시

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

css

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

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

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

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

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

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

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

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

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

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

HTML

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

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

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

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

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

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

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

git 연동 컨테이너 생성하기

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

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

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

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

git commit

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Firebase 프로젝트 생성하기

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

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

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

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

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

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

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

도메인 연결하기

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

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

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

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

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

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

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

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

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

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

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

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

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

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

산돌구름

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

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

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

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

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

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

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

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

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

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

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

결론

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

Typesquare

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

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

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

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

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

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

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

결론

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

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

마무리

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

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

아는 지인으로부터 쓰지 않는 노트북을 받아와 Linux Server을 돌려보려 Centos7 설치를 시도했습니다.

보통 웹서버라 하면 Linux 기반을 많이 사용하고

상용으로는 Redhat을, 일반용으로는 CentOS를 사용합니다.

자세히 알지는 못하지만 상표권 관련 문제로 Fedora가 각종 최신기술을 선탑재하는 베타테스터 성격이 강하며 여기서 안정성이 입증되면 Redhat에 적용됩니다. (V3 Lite와 v3 internet security 9.0 차이랄까요?) 그러고 나서 가장 마지막으로 업데이트되는 것이 CentOS입니다. 일부 유료 저장소와 브랜드 아이덴티티만 빼면 Redhat과 CentOS는 별 차이가 없다고 보시면 됩니다.

이와 관련해서는 다음의 포스팅을 참고해 보세요.
리눅스 배포판 - 페도라, 레드햇, CentOS

문제는 USB에 ISO를 굽고 나서 설치화면(GUI)으로 진입하면 딱 진입하는 순간부터 먹통(freezes)이 발생한다는 것입니다.

처음에는 Ram용량이 적어서 그런 줄 알고 별도로 2GB를 추가로 장착해 줬지만 문제는 해결되지 않았습니다.

아무리 검색해 봐도 USB를 제대로 구워야 한다는 외국 포럼글만 있을 뿐 딱히 해결책을 찾지 못하면서 삽질하다가 해결책을 찾았습니다.

사실 아직도 왜 먹통현상이 벌어지는지 잘 모르겠습니다.

이럴 땐, GUI 모드가 아닌 CLI 설치모드로 바꾸어서 진행하면 해결할 수 있습니다.

첫 부트로더 상태에서 부트모드를 설정합니다.

처음 CentOS를 인식하고 뜨는 부트로더 화면입니다.
여기서 키보드 방향키를 이용하여 «Install CentOS 7»에 맞춰주시고 «Tab» 키를 눌러줍니다.

부트 옵션 맨 뒤에 CUI 모드 명령어를 추가합니다.

Tab 키를 누르면 위 빨간색 박스 테두리 부분처럼 이상한 영문장이 쓰여져 있습니다. 무시하시고 맨 뒤에 다음의 명령어를 추가하시면 됩니다.

text 혹은 linux text

맨 뒤에 text 하나 쳐주시고 엔터치시면 CUI 설치모드로 전환됩니다.

저 한 줄 하나로 먹통현상 없이 설치가 가능합니다.

GUI 모드에 비해서 불편하긴 하지만, 설치과정과 설치 이후 모두 정상으로 작동합니다.

보통 해킨토시 다룰 때 프로더 옵션(-v -f -x RootUID=0 등)을 건드렸었는데 여기서 다시 건드니 뭔가 느낌이 묘합니다.

저처럼 GUI 모드에서 설치진입 자체가 안 되는 분들은 CUI 모드로 전환하여 시도해 보시는 것은 어떨까요?

따라서 당시 웹표준 검사기를 통과한 사이트들 하단에는 위와 같은 배너들이 달려있는 것을 많이 볼 수 있었습니다.

W3C validator에 통과되었다고 웹표준과 접근성을 준수했다는 의미는 아닙니다.

실제로 문법과 지정된 HTML DTD에 해당하는 엘리트먼트들이 있는지만 체크하고 판단하기 때문입니다. HTML 문서 내에 적절한 엘리트먼트들을 사용했는지는 판단하지 못합니다. 따라서 검사기 통과를 목적으로 마크업을 했다고 웹접근성이 향상되고 모든 브라우저에서 동일하게 구현된다는 생각은 잘못된 생각입니다.

장애인차별법(이하 장차법) 시행으로 인해 공공기관·대기업은 웹 접근성을 준수해야 하고 국가에서 한국 웹 접근성가이드를 만들어 배포했지만, 실제 장애인들이 이용할 때 불편함을 많이 호소합니다. 없는 것보다는 낫지만 접근성 가이드를 준수한다 하여 장애인들이 정말 편하게 이용할 수 없는 것과 같이, «W3C validator에 통과한다 하여 완벽한 웹사이트를 제작했다는 것이 아니다.»라는 것을 말하고 싶습니다.

그럼, 왜 블로그에 소개하는가?

제가 다니는 곳은 웹디자인·마크업 과정이 전공필수입니다. 
비개발 학과기에 웹표준과 접근성, 올바른 엘리트먼트 사용에 대한 개념을 기반으로 하지는 않지만 하드코딩으로 웹진을 만드는 과정을 거쳤습니다.

여기서 많은 학생들이 어려움을 호소한 것이 «자기가 생각한 대로 안 나오고 깨진다는 것»입니다.

특정 브라우저를 기준으로만 작업했기에 크로스브라우징 고려는 제외로 하고 원인을 찾아봤더니 태그를 사용할 때에 열고 닫는 것을 까먹거나 제대로 입력 하지 않아서(없는 속성을 삽입한다던지) 발생한 것이었습니다.

주변에 도움을 요청하지만, HTML 퍼블리싱에 최적화된 에디터를 사용하는 것도 아니고 모든 것이 메모장에서 이루어진 것이기 때문에 가독성이 딸리고, 특정한 규칙이나 Indent를 주면서 마크업을 한 것이 아니라 원인을 찾아내기가 쉽지 않습니다.

처음 마크업을 접하는 사람들은 반드시 W3C validator을 이용하자

웹 표준, 접근성, 크로스 브라우징에 도움은 되지 않지만, 적어도 기본문법과 자신이 실수한 부분을 파악하기 위해서 웹 퍼블리싱을 처음 접하는 사람들에게 W3C validator를 권하고 싶습니다.

HTML/CSS는 어렵지 않아요.

PHP, C, Javascript, Phython에 비하면 정말 쉬운 언어입니다. 하지만 초보자들은 어려워합니다. 정말 이 분야에 관심 있어하는 게 아니라 반 강제로 하는 경우가 많기 때문에 큰 관심을 가지지 않습니다. 아무리 옆에서 설명해 줘도 한 귀로 듣고 흘려버립니다. 그리곤 나중에 동일한 문제로 또 질문합니다.

따라서 자기가 직접 왜 문제가 있는지 찾고 스스로 해결할 수 있도록 해주는 것이 중요하다고 생각합니다. 이것의 기본이 W3C validator이라 생각합니다.

W3C validator

• HTML Validator (https://validator.w3.org/)

• CSS Validator (https://jigsaw.w3.org/css-validator/)

전문가라면 API를 이용해서 쉽게 사용할텐데, 저 같은 일반인들은 API를 이용하는게 여러모로 어려워서 커스텀으로 제작한 DDNS 프로그램을 찾아서 설치해봤으나 제대로 작동하지 않는 문제가 있었습니다.

우여곡절 끝에 찾은 방법은, EXE 형태가 아닌 PowerShell 형식으로 된 스크립트를 이용하여 소켓통신(아마도…)으로 DDNS Update를 전송하는 것으로 보입니다.

• 원문 (https://goo.gl/2BFMUt)

• PowerShell 소스 (https://goo.gl/91Smjn)

문제는 PowerShell을 작업스케줄러에 실행으로 넣으면 메모장에서 실행된다는 것입니다. 그래서 찾은 해결방법은 BAT 파일로 한번 거쳐서 PowerShell을 실행합니다.

@echo off Powershell.exe -noprofile -executionpolicy bypass -file “실행하고자 하는 PowerShell 스크립트 경로 exit

위의 소스를 메모장에 복사·붙여 넣기 한 다음에 파일이름.BAT를 붙이면 됩니다.
이 방법을 사용하면 바로 동작하는가 싶지만 오류가 발생합니다.

이는 BAT 파일의 오류가 아니라 한번 거쳐서 실행되는데
위의 원문 블로그에서 API에 전송하는 소스와 이를 실행하는 코드가 나누어져 있고,
여기에서 경로 문제가 발생하기 때문입니다.

이 때는 PowerShell 스크립트 하나에 다 몽땅 넣어주면 됩니다.
쉽게 말하자면

Import-Module .\CloudFlareDynDns.psm1Update-CloudFlareDynamicDns -Token 1234567893feefc5f0q5000bfo0c38d90bbeb -Email example@example.com

이런식으로 별도로 API에 전송하는 소스를 import 할게 아니라
아래와 같이 한꺼번에 몰아서 넣어주면 됩니다.

그런데 KT에서 렌선을 뽑지 않는 이상 IP회수는 잘 안해가서 굳이 안써도 될것 같습니다. 이도저도 모르겠다면 만들어둔 파일 받아서 사용하는게 장땡입니다.

PowerShell 스크립트 다운로드

웹사이트 혹은 서버에 접속하기 위해서는 14자리 ip주소를 외워야 하는데 이를 쉽게 하기 위해서 도메인이란 개념을 도입했습니다.

그 속을 들여다보면 도메인 입력 시 DNS(어떤 도메인에 대해 특정 IP로 이동하게끔 정보를 담는 서버)를 거쳐가야 하는데 DNS 서버를 구축할 비용이 없거나 서버의 아이피가 고정이 아닌 유동 아이피인 경우 지속적으로 DNS에 바뀐 아이피를 업데이트를 해줘야 합니다. 이를 가능하게 해주는 서비스가 DDNS입니다.

DNS EVER의 유료화

WEB GUI 환경에 한글로 DDNS, DNS를 쉽게 관리할 수 있는 무료 서비스가 DNS EVER였는데요, 2~3년 전에 유료화를 진행했습니다. 서비스가 탄탄하기에 돈을 지불하고 쓰는 것도 좋지만 돈이 궁한 학생의 경우에는 유료로 이용하기가 참 부담스럽습니다.

따라서 이번 포스팅에서는 무료로 DDNS를 이용할 수 있는 서비스 세 가지를 소개하고자 합니다.

DNSZi

DNSZi는 PHP SCHOOL에서 제공하는 서비스입니다.
무료에다가 한글이고 윈도우·리눅스(쉘) DDNS 업데이트 프로그램을 제공하고 있어서 편합니다.
하지만 DNS EVER처럼 세부적이고 다양한 서비스를 제공하지 않는 것이 단점입니다.

CloudFlare

CloudFlare는 요즘 사이트에서 많이 사용합니다.
그 이유는 다양한 도메인 설정과 API 제공을 하고 캐시서버의 기능과 SSL을 제공하기 때문입니다.

특히 캐시서버는 전 세계에 서버가 위치하고 있기 때문에 외국에서 접속하더라도 빠른 속도로 제공할 수 있다는 장점이 있습니다. 또한 트래픽 절감과 DDOS 방어도 가능합니다.

다만 영어이며 자신이 따로 구매한 유료도메인이 있어야 하는 단점이 있습니다.
그래도 단점보다 장점이 더 많은 서비스지요.

저는 Windows 환경에서 PowerShell로 CloudFlare DDNS 업데이트를 하는 방법에 대한 글을 쓰기도 했습니다.

다만 최상위 플랜을 제외한 나머지 플랜은 2016년 이후로 국내 Edge 서버를 경유하지 않아 CloudFlare을 경유 시 상당히 느려집니다. (보통 미국 샌프란시스코를 경유합니다.)

2017년 12월 21일 기준,
국내 접속 시 느려진다는 점과 최근 있었던 (보안이슈)를 생각한다면 무료 플랜을 추천해 드리기 조금 애매합니다.

AWS route 53

아마존 웹 서비스(AWS)의 Route 53은 안정적이고 확장 가능한 클라우드 기반 DNS(Domain Name System) 웹 서비스로, 정적인 DNS 레코드 관리부터 동적인 DDNS(Dynamic DNS) 정보 업데이트까지 다양한 기능을 사용할 수 있습니다.

저는 사용해보진 않았지만 여러 개의 도메인을 관리하는 경우와 AWS를 운영하는 경우 상당히 편리하다고 합니다.

저 당시에는 Javascript 플러그인 Jquery가 널리 사용되지 않았습니다.
따라서 플러그인이 아닌 기본 Javascript로 구현했어야 하나 DOM에 맞춰진 게 아니라 비표준으로 제작되어 MS Explorer 구버전에서만 동작한다는 한계가 있습니다.

아직 CSS3이 표준으로 자리 잡지는 않았지만,
모든 브라우저에서 CSS3을 제공하고 있는 점을 고려하여 Javascript 대신 CSS3으로 이를 구현해보려고 합니다.

아무래도 Javascript 보단 퍼포먼스면에서 더 유리하지 않나 생각해 봅니다. 이제 진행해 볼까요?

1. CSS3 Animation 속성을 사용합니다.

우리는 무지개 효과를 구현하기 위해 CSS3 Animation을 사용합니다.
무지개색이 7가지 이므로 프레임을 약 7단계로 구분하여 각각의 무지개 색을 넣어줄 겁니다.

CSS3 Animation에 관해서는 Mozilla의 공식 레퍼런스에 개제되어 있는 CSS 애니메이션 사용하기를 참고하시기 바랍니다.

2. CSS 코드는 다음과 같습니다.

a:hover, a:focus { 
  animation-duration: 3s; /* 전체 애니메이션 재생시간 */
  animation-name: rainbowLink; 
  animation-iteration-count: infinite; 
}

@keyframes rainbowLink {
  0% { color: #ff2a2a; }
  14.2857% { color: #ff7a2a; }
  28.5714% { color: #ffc52a; }
  42.8571% { color: #43ff2a; }
  57.1428% { color: #2a89ff; }
  71.4285% { color: #202082; }
  85.7142% { color: #6b2aff; } 
  100% { color: #e82aff; }
}

접근성을 향상하기 위해 Hover와 별개로 Focus도 추가했습니다.

링크에 포커스가 가거나 마우스 포인터가 올라가 있는 경우 무지개 효과가 나타납니다.
Animation-duration은 총프레임의 재생시간을 설정하는 것이며 3초를 설정했습니다.

무한 반복하기 위해 Animation-iteration-count 값을 infinite로 설정했습니다.
마지막으로 rainbowLink라는 키프레임을 생성하고 이를 링크와 연결시켰습니다.

3. 적용결과

CSS3 Animation을 이용하여 Javascript와 똑같이 구현했습니다.
CSS3를 지원하지 않는 하위 브라우저에서는 작동되지 않겠지만
CSS와 HTML을 분리하였으므로 단계적 축소 개념이 적용되어 애니메이션만 동작하지 않을 뿐
실제 웹 사이트를 이용하는 데에는 아무런 지장이 없습니다.

4. Javascript VS CSS3

각각의 사용종류가 다르기 때문에 어느 게 우세하다는 것을 논하는 것은 의미가 없습니다.
다만 이런 효과의 경우 CSS3로 구현했을 경우 더 쉽고 코드용량이 적다는 것을 알려드리려 합니다.

Javascript 는 심지어 소스 코드가 긴데도 불구하고 MS IE에서만 동작합니다.
CSS3으로 구현된 소스 코드는 CSS3 Animation을 지원하는 브라우저면 모두 정상적으로 동작합니다.

5. 직접 확인해보기

레터링이라 하기 우스운 수준이지만… (직접 그려 스켄 떠서 작업하다가 잘 안돼서 베이스 폰트에 내가 구현하고자 하는 글꼴의 특징을 넣어 수정했기에)

어찌 됐든 완성된 문자로고를 PNG 파일로 사용하다가 SVG로 적용해 보기로 했습니다.

Adobe Illustrator에서의 SVG 포맷 저장은 정말 간단합니다.
다른 이름으로 저장에서 SVG 선택 후 지정하여 저장하기만 하면 되니까요.

하지만, 이렇게 해서 저장된 SVG 포맷은 찌꺼기가 있고
최적화가 되어 있질 않아서 별도의 작업을 해줘야 합니다.

SVG 최적화 방법은 다음 포스트에 잘 나와있습니다.
Useful SVGO[ptimization] Tools

저는 이 중에서 Drag’n’Drop GUI 프로그램을 이용하여 최적화 작업을 진행했습니다.

Illustrator에서 Artboard를 사용할 경우 Artboard 마다 따로 저장되긴 하지만
한 파일 안에 모든 Artboard가 들어가 있어서 직접 메모장을 열어서 해당 부분을 지워줘야 합니다.

따라서 SVG파일로 만들 때 Artboard를 사용한다면,
Artboard 대신 새로운 Ai 파일을 만들어 그곳에서 SVG로 저장하는 것이 좋을 것 같습니다.

PNG로고와 SVG로고파일의 용량 차이가 심합니다.
대신, 그 만큼 직접 베터로 그려주는 것이기에 CPU 연산을 많이 잡아먹을 것 같습니다. (특히 모바일에서…)