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

과거에는 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)을 지정해 주면 완료됩니다.

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 장비를 활용하기로 합니다.

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

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

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

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

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

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

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

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

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

이미지

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

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

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

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

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

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

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

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

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

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

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

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

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

이것 좀 보세요:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

왜 접근성이 필요한가요?

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

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

개인화

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

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

비밀번호 관리 프로그램으로 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를 사용할 수 있다는 데에 의의를 두는 게 좋겠습니다.

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

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

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

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

다양한 포맷 지원

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

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

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

특히 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을 사용해 보시는 것을 적극적으로 추천합니다.

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

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

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

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

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

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

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

Mash-UP 9기 시작

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

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

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

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

팀별 스터디

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

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

Android & WEB 프로젝트 면블리

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

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

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

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

UX/UI팀 발표

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

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

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

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 10기에 지원해 보시는 것은 어떨까요?

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

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

신청하기

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로 인해 걱정하시는 분들한테도 좋을 것 같고요… 이사나 신규 개통이 아닌 부분에 대해서는 셀프개통이 가능한 범위가 많아지면 출장비용도 아끼고 시간도 절약할 수 있어 점차 확대되었으면 하는 바람입니다.

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

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

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

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

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

1. 뒷판 분해하기

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

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

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

2. 미들 프레임 분해

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

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

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

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

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

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

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

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

4. 배터리 교체하기

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

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

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

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

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

5. 조립은 분해의 역순

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

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

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

6. 애로사항

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

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

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

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

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

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

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

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

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

정확히 어떠한 점에서 글로벌 서비스처럼 안 느껴지는지, 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는 타사에서 사용하는 것을 금지했기 때문에 눈물을 머금고 제외합니다.

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

당장 떠오르는 국문(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와 비교하면 나머지 세 글꼴은 좀더 세련되 보입니다. Noto Sans 숫자 9의 Tail은 느슨하지만, 나머지는 덜 느슨해 올드해 보이지 않습니다. (뭣 모르는 진짜 주관적인 의견임을 고려해주세요)

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

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

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

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

실 서비스에 적용하기

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

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

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

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

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

• 국문 (Korean) — Noto Sans KR

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

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

마무리

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

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

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

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

• 한글타이포그라피 학회 — 한글과 로마자의 섞어 짜기를 위한 로마자 형태 연구

• W3C — 한국어 텍스트 레이아웃 및 타이포그래피를 위한 요구사항

• Spoqa 기술블로그 — 다국어 환경에 맞게 타이포그래피 세팅하기 — 다국어 반응형 타이포그래피

• 활자공판 — 섞어짜기

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

마무리…

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

추가자료

• 스티븐 후버(Steven Hoober) — 손가락, 터치, 사람을 위한 디자인 (Design for Fingers, Touch, and People)

• A List Apart — 우리는 어떻게 기기를 잡는가? (How we hold our gadgets?)

• UXMatters — 어떻게 유저들이 모바일 기기를 잡는가? (How do users really hold mobile devices?)

• Smashing Magazine — 엄지 존-모바일 사용자를 위한 디자인 (Thumb zone — designing for mobile users)

• LukeW — 스마트폰의 대형 화면을 위한 디자인 (Designing for large-screen smartphones)

• Josh Clark — 터치를 위한 디자인 (Designing for Touch)

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

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

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

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

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

• 모바일 터치 디자인하기 — https://cyberx.tistory.com/196

• 엄지영역(the Thumb Zone) : 모바일 사용자를 위한 디자인 — https://bit.ly/3fKq1iD

• 터치기기를 위한 디자인 팁 9가지 — http://blog.naver.com/olivestone12/220018301370

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

불만이 있는 고객 중 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였습니다. 특정 단계를 거칠 필요 없이 대시보드의 바로 우측 사이드에 있음에도 불구하고 사용자가 컨테이너 생성 버튼을 찾지 못하는 이유를 고민하게 됩니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

처음 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에서 자체 기능을 공식 제공해 주는 게 가장 좋겠지만요!)

학부생 타이포그래피를 처음 접하면서 편집 수업을 같이 들은 동기들 사이에서는 SM시리즈를 당연히 사용해야 한다(?)는 불문으로 통했습니다. Helvetica와 같은 존재로 많이 쓰이고 완성도와 무난함을 겸비한 서체이니 사용해야 하는 것이 이유였습니다.

