brunch

라이킷 18 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 동환 Jun 20. 2021

디자이너의 웹 포트폴리오 제작기 3부

도전과제부터 짧은 회고까지

쉽지 않았겠지만 2부에서 언급한 자료를 모두 읽어보았다면, 당신은 p와 a태그의 차이점을 알 것이고, 생각하는 대로 영역을 나눌 수 있을 것이다. 한마디로 야구장에 들어갈 티겟을 얻은 것이다. 이번 글에서는 기술적인 도전과 배포 과정 그리고 짧은 회고로 3부작 글을 마치고자 한다.

기술적 도전

나의 야무진 위시리스트 중 기억에 남는 도전과제를 추리자면, 요 네 개 정도가 되겠다.
하나하나 짧게 적어보겠다.

woff2 경량 서체 공부, 영어와 한글 분리

다크 모드, toggle을 통한 컬러셋 핸들

svg 애니메이션

반응형 디자인

경량 서체, Unicode-range

한글 서체에 딸린 라틴서체는 조형적인 완성도가 낮거나, 느낌이 의도했던 톤 앤 매너(Tone and Manner)와 달라 불협화음을 내는 경우가 있다. Donny99에서는 Work sans의 넉넉한 자폭과 무게감이 잘 어울릴 거 같아, Unicode-range를 통해 국문과 영문/숫자/특수문자를 분리하였다. 포맷은 woff2를 사용하였다.

웹 페이지 렌더링 과정과 경량화에서 서체는 항상 언급되는 부분이다. 네이버 D2에 관련 포스팅을 읽어보자, 굉장히 잘 정리해 놓았다. 네이버 D2 - 웹 폰트 최적화

다크 모드

우리는 일반적으로 다크 모드가 그냥 배경만 어둡게 바꾸는 것으로 알고 있지만, 컬러셋 자체가 바뀌는 것이다. 커스텀한 CheckBox를 통해 두 개의 다른 CSS 컬러셋을 받아오는 방식으로 구현하였다.

Jiyoon님의 다크 테마 파헤치기와 쏘카 디자인의 다크 모드 관련 포스팅을 많이 참고하였다. 시간 관계상 구현 완료 시점에서 그냥 넘어갔지만, 각 환경에서의 컬러셋과 다크 모드에서의 가독성은 조금 더 연구가 필요해 보인다.

SVG 애니메이션

SVG란 확장 가능한 벡터 그래픽(Scalable Vector Graphics)이라는 뜻이다. 말 그대도 벡터 포맷이고 XML 형식의 마크업 언어로 구성되어 있다. 코드 에디터에 Drop 하면 코드로 볼 수 있고, Path에 CSS로 애니메이션을 부여할 수 있다. Scroll Interaction은 Apple 공식 홈페이지를 많이 참고하였다.

왜 다크 모드와 SVG 애니메이션을 기획했는지는 웹사이트 리뉴얼 노트에 자세히 적어 놓았다.

반응형 디자인

리뉴얼 이전 홈페이지에 Google Analytics의 Script 코드를 삽입했었는데, 약 1년간 데이터를 보면 모바일 접속률이 약 47%로 높게 나왔다. 이에, 모바일 가독성을 위해 Media-query에 break-point를 설정하여 반응형 디자인을 구현하였다.

Responsive Design을 잘 공부하면 Front-end 개발자와 웃으면서 밥 먹을 수 있다.

Let's git it

아무리 예쁘게 웹사이트를 만들어도 서버에 올리지 않으면 지구인들이 볼 수 없다. 24시간 켜져 있는 콤퓨타에다 내가 만든 것들의 복사본을 옮겨놓는다고 생각하면 된다. 웹 호스팅에는 다양한 방법이 존재하는데 나는 Git-hub Pages를 사용했다. 리포지토리를 새로 만들고 제작한 html, css, jpeg.. 파일들을 업로드 하자.

개인 URL을 사용하고 싶다면, 도메인을 대여하면 된다. 나는 Google Domain에서 만원 정도의 가격으로 Donny99를 빌렸다. io와 같이 간지 나는 도매인은 생각보다 비싸다. '.com'이 흔하지만 가독성과 유추 가능성이 높기 때문에 선택하였다.

짜잔! 이제 전 세계 어디에서든 인터넷 환경에서 Donny99에 접속할 수 있다!

일단 하세요

인쇄를 공부했다면 알 것이다. 인쇄물은 크기와 재질, 자연광인지 형광등인지 다양한 환경에서 다르게 보인다. 웹 결과물도 마찬가지이다. 브라우저와 디스플레이에 따라 기능이 작동하지 않을 수도 있고 다르게 보일 수도 있다.

일단 빠르게 제작-배포 과정을 진행하고 여러 환경에서 아웃풋을 보면서 수정하는 것을 추천한다. 13-inch 맥북과 iPhone 11에서의 느낌이 많이 다르더라.. 아무리 열심히 가독성을 고려해도 결국 최종 아웃풋을 보며 고치는 게 더 빠르다.

짧은 회고

자 조금 진지하게, 우리가 만든 이 어설픈 웹사이트가 무슨 의미를 갖는지 생각해보자. 이번이 첫 번째 시도였다면 아마 당신의 아웃풋은 꼬질꼬질하고 퀄리티가 낮을 것이다. 하지만 당신은 이제 웹 환경을 어렴풋이 이해할 수 있다. 왜 개발자들이 오늘도 안된다고 말하는지 조금은 이해할 수 있을 것이다.(반성의 시간)

단순히 HTML5, CSS3 이상으로 우리는 타 직군을 대하는 태도를 배웠다. 새로운 관점을 배웠고, 모르는 것을 스스로 찾고, 공부하고, 생각하는 법을 배웠다. 그리고 무엇보다 중요한 것은 미지의 영역에 도전해 어느 정도의 성과를 냈다는 것이다.

이 모든 것들은 단순히 DAU, MAU를 올리고 구현 가능한 디자인을 하는 것을 넘어, 기술과 함께 변화하는 디자이너의 의미를 생각해 볼 수 있는 것들이라고 생각한다.

디자이너의 웹 포트폴리오 제작기 (끝)

keyword