Computer >> 컴퓨터 >  >> 시스템 >> Mac

내 Apple 컬렉션을 위한 웹사이트를 만든 방법

얼마 전부터 Apple 제품 컬렉션을 시작했습니다. 10대 시절부터 Apple 하드웨어와 그 특유의 미학을 계속 쫓아왔지만, 당시에는 Mac을 살 형편이 되지 못했습니다.

첫 번째 Mac은 19살 때 구입했습니다. iBook 700MHz 모델로, 브라질의 이베이 같은 사이트에서 손에 넣었죠. 자금은 Flash 프로젝트로 벌은 돈이었습니다.

캐나다에서 몇 년간 생활한 지금은 여유 자금으로 취미 활동을 즐길 수 있게 되었습니다. 대부분의 기기는 Craigslist에서 개인 판매자에게 구입합니다.

기기 정보를 정리하다 보니 웹사이트가 필요했습니다

노트북과 iDevice 몇 개를 거치면서, 내가 가진 기기들의 정보를 체계적으로 기록해야겠다고 결심했습니다. 처음에는 모델명, 일련번호, 기기를 구한 방법, 지원되는 최소/최대 OS 등을 담은 Gist 하나를 만들었죠.

그런데 목록은 점점 길어졌고, 내용도 지저분해 보이기 시작했습니다. 이런 콘텐츠를 웹사이트로 보여주면 완벽하겠다고 생각했고, 덕분에 개발자를 고용할 필요도 없었습니다.

처음에는 데이터를 SQL 데이터베이스에 정리하고, 정보를 여러 열과 테이블에 분산 저장하려 했습니다. 그다음 UI를 채우는 데 필요한 데이터를 제공하는 GraphQL API를 만들려고 했죠. UI는 React로 작성하고 Babel로 컴파일한 뒤 Webpack으로 번들링하는 방식이었을 겁니다.

위 문장을 소리 내어 읽어보면 사용되는 기술이 얼마나 많은지 알 수 있습니다. 게다가 백엔드 언어나 SASS, styled-components 같은 UI 세부 사항조차 언급하지 않았습니다. 결국 목표는 예쁜 디자인으로 항목 목록을 보여주는 것뿐인데 말이죠. 다소 부담스럽게 느껴집니다.

일부러 설정한 제약 조건

그래서 저는 다음 요소 없이 이 콘텐츠를 전달할 방법을 고민했습니다:

  • API나 백엔드 작업
  • JS 프레임워크/라이브러리
  • JS 빌드 도구(Webpack, Babel 등)
  • CSS 작업

이런 제약 조건 외에도 추가 목표도 있었습니다:

  • 좋은 접근성을 갖춘 웹사이트 만들기
  • 오래된 브라우저에서도 작동하는 웹사이트 만들기 — Mac OS 9.2가 돌아가는 컴퓨터와 iOS 3가 설치된 iDevice도 보유 중이니까요

도전을 받아들이겠습니다. index.html 하나, 순수 바닐라 JS 파일 몇 개, 그리고 커스텀 CSS 없이요. 사이트를 만든 경험을 지금부터 공유해 보겠습니다.

TL;DR

  • 완성된 웹사이트
  • 소스 코드

1. API와 백엔드 작업 없이

얼마 전 Stein이라는 SaaS 제품을 알게 되었습니다. Google Sheets 문서 안에 데이터를 입력하면 그 데이터를 제공하는 엔드포인트를 받을 수 있는 서비스입니다. 라이브러리가 Handlebars처럼 동작해서, 제 사용 사례에 딱 맞아 보였습니다:

<div data-stein-url="https://api.steinhq.com/v1/storages/5cc158079ec99a2f484dcb40/Sheet1" data-stein-limit="2">
  <div>
    <h1>{{title}}</h1>
    <h6>By {{author}}</h6>
 
    {{content}}
 
    Read on <a href="{{link}}">Medium</a>
  </div>
</div>

2. JS 프레임워크와 빌드 도구 없이

이 프로젝트의 사용 사례에는 프레임워크나 라이브러리가 필요하지 않았기 때문에 추가하지 않기로 했습니다. 페이지의 모든 JS 상호작용은 꽤 단순합니다. 메뉴 표시/숨김, 모달 화면 열기, 퍼머링크 처리 정도죠.

프레임워크와 라이브러리를 사용하지 않으니 Webpack과 Babel도 자연스럽게 피할 수 있었습니다. 프리셋과 로더를 파헤칠 필요도 없었죠.

P.S. create-react-app이나 Next.js를 선택했다면 이런 문제들이 모두 해결됐을 거라고 반박할 수 있습니다. 하지만 저는 일부러 그러지 않았습니다.

3. CSS 작업 없이

저는 CSS 작성을 좋아합니다. 특히 SASS를 사용할 때 더욱 그렇죠. 하지만 이번에는 CSS를 전혀 작성하지 않기로 했습니다. 몇 가지 확실한 이유가 있었습니다:

  • 머릿속에 딱히 디자인이 없었고, 그럴듯하게 만들 수 있다 해도 시간과 에너지를 쏟고 싶지 않았습니다
  • Tailwind CSS를 직접 사용해 보고 싶었습니다