SM 서체를 기본 세팅 값으로 사용하기엔 어려웠고, 온라인에 누군가 기록해 놓은 크기, 자간, 장평 등을 그대로 가져다 사용했었습니다. 왜 그렇게 썼는지보다는 이미 잘 짜인 모습으로 사용하고 싶은 마음이 컸던 것 같습니다.

4학년, 졸업 전시를 졸업 작품을 준비하던 중 동기 한 명이 SM시리즈를 사용했으나 글자의 짜임새나 완성도가 높지 않았고 이에 교수님이 피드백 주시기를

“SM은 날로 쓰기보다는 하나하나 조절하면서 사용해야 하는 서체다. 되도록 완성도 있게 세팅된 다른 서체를 사용하라”

는 말에 꼭 SM시리즈를 고집할 필요는 없다는 것을 그때 알게 되었습니다.

새내기 디자이너가 되어 일하면서 업계에서 유명한 사람들은 어떤 글꼴을 어떤 세팅 값으로 사용할까? 왜 이러한 글꼴을 사용하는 걸까? 갈망이 넘칩니다. 그러한 궁금증을 해결하는 데 도움을 얻고자 《2017 내가 쓴 한글 폰트》를 훌터보게 되었습니다.

대표 서체들에 대한 현업 디자이너 이야기

《2017 내가 쓴 한글 폰트》는 그래픽디자인과 편집디자인 등의 활동을 하는 20대 후반에서 40대 후반의 디자이너 30명에게 2017년 많이 쓴 폰트를 물어 다루었다고 합니다. 웹이 아닌 그래픽과 편집에만 국한되어 있는 점은 이유도 모른 채 그냥 많이 사용하거나, 합당한 이유를 제기하지 못하고 사용해 왔던 글꼴들의 장단점을 볼 수 있는 점이 좋았습니다.

다른 책《디자이너의 서체 이야기》에서는 각자 사용하는 선호 글꼴에 대해서만 가볍고 넓게 다룬다면 이 책에서는 어떤 글꼴과 섞어 짜기 하는지 제목용·본문용 어디에 쓰이고 어떤 느낌을 줄 때 사용하는지 등과 서체에 대한 디자이너들의 대화 등 좀 더 깊은 이야기를 엿볼 수 있었습니다.

다시 한번 톺아보는 내가 좋아하거나 자주 쓰는 서체

지금은 사용하지 않지만 자주 쓴 윤고딕 100 시리즈, 편집디자인에서 주로 사용했던 SM시리즈, 가장 많이 쓰는 본고딕, 고급스럽고 멋스러움이 느껴져서 좋아했던 산돌 제비(책에서는 2를 다루지만) 등을 책을 통해 다시 한번 돌아볼 수 있었습니다.

과거 웹 디자인에서 많이 사용하던 윤고딕100 은 과거엔 Heveltica처럼 보편적이고 현대적인 무난한 서체라 생각해서 사용했었는데 이번에 보고 올드한 느낌이 들어서 많이 놀랐습니다. (개인적인 의견입니다.)

SM 시리즈는 SM3 신신명조만 사용했는데, 기타 시리즈와 함께 언제 어떻게 사용하는 것이 잘 어울리는지 알 수 있게 되었습니다.

현재 가장 많이 사용하는 본고딕은 큰따옴표 등이 각진 한글과 달리 둥글게 되어 있어 별로라고 생각했는데 같은 의견이 책에서도 언급되어 있어 놀랐습니다.

고급스러움에 좋아했던 산돌 제비, 사용하지 않고 가볍게 넘어갔던 Adobe 명조로 멋스러운 청첩장에 적용된 모습 등 책을 통해 가볍게 훑어볼 수 있던 점이 좋았습니다.

함께 첨부된 폰트에 기반을 둔 작업물들은 앞으로 해당 글꼴로 디자인하거나 판짜기를 할 때 도움이 많이 될 것 같았습니다.

웹과 디스플레이 기반에서 글꼴을 다루지 않는 점은 아쉬움

사실 SM시리즈, 산돌 서체, 안상수체 등의 서체는 용량과 라이센스, 판독, 가독성 문제 때문에 잘 쓰이지 않습니다.

