iOS 개발자가 모바일 청첩장을 만들면 어떻게 될까?

cleanUrl: /programming/my-wedding-invitation

어쩌다보니 사랑에 빠지고 결혼을 하게 되었습니다. 그리고 또 어쩌다보니 모바일 청첩장을 깃헙 페이지를 통해 직접 만들게 되어버렸습니다. 아무래도 디자이너와 결혼하는 개발자의 숙명 같은 건가 봅니다. 👩🏻‍💻👨🏼‍💻

웹개발은 서툰 편이지만, 그래도 애플플랫폼 개발자로서 올해에 WebKit에 어떤 변화가 있었는지는 나름 팔로우 하고 있었습니다. 그래서 이번 기회에 그 동안 주워섬긴 지식들을 최대한 활용해 청첩장을 만들어보기로 했습니다. 새로운 기능들에 대해 읽어보기만 했을 때는 그냥 그런가 보다 했는데, 막상 그 기능들을 적용하고 사용해보니까 그 손쉬운 사용법에 비해 임팩트가 굉장히 크다고 느꼈습니다. 그래서 이번에 청첩장을 만든 과정을 공유해 보려 합니다.

혹시 웹개발이라고는 10년전에 LAMP 로 웹페이지 만들어봤던 것이 전부인 iOS개발자가 모바일 청첩장 만드는 과정이 궁금하신 분들이라면, 계속해서 읽어봐주세요 😁

간단한 페이지니까, 바닐라 HTML과 CSS로

일단 모바일 청첩장은 참 좋은게, 들어가야 할 내용이 많지가 않습니다. 인사말과 결혼식이 열리는 일시/장소 정도가 들어가면 되죠. 단순하고 정적인 정보를 표현하기 위해 React나 Angular 를 쓸 필요는 없다고 생각했습니다. 사실은 이번 기회에 Swift로 만들어진 Publish 라는 정적 사이트생성기를 써볼까도 했었는데, 그 조차도 이 간단한 페이지에는 너무 기능이 많았습니다. 그래서 그냥 20세기에 하던 방식대로, index.html, style.css두 개의 파일만을 만드는 것으로 시작했고, 그걸로 충분했습니다.

프로젝트 폴더 안에 파일이 2개 이미지 리소스 폴더가 하나

<body>
    <img src="img/img1.jpg" id="mainImage" alt="성두와 수연이 턱시도와 웨딩드레스를 입고 정면을 향해 활짝 웃고 있는 사진">
    <br>
    <h1> 수연과 성두의 결혼식에 초대합니다 </h1>

    <p>
    👨‍🦳🤍👵의 장남  류성두 <br>
    👨‍🦳🤍👵의 장녀  이수연
    </p>
    <br>
    <h2> 초대의 말 </h2>

    <p> 
    함께할 때에 비로소 깨닫는 사랑임을 <br>
    영원히 기억하며 살겠습니다. <br>
    귀한 걸음 해주시어 <br>
    저희의 첫 시작을 축복해 주세요. <br>
    </p>
    <br>

    <h2>일시 및 장소</h2>
    <p>
        2020년 00월 00일 토요일 오후 0시 00분 <br>
        천주교 도림동성당<br>
        서울 영등포구 도영로 22길 22
    </p>
</body>

구조가 간단하니까 배포가 쉬워서 좋았습니다. 다음 두 줄의 코드로 바로 로컬에서 배포가 되더라고요 😁

// index.html이 위치한 경로
brew install http-server
http-server

Dynamic Type 지원하기

iOS 개발자로서 직접 만든 웹페이지가 꼭 지원했으면 하는 기능으로는 Dynamic Type이 있었습니다. Dynamic Type이란 사용자들이 기기의 설정 앱에서 설정한, 자신이 일반적으로 선호하는 글씨크기를 앱에서 최대한 존중하는 방식을 말합니다. 이렇게 설명을 들으면 네이티브 앱에서만 지원되는 행동이라고 생각 할 수도 있겠지만, 사실은 모든 웹페이지에서도 이를 지원 할 수 있습니다.

다행히 웹페이지에서 이 기능을 지원하는 일은 아주 간단합니다. 사용되는 css파일에 다음과 같이 선언하기만 하면 됩니다.

* {
    font: -apple-system-body;
    font-family: -apple-system;
}

이렇게 하면 이 웹페이지는 DynamicFont를 지원하는 애플의 시스템 폰트를 쓰게 됩니다. 필요한 건 이게 전부입니다! 이렇게 하면 아래 영상과 같이 웹페이지는 사용자의 설정에 따라 다른 글씨 크기를 보여줍니다.

그런데 주의를 할 것이 있습니다. 종종 css에서 폰트 크기를 설정하기 위해 px등의 절대적 단위를 쓰는 경우가 있습니다. 이런 단위를 사용하게 되면 아무리 애플 시스템 폰트를 쓰게 되더라도 폰트의 크기는 늘어나지 않습니다.

폰트가 다이나믹하게 늘어나도록 하기 위해서는 반드시 상대적 단위인 em 단위를 사용해야만 합니다.

h1 {
    font-size: 1.7em; /* Dynamic하게 폰트가 커집니다.*/
}

span {
      font-size: 17px; /* OS설정이 바뀌어도 폰트 크기가 고정됩니다. */
}

사실 모바일청첩장의 경우, 부모님 및 부모님의 지인 등 눈이 잘 보이시지 않는 노인 분들이 보실 확률이 높은 웹페이지입니다. 그리고 생각보다 아주 많은 노인분들이 이 다이나믹 타입 설정을 쓰고 계십니다. 경사스러운 소식이 더 잘 전달 되도록, 더 많은 모바일 청첩장들이 다이나믹 타입을 지원했으면 좋겠습니다.