Tailwind CSS를 들어본 적이 없다면 "그냥 Bootstrap 대체품 아니야?"라고 생각하지 마세요. 공식 웹사이트에 있는 짧고 좋은 설명입니다:

대부분의 CSS 프레임워크는 너무 많은 것을 하려 합니다.
…
Tailwind는 주관이 담긴 사전 디자인 컴포넌트 대신, HTML을 벗어나지 않고도 완전히 커스텀한 디자인을 만들 수 있는 저수준 유틸리티 클래스를 제공합니다.

실제로 맞는 말입니다. 간단히 검색해 보면 Tailwind CSS로 "재구축"한 웹 앱을 많이 찾을 수 있습니다:

  • WhatsApp
  • Telegram
  • Facebook
  • Reddit
  • YouTube
  • Slack
  • Coinbase
  • GitHub
  • Trello
  • Twitter
  • Netlify

4. 좋은 접근성을 갖춘 웹사이트 만들기

지난달 Deque University에서 접근성 강의를 듣기 시작했습니다. 콘텐츠가 정말 훌륭했고, HTML은 기본적으로 접근 가능하다는 사실을 다시 상기시켜 줬습니다. 시맨틱 HTML 구조를 사용하고 키보드 탐색, 색상 대비 같은 기본적인 사항을 테스트하면, 장애를 가진 사람들이 콘텐츠에 접근하기 어렵게 만드는 여러 장벽을 제거할 수 있습니다.

접근성 전문가는 아니지만, 이 웹사이트에서 작업한 접근성 관련 항목들은 다음과 같습니다:

  • 스타일시트 비활성화: 스타일시트를 끄면 콘텐츠가 논리적·구조적 순서를 따르는지 확인할 수 있습니다.
  • VoiceOver: macOS와 iOS에 기본 포함되어 있습니다. 사용법이 매우 간단해서 직접 실험해 보면 사람들이 이 기능을 어떻게 활용하는지 더 잘 이해할 수 있습니다.
  • 모달: 모달은 접근성 측면에서 문제가 되곤 합니다. Ire Aderinokun의 접근 방식을 따르기로 했습니다.
  • axe: WCAG 2와 Section 508 접근성 규칙을 검사해 주는 확장 프로그램입니다.

물론 완벽하지는 않습니다. 메인 콘텐츠로 건너뛰는 skip link 추가처럼 작업하지 못한 부분도 있습니다. 궁금하시다면 모든 변경 사항이 담긴 Pull Request를 확인해 보세요.

5. 오래된 브라우저에서도 작동하는 웹사이트 만들기

스크립트와 스타일을 직접 통제할 수 없어서 이 목표는 달성하지 못했습니다. 하지만 불가능해 보이지는 않습니다. 제가 발견한 몇 가지 사항입니다:

  • Expedite(Stein 클라이언트)는 Safari 10에서야 도입된 fetch를 사용합니다. 서버 요청은 XMLHttpRequest로 대체할 수 있을 것 같습니다.
  • Tailwind는 많은 요소에서 Flexbox를 사용합니다. Safari는 iOS 7부터 Flexbox를 지원하기 시작했죠. 기존 요소에 몇 가지 속성을 추가해 어느 정도 괜찮은 모습을 만들 수 있을지도 모르겠습니다.
  • SSL 인증서는 오래된 브라우저에서 문제가 될 수 있습니다.

결론

이 웹사이트를 만드는 과정은 정말 재미있었습니다. 이런 사이드 프로젝트는 평소 업무에서 쓰지 않는 기술을 다룰 좋은 명분이 되어줍니다. 앞으로 Stein이나 TailwindCSS가 기능 프로토타이핑이나 해커톤 프로젝트에 유용하게 쓰일지도 모르겠네요.

프로젝트에 일부러 '제약 조건'을 추가했다는 점이 관례에서 벗어난 사고를 하게 만들어 줬습니다. 모든 목표를 달성하지는 못했지만, 각 기술 조각들이 어떻게 연결되는지 점점 더 깊이 이해하게 되었습니다.

다양한 기술을 자유롭게 다뤄볼 기회를 위해 이런 시도를 해보시길 진심으로 추천합니다. 굳이 Apple 컬렉션이 아니어도 됩니다. 좋아하는 책 목록이나 지금까지 걸어본 최고의 트레킹 코스를 정리하는 사이트를 만들어도 좋죠. 이 경우에는 결과보다 과정이 더 중요합니다.

참고로 Clockify로 시간을 측정해 봤는데, 코딩, 데이터 입력, 테스트, 이 글 작성까지 합쳐 총 13시간이 걸렸습니다.

이 글은 제 블로그에도 게시했습니다. 트위터에서 저를 팔로우하세요.