화면의 밀도(PPI)가 커지면서 일명 레티나 디스플레이에서는 덜하지만, 대부분의 디스플레이에서는 편집물에서 보이는 글꼴과 동일하게 표시되지 않습니다.

그래서 글자의 멋이나, 자소의 특성보다는 저해상도 혹은 디스플레이에서 얼마나 글자가 깔끔하게 보이는지, 작은 글씨에서도 뭉개지지 않고 판독성 높게 나타나는지가 중요합니다.

하지만 책에서는 오프라인 편집물과 그래픽에 사용되는 것에 국한되어 있어 아쉬웠습니다.

이와 관련해 예전에 한글 타이포그래피 워크숍에서 이용제 선생님께 여쭤봤는데 디스플레이가 고해상도로 바뀌어 나가면서 디스플레이에 맞춘 글꼴을 따로 만들지는 않는다고 들었습니다.

Variable fonts라 해서 하나의 폰트 파일로 자유자재로 조정할 수 있는 기술이 생겨나면서 앞으로 이런 문제를 해결할 수 있게 되지 않을까 기대해 봅니다.

글꼴의 클라우드화 되는 점도 다루지만 역시 웹 폰트는 빠져 있습니다. Adobe는 플랜 결제 시 유료 웹 폰트 또한 이용 가능한데 아직 국내에는 별도 계약이 대부분이라 앞으로 다양한 한글 꼴들을 웹에서 적용할 수 있었으면 하는 바람이 있습니다.

이번 황금연휴를 맞이해 현업 디자이너들은 어떤 폰트를 많이 쓰는지, 선택한 이유와 사용하면서 좋았던 부분 아쉬운 부분은 무엇인지를 알아가는 소중한 시간이었습니다.

본 글은 uxdesign.cc에 기재된 글을 각종 번역기와 의역, 배경지식을 활용해 번역한 글입니다. 최대한 이해가 가기 쉽게 번역했지만, 영어 능력이 좋으시다면 이 글 보다는 아래의 원글을 보시는 것을 권해드립니다. (본 글의 저작권은 Taras Bakusevych 및 UX Collective에 있습니다.)

사용자 인터페이스에서 중심이 되는 인터렉티브 블록을 만들기 위해 버튼 디자인에 대해 알아볼 필요가 있습니다.

올바른 인터렉션 디자인을 위해서 우리는 물리적인 버튼에 대한 기원과 변화의 과정을 살펴봐야 합니다.

기기나 자동차 혹은 시스템을 조작하는 데 있어 작동 원리를 이해하지 못해도 조작이 가능하다는 측면에서 버튼은 놀랍습니다.

Rachel Plotnick(레이첼 플로트닉)은 오늘날 누르는 버튼이 어떻게 나왔고, 디지털 UI에 주요 수단으로 적용이 되었는지 유래와 이유를 설명합니다.

“버튼을 누르면, 알아서 사진을 찍어줍니다.” — Kodak 카메라는 매력적인 문구를 직접적으로 소비자에게 드러냈습니다.

(덧붙임) 과거의 카메라는 조리개, 초점, 셔터속도를 일일이 조정해야 했지만, Kodak 카메라는 버튼 하나로 이를 알아서 해준다는 점에서 위 문장을 이해하면 좋을 것 같습니다.

코닥의 이 문구는 사용자를 매료시키는데 오늘날에도 유효합니다. 오늘날 가전제품 혹은 다양한 장치들이 터치스크린 안에서 컨트롤이 가능하도록 바뀌었음에도 불구하고 물리적으로 누르는 버튼은 사라지지 않을 것입니다. 오히려 물리적인 버튼에서 형성된 행동 습관이 버튼 디자인이 얼마나 직관적으로 사용하기 쉬운지 일깨워 줄 것입니다.

버튼 vs 링크

버튼은 사용자가 수행하려는 동작을 나타내고 전달합니다. 보통 대화상자(Dialog), 양식(Forms), 툴바(Toolbars) 등에 위치하며 버튼과 링크의 차이는 아래와 같습니다.

• 링크는 주로 모두 보기, Roger Wright(피아니스트)의 프로필 등과 같이 다른 페이지로 이동할 때 사용합니다.

• 버튼은 주로 제출(Submit), 병합(Merge), 새로 만들기, 업로드와 같은 특정 작업(혹은 행동)을 수행할 때 사용합니다.

(덧붙임) 링크는 페이지가 완전히 전환되고, 버튼은 페이지 내에 새로운 모달이나 일부분만 바뀔 때 사용된다고도 이해해도 좋을 것 같습니다.

버튼의 상태(States)는 사용자에게 현재 어떤 상태인지를 알려줍니다.

버튼에 올바른 인터렉션과 스타일을 만드는 것은 디자인 프로세스에서 가장 중요한 부분 중 하나입니다. 버튼의 상태(States)는 다른 상태와 주변 레이아웃과 명확히 구별되게 디자인되어야 하며, 구성 요소를 크게 변경하거나 시각적인 방해 요소를 만들어서는 안 됩니다.

Normal — 버튼이 활성화(클릭 가능) 되어 있음을 나타냅니다.

Focus — 사용자가 키보드 혹은 다른 입력 방법을 통해 포커스를 이동하여 해당 위치에 머물러 있음을 강조합니다.

Hover — 사용자가 버튼에 커서를 위치할 때를 나타납니다.
(덧붙임: 모바일 터치 환경에선 active가 명시되지 않을 때 클릭하면 hover 상태가 나타납니다.)

Active — 활성 혹은 버튼이 눌렀음을 나타냅니다.

Progress/Loading — 작업이 바로 이루어지지 않아 요청 사항이 진행 중임을 알리는 경우에 사용됩니다.

Disabled — 버튼이 비활성화되어 현재 사용할 수 없지만, 나중에 다시 활성화 될수 있습니다.

버튼은 다양한 색상, 모양 및 크기로 제공됩니다.

버튼의 가장 흔한 디자인은 모서리가 있는 스타일로, 쉽게 식별할 수 있고 입력 필드(input) 옆에서도 잘 보입니다. 버튼에 적합한 스타일을 정하는 것은 디자인 대상의 목적, 플랫폼 및 지침에 따라 다릅니다. 가장 많이 사용되는 스타일은 다음과 같습니다.

버튼의 스타일은 동작 수행의 중요성을 알립니다.

버튼의 스타일을 통해 중요도를 구분하기 위해서 혹은 다양한 선택지가 있다는 것을 사용자에게 알려주는 일련의 힌트를 제공할 수 있습니다. 일반적으로 가장 눈에 띄는 버튼 (보통 이러한 스타일은 primary라고 말함)과 중간단계의 secondary, 더 낮은 단계인 tertiary를 사용합니다.

기본값이 없는 버튼도 있습니다.

보통 가장 일반적으로 선택(혹은 사용)되는 버튼을 “default”(primary)로 두고 눈에 띄는 강조 상태로 두어 행동을 유도하세요. 이는 대다수의 사용자가 작업을 더 빨리 완료하고 올바른 행동을 할 수 있도록 도와줍니다.

생각하게 하지 마세요.

Don’t Make Me Think (사용자를 생각하게 하지 마!)는 사용성 엔지니어 Steve Krug의 책 제목입니다. (덧붙임 — 실제로 최근 국내에서도 인기가 많습니다.) 책에서 강조하는 점 중 하나는 퍼즐이나 미로를 만들지 않고 사용자에게 인터페이스를 명확하게 전달하는 것이 중요하다는 것입니다. 버튼은 과거부터 시작해 지금까지 다양한 기기들에 적용되면서 어떻게 보이고 작동하는지에 대한 관습이 형성되어 있습니다. 관습(원문에선 표준)으로 보이는 것과 크게 다르다면 사용자는 버튼을 인식하는 데 시간이 오래 걸리고 혼란을 겪게 됩니다.

버튼과 버튼이 아닌 요소(ex_ 배경)에 동일한 색을 사용하지 마세요. 동일하게 사용할 경우 사람들이 어디를 클릭해야 하는지 알기 어렵습니다.

일관성은 속도와 정확성을 향상시킵니다.

“일관성은 가장 강력한 사용성 원칙 중 하나입니다. 특정 동작이 항상 동일하게 행동할 때 사람들은 무슨 일이 일어날지 고민할 필요가 없습니다.” Jacob Nielsen(야콥 닐슨)

일관성은 속도와 정확성을 향상시키고 오류를 방지합니다. 버튼을 디자인할 때 사용자가 통제할 수 있음을 느끼게 하고 쉽게 목표를 달성할 수 있도록 예측 가능성을 높여보세요. 기본 스타일(primary), 두 번째(secondary), 세 번째(tertiary) 스타일을 지정할 때 색상, 모양과 같은 몇 가지 공통 요소를 찾아보세요. 디자인 시스템 내에서 일관성을 유지할 뿐만 아니라 적용되는 플랫폼의 디자인과도 어우러져야 합니다.

원활한 클릭을 위해 버튼을 충분히 크게 만드세요.

버튼은 쉽고 간단하게 누를 수 있어야 합니다. 사용자가 버튼을 실수로 누르지 못하거나 근처 다른 요소를 누르게 된다면 시간이 낭비되고 부정적인 경험이 쌓이게 됩니다.

손가락 터치를 이용하는 모바일 환경을 위해 클릭 가능한 영역을 최소 48x48DP 이상으로 잡아주세요. 이 크기는 화면 크기에 상관없이 물리적 크기가 약 9mm로 나타납니다. 터치스크린에서 누를 수 있는 요소의 권장 크기는 최소 7–10mm 입니다.

아이콘 버튼의 경우 터치 가능한 영역이 아이콘을 넘어 확장되는지 확인하세요. (덧붙임 — 쉽게 말해 padding, 아이콘 주변으로 여백을 줍니다.) 이는 모바일이나 태블릿에만 적용되는 것이 아니라 마우스와 같이 PC 웹의 포인터 장치에서도 동일하게 적용됩니다.

접근성을 위한 디자인

버튼뿐만 아니라 모든 구성요소에 접근성을 고려해 디자인해야 합니다. 바로 위에 언급된 버튼의 크기는 접근성에 영향을 미치는 요소 중 하나였습니다. 이외에 글꼴의 크기, 색상, 대비도 있습니다. 접근성을 충족하는지 확인하는 측정하는 다양한 도구들이 있습니다.

(덧붙임) 접근성과 관련해 도움이 되는 국내 사이트는 NAVER NULI(nuli.navercorp.com) 입니다. 보통 명도 대비는 글꼴의 크기에 따라 달라지지만, 최소 3:1, 보통은 4.5:1 이상이 되어야 합니다.

다음(현 카카오) 다룸(darum.daum.net)도 있지만 업데이트가 되지 않은 지 오래되어서 저는 주로 NAVER NULI를 참고합니다.

이외에 레진코믹스(https://github.com/lezhin/accessibility/), NHN TOAST UI도 도움이 많이 됩니다.

디자이너는 개발자와 긴밀하게 협업하면서 버튼이 스크린 리더에서 잘 작동하는지 확인해야 합니다. 사용자가 특정 행동을 활성화할 때 응답을 트리거하는 요소에 버튼을 사용해야 합니다. role =”button”을 추가하면 스크린 리더에 버튼 컨트롤로 나타납니다. (덧붙임 — role를 사용하면 버튼 요소 외에도 버튼처럼 지정할 수 있지만 W3C에서도 권장하지 않으며, 될 수 있으면 button 그 자체를 사용하는 것이 좋습니다.)

제스처는 생각보다 많은 곳에 적용되어 있습니다.

제스처는 사용자가 터치를 사용해 애플리케이션과 상호작용 할 수 있도록 도와줍니다. 기본적인 터치에서 진화된 다양한 방법(단순 클릭이 아닌 더블클릭, 스와이프 등)을 사용하면 작업을 수행하는 데 있어 시간을 절약하고 다채로운 터치 제어가 가능해집니다.

스와이프 혹은 더블클릭하여 좋아요, 길게 누르기 등은 상황에 맞게 행동을 유도할 수 있지만 아직은 일반 사람들에게 명확하지 않습니다. 대신 이러한 제스처는 이해도가 높은 고급 사용자들을 위한 부가 요소(없어도 그만이나 있으면 좋은 요소)로 사용하는 것이 좋습니다.

좋은 버튼 디자인은 사용자의 행동을 유도하는 이름을 사용합니다.

버튼의 이름(=label)은 버튼의 디자인만큼 중요합니다. 잘못된 이름을 사용하면 사용자가 혼란스러워하고 시간 낭비와 실수가 발생할 수 있습니다.

좋은 버튼 이름은 사용자로 하여금 행동을 취하게 합니다. 동사(ex_ ~하기) 등을 사용하는 것이 가장 좋으며 실제 수행하는 작업에 해당하는 이름으로 사용하세요. — 사용자에게 “장바구니에 추가하시겠습니까?” 또는 “주문 확인하시겠습니까?”라고 묻는 것과 같은 것이 좋습니다.

예, 아니오 또는 제출하기와 같이 일반적인 이름은 사용하지 마세요.

확인/취소 또는 취소/확인, 두 버튼의 위치는 어느 쪽이든 상관없습니다.

둘 다 선택지일 뿐이며, 디자이너들은 자신의 선호도에 따라 몇 시간 동안 논쟁할 수 있습니다.

• [확인/취소]
  이는 순서에 맞춰 자연스럽게 읽힙니다. 사용자가 “확인”이 선택될 가능성이 가장 높다는 것을 알고 있다면 시간을 절약하는 데 도움이 됩니다.
  Microsoft Windows가 이러한 방식 사용

• [취소/확인]
  “확인”을 마지막에 위치시키면 흐름이 개선됩니다. 이전, 다음과 같이 왼쪽에서 오른쪽으로 흘러가는 측면에서 보면 취소 다음에 “확인”이 오는 것이 적절하게 여겨집니다. 또한 사용자가 최종 “확인” 버튼을 누르기 전에 모든 옵션을 검토함으로써 실수와 급한 결정을 막을 수 있습니다.
  Apple은 이러한 방식 사용

(덧붙임) 이 부분에 대해 좀 더 자세히 읽기 쉽게 다뤄진 좋은 글이 있어 추가로 링크합니다.

확인/취소 또는 취소/확인에서 어느 쪽이든 각자 합리적인 근거를 가지고 있으며, 무엇을 선택하던 사용성에 문제가 발생하지는 않을 것입니다. 저는 개인적으로 대부분 대화상자(Dialog)와 같은 동작을 선택하는 UI에 “확인” 버튼을 마지막에 넣었습니다. (주로 mac을 사용하기 때문에 그럴 수도…)

짜증나는 비활성화(Disabled) 버튼

모두가 이런 상황을 한 번쯤 겪어봤을 겁니다. 화면에 몇 초 또는 몇 분 동안 Disabled 된 상태로 머물러져 있는 이유가 무엇이고, 이를 다시 활성화하려면 어떻게 해야 하는지를 모른 채 헤매는 경우를요.

비활성화(Disabled)는 현재의 구성요소를 동작할 수 없다는 것을 알리기 위해 사용되지만, 나중에 활성화될 수 있음을 나타냅니다. 비활성화(Disabled) 버튼은 기본 위치에서 버튼이 없다가 나중에 생겨나면 사용자에게 혼란을 줄 수 있기 때문에 사용합니다.

가능하면 비활성화(Disabled) 버튼을 사용하지 않는 것이 좋습니다. 항상 활성화된 상태로 두는 것이 좋으며, 사용자가 필요한 정보를 입력하지 않은 경우 비어있는 필드(fields)를 강조하거나 알림을 표시하세요.

다음 글에서는 어떤 구성요소를 알아보고 싶나요? 의견 주세요.

추신: 가능한 많은 독자들이 제 콘텐츠를 사용할 수 있도록 하고 싶습니다. 내용이 유용했다면 Patreon https://www.patreon.com/tarasbakusevych에서 저를 응원해 주세요.

번역 후기

처음 가볍게 훑어봤을 때 브랜드의 기원(자기의 가축을 표시하기 위해 불도장을 만든 것부터 시작)과 같은 내용이 있을 것 같아 번역을 시작했는데 뒤로 갈수록 그러한 내용이 아니라서 실망했으나 좋은 내용이 많아 번역하면서 도움이 되었습니다.

사내에서 디자인시스템을 부트스트랩에 커스터마이징해서 반영하는 작업을 하고 있는데 버튼의 상태(status)가 명확하게 나와 있어 지금은 아니지만, 나중에 UI를 할 때 도움이 될 것 같습니다.

접근성 부분은 읽으면서 디자이너도 중요하지만, 개발자분들도 많은 관심이 있었으면 하는 아쉬움이 있었습니다. 개발할 때 모든 요소를 div로만 처리하는데 최소한 role을 지정하고 해당 목적에 맞는 HTML Eletement를 사용했으면 좋겠는데 요구하기가 쉽지 않습니다.

나머지는 알고 있지만 쉽게 적용하지 못하는 부분인데 오랜만에 다시 한번 상기시킬 수 있어 좋은 시간이었던 것 같습니다.

번역이 어려워(사실 제가 직접 해석하는 것 보다 번역기가 99%) 제멋대로 해석한 부분이 몇부분 있는데 잘못된 부분을 알려주시면 반영하겠습니다.

서비스 운영 디자인 업무 중 콘텐츠 관련 디자인을 자주 맡게 되는데 자주 작업하는 부분은 강의를 소개하는 커버 이미지와 광고 배너입니다.

반응형 디자인과 고해상도 스마트폰을 고려해야 하다 보니 @2x의 고해상도 PNG 포맷의 이미지 저장 → 메인 페이지에 이미지가 많아짐 → 사이트 속도 저하 문제가 발생하는 문제를 가지고 있으며, 업로드 용량이 제한되거나 최적화라는 이유로 디자인 팀 내에 tiny PNG(https://tinypng.com)를 자주 사용했습니다.

이 경우 용량은 확실하게 줄어들지만 손실 압축으로 이미지가 거칠어지거나 흐려지는 문제가 있었고 최대한 포맷 특성에 맞춰 상대적으로 저용량 & 고화질의 이미지를 뽑아내고자 사내 위키에 정리한 내용에 살을 덧붙여 공유하고자 합니다.

물론 개발단에서 Lazy loading을 사용하거나 GD Lib과 같은 도구(?)를 사용해 다양한 크기로 Thumbnail화 시키는 방법이 있으며 사실 이게 가장 효과적인 방법입니다.

하지만 위의 방법이 불가능한 상황이 있을 수도 있고, 이미지 포맷에 따른 특성을 잘 이해한다면 최대한 손실률이 낮으면서 파일 크기가 적은 이미지를 만들 수 있으므로 그러한 측면에서(?) 봐주시면 좋을 것 같습니다.

목표

이미지 확장자별 특성을 파악하고, 무분별한 손실 압축이 아니면 따라 적절한 효율의 압축을 함으로써 이미지 손상을 줄이고 궁극적으로 트래픽 절감 및 빠른 로딩 속도를 구현하는 것을 목표로 합니다.

이미지 특성에 따라 확장자 선택하면 용량을 효과적으로 줄일 수 있습니다.

1. 이미지에 포함되는 색상이 단순한 Flat 스타일이면… PNG

PNG는 무손실 포맷으로서, 자체가 스크린샷 등의 포터블한 이미지에 최적화된 포맷으로 화려한 색상이 담긴 이미지를 뽑아낼 경우 효율이 떨어지고 용량이 쉽게 증가하는 특징을 가지고 있습니다.

따라서 색상이 많지 않고 단순한 flat 스타일이라면 png을 사용하는 것이 좋습니다.

2. 이미지에 포함되는 색상이 많은 경우… JPG

반면 이미지에 들어가는 색상이 많은 경우엔 무손실 포맷인 PNG를 사용하면 모든 컬러 하나하나를 담아야 하므로, 이미지 용량이 급격하게 커집니다. 이런 경우 손실 포맷인 JPG를 사용하면 비슷한 색상끼리 엮는 식의 손실 압축을 통해 티는 나지 않지만, 용량이 크게 줄어듭니다.

JPG는 손실 포맷의 특성에 따라 수정할수록 화질이 열화되어 일명 디지털 풍화가 이루어지므로, 꼭 원본 수정 파일을 두고 수정해야 화질 열화를 막을 수 있습니다.

3. 투명도가 0 or 1로 단순한 경우 (알파 값이 없는 투명 이미지)는… GIF

투명한 이미지면 대부분 PNG로 저장해야 하지 않나? 하시는 분들이 계실 수도 있지만 꼭 그렇지 않습니다.

쓰인 색상이 256 미만이고, 알파 값이 없는 투명 이미지라면 gif가 png보다 용량을 더 적게 차지합니다.

혹은 PNG-8으로 저장하는 것 또한 용량을 줄일 수 있습니다. 단, PNG-24와 달리 알파 값을 지원하지 않으므로 IE6에서 사용해야 하거나(IE6 PNG 버그) 많은 컬러가 담긴 이미지가 아니라면 GIF만으로도 충분합니다.

지금은 웹 폰트의 존재로 이미지 폰트를 사용하는 경우가 잘 없지만, gif로 이미지 폰트를 사용하면 글꼴의 안티얼라이싱이 반투명이어서 그대로 내보낼 때 깨지는 경우가 존재합니다. 이때 포토샵에서 outline으로 입혀질 외곽선과 동일한 색으로 1PX만 그려주면, 실제 적용되었을 때 용량은 적게 차지하면서 매끈하게 보일 수 있습니다.

drop shadow가 먹힌 요소 또한 위 글꼴처럼 외곽선을 삽입해 저장하면 gif에서도 매끈하게 처리할 수 있습니다.

4. 한두 가지 단색만 사용한 경우… GIF

바로 위와 마찬가지로, 한두 가지의 단색만 사용할 경우 gif 혹은 png-8 방식이 제일 효과적입니다.

포맷 특성에 따라 이미지의 용량 더 줄여보기

위에 설명한 포맷의 특성에 따라 이미지를 저장했지만, 이미지 저장 시 포함되는 메타정보를 제거해 좀 더 줄일 수 있습니다. 이렇게 화질 손상 없이 최대한 영혼까지 줄이면서 그래도 안 되면 차선책으로 손실 압축으로 저장하는 방법에 대해 알아보고자 합니다.

1. 이미지 자체의 불필요한 데이터 제거

Photoshop을 기준으로 File > Export > save for web (legacy) 클릭 후 나타나는 패널의 우측면에 위치한 Metadata의 속성을 none으로 설정한 뒤 저장합니다.

혹은 JPEG & PNG Stripper(http://www.steelbytes.com/?mid=30)와 같은 프로그램을 사용해 생성된 이미지 내의 메타정보를 지울 수도 있습니다.

2. 무손실 압축

imageOptim(mac)

ImageOptim(https://imageoptim.com/mac)은 제가 가장 애용하는 프로그램 중 하나입니다. 시간은 오래 걸리지만 DRAG & DROP으로 간편하게 작동되며 다양한 압축옵션 선택이 가능합니다.

또한 SVG minify도 지원해 Sketch에서 export 한 SVG 파일도 조금이나마 용량을 줄일 수 있습니다.

PNG and MNG tools (windows)
windows 사용자는 PNG and MNG tools(https://pmt.sourceforge.io)를 추천해 드립니다.

CMD 열고 C:>pngcrush -rem alla -brute -reduce -d “폴더명” *.png를 입력하시면 됩니다.

Compressor.io (Online)
무손실 압축을 지원하고 옵션도 있으나 PNG에서만 무손실 압축을 지원하는 것 같습니다.

lossless 체크 후 압축을 진행하면 됩니다.

3. 손실 압축

무손실 압축을 해도 용량이 크게 줄어들지 않으면 손실 압축으로 용량을 줄일 수 있습니다.

위 본문에서 언급한 tinypng가 그나마 가장 쓰기 쉽고 빠르게 손실 압축을 진행해 주기 때문에 추천해 드립니다.

마무리

센스있는 디자이너는 사실 어그로에 가깝고, 알아두면 좋은 팁 혹은 상식으로 봐주시면 좋을 것 같습니다.

아예 처음부터 tinyPNG로 뽑아내면 될 것을 장황하게 설명하냐? 라고, 생각할 수도 있겠지만, 최대한 화질 손실을 막으면서 적은 용량의 이미지를 만들어내는 것이 목표이고 안될 경우 tinyPNG와 같은 손실 압축을 사용하자는 것이 이 글의 주제입니다.

전공자가 아니므로 이미지 포맷에 대해 잘못된 내용이 담겨있을 수 있습니다. 이 경우 알려주시면 수정하겠습니다.