UI/UX 디자인 웹 포트폴리오 제작기
디자인 독학하기 10
UI/UX 디자인 경험을 공유합니다 :)
[Contents]
01 디자인 공유하기(SHARE DESIGN) 프로젝트
02 검색 엔진 최적화(SEO)
03 사용자에게 편한 언어를 제공하는 UX 디자인은?
04 디자인 공유하기 소개
05 참고 자료
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
01 디자인 공유하기(SHARE DESIGN) 프로젝트
전 세계의 많은 디자이너가 브런치, 미디엄, 유튜브 같은 공간에 공유한 디자인 경험에서 많은 영감을 받아왔다. 나도 사람들에게 좋은 영감을 줄 수 있는 디자인 경험을 공유하고 싶다고 생각했다. 그래서 2019년 2월부터 2020년 상반기까지 나의 UI/UX 디자인 경험을 브런치에 참 열심히 공유했었다.
어느 순간부터 글과 이미지만으로 제작한 콘텐츠밖에 발행할 수 없는 브런치에서는 UI/UX 디자인 경험을 온전히 전달하기 힘들다는 생각이 들었다. UI/UX 디자인은 사용자와 '소통'하며 '동작'하는 디지털 프로덕트(Digital Product)를 디자인하는 일이기에, 읽고 볼 수만 있고 독자와 인터랙션(Interaction, 상호 작용)할 수 없는 콘텐츠로는 온전히 UI/UX 디자인 경험을 전달하기 힘들다고 생각한 것이다. 콘텐츠 속에서 공유하고 있는 디자인을 독자가 직접 동작시켜볼 수 있다면 독자들에게 UI/UX 디자인 경험을 더 잘 전달할 수 있지 않을까?
또 하나, 우리나라만이 아닌 전 세계에 경험을 공유하고 싶었다. 모든 언어를 다루는 건 당연히 할 수 없는 일이지만, 내가 글을 쓸 수 있는 한국어와 영어만으로라도 전 세계 사람들과 경험을 나누고 싶었다.
하지만 브런치, 미디엄, 유튜브처럼 글 또는 영상이라는 콘텐츠 형식이 정해져 있고, 언어를 한 콘텐츠 안에서 바꿀 수 없는 공간에서는 내가 생각한 바를 모두 구현하는 게 불가능했다. 내가 원하는 대로 전 세계 사람들과 UI/UX 디자인 경험을 나누려면 콘텐츠를 제작하고 배포하는 플랫폼 자체를 직접 구축하는 수밖에 없었다. 이는 내 웹 포트폴리오로 UI/UX 디자인 경험을 공유하면 어떨까 하는 생각으로 이어졌다.
그동안 나의 UI/UX 디자인 경험의 기록인 포트폴리오가 이직을 위한 목적으로만 쓰이는 게 아쉬웠었다. UI/UX 디자이너로서 지나온 시간의 소중한 발자취인 포트폴리오가 가치 있게 쓰일 수 있다면 좋겠다고 생각했다. 나의 경험이 도움이 될 누군가에게 잘 전달될 수 있다면 가치 있는 포트폴리오가 될 수 있지 않을까? 보여주기 위한 포트폴리오가 아닌, 내가 디자인한 사용자 경험(User eXperience)으로 온전히 UI/UX 디자인 경험을 공유할 수 있는 새로운 형식의 포트폴리오를 만들면 어떨까?
그렇게 내 웹 포트폴리오로 UI/UX 디자인 경험을 공유하자는 '디자인 공유하기(SHARE DESIGN) 프로젝트'를 2020년 9월 12일에 시작했다. 주말이라는 제한된 시간 속에서 기획부터 디자인, 웹 개발, 앱 개발, 콘텐츠 제작, 번역까지 모든 일을 혼자 진행하느라 첫 번째 콘텐츠를 배포하기까지 시간이 꽤 오래 걸렸다. 그 시간을 지나 2021년 3월 28일 첫 콘텐츠 '언어 전환 토글 버튼의 UI/UX 디자인은?'을 배포했다.
02 검색 엔진 최적화(SEO)
내 웹 포트폴리오는 'UI/UX 디자인 경험 공유'가 목적이기 때문에 사람들이 웹 포트폴리오를 잘 찾을 수 있도록 하는 게 중요했다. 즉 검색 엔진을 최적화(SEO)해야 했다. 검색 엔진 최적화(Search Engine Optimization, SEO)는 구글이나 네이버 같은 검색 서비스의 검색 엔진이 웹 페이지를 잘 찾을 수 있도록 최적화하는 작업을 말한다.
검색 엔진 최적화를 위해 처음에 고민한 부분은 개발 기술 스택(Technology Stack)이었다. 기술 스택에 따라 검색 엔진을 최적화하는 일이 쉬워질 수도, 어려워질 수도 있기 때문이다. 기술 스택이란 소프트웨어를 개발하기 위해 쓸 프로그래밍 언어와 라이브러리*, 프레임워크* 같은 도구들의 조합을 말한다.
라이브러리*
특정 목적을 위한 기능의 집합.
프레임워크*
특정 목적을 위한 여러 개발 요소와 메뉴얼을 모아 뼈대를 제공하는 개발 환경.
검색 엔진 최적화(SEO)를 위한 웹 개발 기술 스택은?
#HTML #CSS #Typescript #ReactJS #NextJS
웹 포트폴리오를 만들기 위해 필요한 개발 언어는 웹의 구조를 담당하는 HTML과 스타일을 담당하는 CSS, 동적인 부분과 사용자와의 상호 작용을 담당하는 자바스크립트(Javascript)다. 여기서 특히 중요한 건 자바스크립트인데, 난 자바스크립트 대신 자바스크립트의 모든 내용을 포함하면서 새로운 문법들을 쓸 수 있는 타입스크립트(Typescript)를 프로그래밍 언어로 선택했다. 타입스크립트는 마이크로소프트(Microsoft)에서 개발하고 관리한다.
개인적으로 자바스크립트보다 타입스크립트로 프로그래밍을 할 때 생산성이 높았다. 또, 타입스크립트는 내가 관심을 두고 있는 iOS 개발 언어인 스위프트(Swift)와 안드로이드 개발 언어인 코틀린(Kotlin)과 같은 범주에 있는 언어라서, 타입스크립트로 프로그래밍을 하면 자바스크립트로 프로그래밍을 할 때보다 스위프트, 코틀린 코드와 비슷한 느낌이 들어서 좋았다.(덧. 자바스크립트는 동적 타입 언어이며 타입스크립트, 스위프트, 코틀린은 정적 타입 언어입니다.)
주요 라이브러리로는 페이스북에서 개발하고 관리하는 UI(User Interface, 사용자 인터페이스) 라이브러리인 리액트(ReactJS)를 도입했다. 리액트는 UI/UX 디자이너 친화적인 UI 라이브러리라 생각한다. UI 컴포넌트 단위로 프로그래밍을 할 수 있게 만들어주는 라이브러리이기 때문이다. 스케치(Sketch)나 피그마(Figma), 어도비 XD(Adobe XD), 프레이머(Framer) 같은 디자인 툴에서 만든 디자인 시스템 컴포넌트는 리액트 컴포넌트와 완벽하게 대응시킬 수 있다.
또한 리액트는 UI를 빠르게 업데이트하는 기술을 쓰기 때문에 성능이 좋은 웹을 만들기에 유리하다. 다시 말해, 빠르게 동작하는 웹 어플리케이션을 만들기에 좋다. 물론 코드가 엉망이면 리액트로 만들어도 느리다. 개인적으로는 순수 자바스크립트 또는 타입스크립트로 만들 때보다 리액트를 도입했을 때 코드 가독성이 좋아 프로그래밍 생산성도 높아진다고 생각한다.
하지만 리액트로 개발했을 때 큰 문제가 있다. 바로 검색 엔진 최적화가 어렵다는 점이다. 태생적으로 리액트로 만들어진 웹 어플리케이션은 검색 엔진이 읽어가기가 어렵다. 내 웹 포트폴리오가 검색이 잘 되지 않는다는 뜻이다.
이를 해결하기 위해 넥스트(NextJS) 프레임워크를 도입했다. 넥스트를 도입하면 검색 엔진 최적화가 수월해진다. 같은 이유로 전 세계 많은 웹 어플리케이션에서 리액트 프레임워크로 넥스트를 도입하고 있으며, 현재 내가 UI/UX 디자이너로 일하고 있는 쿠돈 팀에서도 리액트와 함께 넥스트를 쓰고 있다.
넥스트까지 해서 검색 엔진 최적화를 위한 기술 스택을 모두 정했다. 이런 기술 스택과 함께 검색 엔진에 전달할 정보와 코드를 잘 작성해두면 어렵지 않게 웹 포트폴리오를 검색 결과 최상단 혹은 상단에 위치시킬 수 있다.
왜 순수 리액트로 개발하면 검색 엔진 최적화에 취약하고,
넥스트를 도입하면 검색 엔진 최적화가 수월해질까?
위 내용은 순수 개발적인 부분이라 글의 큰 맥락과 관련이 없으므로 생략했습니다. 관심이 있으신 분은 CSR[Client Side Rendering]과 SSR[Server Side Rendering], SPA[Single Page Application], MPA[Multi Page Application]를 검색해 보시면 관련 자료를 찾으실 수 있습니다.
Google 검색 엔진 최적화에 집중했다.검색 엔진 최적화에서 무엇보다 중요한 건 '좋은 콘텐츠'
검색 엔진 최적화를 위한 준비도 중요하지만 무엇보다 중요한 건 '좋은 콘텐츠'다. 좋은 사용자 경험(UX)을 주는 디자인과 마찬가지로 좋은 콘텐츠에는 힘이 있다. 좋은 콘텐츠라면 알리지 않아도 많은 사람에게 닿는다. 난 그렇게 믿어 왔으며, 브런치 콘텐츠로 증명했다.
03 사용자에게 편한 언어를 제공하는 UX 디자인은?
내 웹 포트폴리오의 한국어 이름은 프로젝트명과 같은 '디자인 공유하기'다. 영어 이름은 'SHARE DESIGN'이다. 디자인 공유하기를 한 마디로 정리하면 아래와 같다.
UI/UX 디자인 경험을 전 세계 사람들과 공유하기 위한 디지털 프로덕트(Digital Product)
1_ 사용자가 느끼지 못하는 UX 디자인하기
디자인 공유하기를 만들면서 가장 고민했던 부분은 방문자(이하 사용자)에게 편한 언어를 제공하기 위한 UX 디자인이었다. 디자인 공유하기에서는 내가 글을 쓸 수 있는 한국어와 영어 두 언어로 콘텐츠를 제공하는데, 디자인 공유하기에 처음 방문한 사용자가 아무런 행동을 하지 않아도 한국어와 영어 중 사용자에게 더 편한 언어로 디자인 공유하기를 바로 둘러볼 수 있도록 하는 사용자 경험을 만들고 싶었다. 디자인 공유하기에 방문한 사용자가 언어 전환 기능을 찾아 그 기능을 동작시키기 위해 고민하고 그 기능을 동작시키는 '불필요한 행동'을 하지 않게 하고 싶었던 것이다. 여기에는 우리나라가 아닌 다른 나라의 사용자는 한국어보다 영어가 더 편할 거라는 가정이 있다.
문제는 개발할 수 있는지였다. 이 UX 디자인을 구현하려면 디자인 공유하기에 들어온 사용자가 한국어와 영어 중 무슨 언어가 더 편한지 알아야 하는데, 어떻게 알 수 있을지 감이 잡히지 않았다.
디자인 공유하기 프로젝트를 처음 시작했던 2020년 9월에는 개발을 시작한 지 얼마 되지 않았기 때문에 이게 가능한 일인지, 상상만 할 수 있는 UX 디자인인지 고민이 많았다. 하지만 디자인 공유하기에 방문해주시는 전 세계의 누구라도 처음부터 편한 언어로 디자인 공유하기를 둘러볼 수 있길 바랐다. 꼭 구현해내고 싶었다.
여러 시행착오를 거쳐서 결국 구현에 성공했다. 사용자가 웹 브라우저(Web Browser)에 설정해 놓은 언어 정보를 활용하자는 아이디어를 냈다. 최초 사용자의 웹 브라우저 설정 언어가 한국어라면 한국어를, 한국어가 아니라면 영어를 제공하도록 개발한 것이다. 이는 사용자가 느끼지 못하는 경험이지만, 사용자가 디자인 공유하기에서 해야 할 일에 더 집중하도록 한 UX 디자이너로서의 배려다.
2_ 한국어와 영어 모두 검색 엔진 최적화(SEO)하기
하지만 문제가 있었다. 이 UX 디자인을 구현한 디자인 공유하기가 한국어와 영어 두 언어 중 기본 언어로 설정해 놓은 한국어로만 검색된다는 치명적인 문제가 있었던 것이다. 재방문 등 첫 방문 이후의 여러 경우까지 고려해 열심히 구현했던 UX 디자인이었지만, 검색 엔진 최적화가 하나의 언어로만 된다면 전 세계에 디자인 경험을 공유한다는 디자인 공유하기의 취지와 맞지 않았다. 새로운 방법을 찾아야 했다.
다행히 디자인 공유하기에서 쓰고 있는 프레임워크인 넥스트(NextJS)에서 이 문제를 해결할 수 있는 기능(Internationalized Routing)을 2020년 10월 27일부터 제공하기 시작했다는 걸 알게 됐다. 기존 내 코드에 이 기능을 조합해 코드를 다시 짰다. 그 결과 디자인 공유하기는 한국어와 영어 두 언어 모두 구글에서 잘 검색되고 있다.
2021년 3월 중순 기준으로 구글에 '디자인 공유하기'를 검색하면 1번째에, 'share design'을 검색하면 4~6번째 검색 결과로 표시된다.처음에 이 UX 디자인을 구현한 방법과 넥스트의 새로운 기능을 조합한 방법의 결정적인 차이는 URL의 변화 유무다. 처음에 구현한 웹 어플리케이션은 언어에 따라서 URL이 바뀌지 않지만, 넥스트의 기능을 조합한 이후에는 URL이 바뀐다. 예를 들어, 디자인 공유하기의 '프로젝트 소개' 페이지의 URL은 'https://share-design.dalgu.app/introduction'으로 기존에는 언어가 달라져도 이 URL이 바뀌지 않았지만, 넥스트의 기능을 조합한 이후 한국어일 때는 'https://share-design.dalgu.app/introduction'이고 영어일 때는 'https://share-design.dalgu.app/en/introduction'으로 URL이 바뀐다. URL을 잘 살펴보면 영어일 때는 app'과 'introduction' 사이에 영어를 뜻하는 'en'이 추가된 것을 볼 수 있다. 이 차이가 검색 엔진이 한국어로 된 디자인 공유하기와 영어로 된 디자인 공유하기를 모두 읽을 수 있느냐 없느냐를 결정한다.(덧. 웹 어플리케이션을 디자인하고 개발할 때에는 URL을 잘 쓰는 게 중요합니다.)
바뀐 디자인 공유하기는 처음에 기획한 UX를 제공하는 동시에 한국어와 영어 두 언어로 각각 검색 엔진 최적화가 가능하다. 앞으로 해야 할 일은 단순히 '디자인 공유하기', 'share design'이라는 키워드로 검색했을 때에만 노출되는 게 아닌, 콘텐츠 하나하나가 전 세계에 잘 공유되도록 디자인 공유하기를 좋은 콘텐츠로 채우는 일이다.
3_ 예외 상황에 대처하기 위한 언어 전환 토글 버튼
고민이 하나 더 있었다. 위와 같은 UX 디자인을 구현했더라도, 한국어가 편한 사용자가 영어로 된 디자인 공유하기에 들어올 수도 있고 영어가 편한 사용자가 한국어로 된 디자인 공유하기에 들어올 수도 있다는 점이 걱정된 것이다.
이런 상황을 대비하기 위해 언어를 전환할 수 있는 토글 버튼*을 쉽게 발견해 쓸 수 있도록 디자인했다. 디자인 공유하기의 모든 화면 위쪽에 고정돼 있는 헤더(Header) 컴포넌트 오른쪽에 언어 전환 토글 버튼을 배치한 것이다. 사용자는 디자인 공유하기의 어떤 화면에서도 원할 때 언어를 바꿀 수 있다.
토글(Toggle) 버튼*
토글(Toggle) 버튼은 두 가지 상태 중 하나를 선택하는 데 쓰이는 버튼을 뜻한다. 디자인 공유하기에는 언어가 한국어인 상태와 영어인 상태가 있다.
디자인 공유하기는 반응형으로 디자인돼 있어 사용자가 접속한 환경이 모바일인지, 태블릿인지, 데스크톱인지에 따라 헤더 컴포넌트의 모습이 바뀐다.04 디자인 공유하기 소개
디자인 공유하기는 아래와 같은 IA(Information Architecture, 정보 구조)로 디자인돼 있다.
처음에는 이보다 복잡한 IA였지만, 사용성과 개발 복잡도 등을 고려해 단순한 IA로 디자인했다.1_ 한국어와 숫자는 스포카 한 산스(Spoqa Han Sans), 영어는 로보토(Roboto)
디자인 공유하기에서는 한국어와 숫자는 스포카 한 산스를, 영어는 로보토를 폰트로 쓰고 있다. 스케치나 피그마, 어도비 XD, 프레이머 같은 디자인 툴에서 여러 언어로 디자인을 하려면 언어를 일일이 바꿔야 해서 시간이 꽤 드는 단순 반복 작업을 해야 하지만, 코드로 디자인을 하면 이런 단순 반복 작업을 하지 않아도 된다. 디자인 공유하기는 한국어로 먼저 디자인을 한 뒤, 영어는 개발을 하면서 실제 프로덕트에서 바로 디자인을 확인하며 언어에 따라 이상해진 부분을 조정하는 식으로 작업했다.
특이한 건 디자인 공유하기가 한국어 상태일 때에는 문자, 숫자, 특수 기호 모두가 스포카 한 산스이고, 영어 상태일 때에는 문자, 숫자, 특수 기호 모두가 로보토가 아니라는 점이다. 한국어 문자와 숫자는 스포카 한 산스이고, 영어 문자는 로보토이며, 특수 기호는 언어 상태에 따라 한국어일 때에는 스포카 한 산스, 영어일 때에는 로보토다.
이를 디자인 툴에서 작업하려면 텍스트 입력창 안에서 일일이 바꿔줘야 하는 대단히 번거로운 작업을 거쳐야 하기 때문에 디자인 툴로 작업하는 건 엄두를 내기 힘든 폰트 페어링(Font-Pairing)이지만, 코드로 하면 쉽게 내가 원하는 구성으로 세세하게 폰트를 페어링할 수 있다. 아래는 로보토 영어 문자와 스포카 한 산스 숫자의 폰트를 페어링한 디자인이다.
Roboto 영어 문자와 스포카 한 산스 숫자의 폰트 페어링2_ 반응형 웹(Responsive Web)
디자인 공유하기는 반응형으로 디자인, 개발돼 있어서 데스크톱, 태블릿, 모바일 어떤 환경에서든 최적화된 UI 화면을 제공한다.
3_ 하나의 코드로 웹부터 앱까지 모든 환경에 대응
디자인 공유하기는 하나의 코드로 데스크톱 웹, 태블릿 웹, 모바일 웹, 앱 모두 대응하자는 개발 컨셉으로 만든 디지털 프로덕트다. 사실 프로젝트 초반에는 앱까지 개발할 계획은 없었다. 안 그래도 디자인 공유하기 프로젝트는 기획부터 디자인, 웹 개발, 콘텐츠 제작, 번역까지 모든 일을 혼자 진행하는 프로젝트라 이미 물리적인 시간이 많이 부족한데, 앱까지 개발하면 언제 디자인 공유하기를 사람들에게 알리게 될 수 있을지 예상이 되지 않았다.
하지만 UI/UX 디자이너로서 모바일 웹 환경의 사용성이 마음에 걸렸다. 모바일 크롬이나 사파리, 삼성 인터넷 등의 모바일 웹 브라우저에는 상단 주소 입력창과 하단 툴바(Toolbar)가 있어서 디자인 공유하기가 차지하는 공간이 좁아지고, 이 때문에 디자인 공유하기에서 전달하는 UX 디자인을 온전히 경험하기가 힘들어진다.
이 문제를 해결하기 위해 디자인 공유하기 앱까지 개발하기로 계획하고 iOS 앱을 개발해 출시했다. 디자인 공유하기 iOS 앱을 설치하면 상단 주소 입력창과 하단 툴바(Toolbar) 없이 모바일 환경에서 디자인 공유하기가 전달하고자 하는 UX 디자인을 온전히 경험할 수 있다. 사실 안드로이드 앱도 개발해 구글의 심사까지 마쳤지만, 새로운 디자인 경험을 계속 추가해 나가야 하는 상황에서 안드로이드 앱까지 관리하기에는 물리적으로 시간이 부족할 것 같아서 출시를 하지 않기로 결정했다. (덧) 2022년 4월부터 '윤슬' iOS 앱를 운영하기 시작해 현재 '디자인 공유하기' iOS 앱은 운영을 중단했습니다.
iOS 앱을 설치하면 상단 주소 입력창과 하단 툴바(Toolbar) 없이 모바일 환경에서 디자인 공유하기가 전달하고자 하는 UX 디자인을 온전히 경험할 수 있다.디자인 공유하기 앱은 iOS 앱 개발 언어인 스위프트(Swift)로 모두 개발한 앱이 아니다. 앱에서 하는 주요 역할은 '디자인 공유하기'라는 웹을 띄워주는 일이다. 쉽게 말해 앱 속의 코드는 디자인 공유하기 웹을 보여주는 역할을 하는 코드로만 이뤄져 있어서, 사실상 웹을 개발하는 하나의 코드로 웹부터 앱까지 모든 환경에 대응할 수 있다.
물론 웹을 띄워주는 일 외에 스위프트로 개발해 놓으면 좋은 부분이 몇 가지 있다. 그중 가장 중요하다고 생각하는 한 가지는 인터넷이 연결돼 있는지 확인하는 '네트워크 연결 확인' 기능이다. 앱 코드에서 하는 주요 역할이 웹을 보여주는 역할인데, 말 그대로 웹만 보여주기 때문에 인터넷 연결이 되지 않으면 흰 화면이 보이게 된다.(안드로이드에서는 오류 화면이 뜬다.) 따라서 아래처럼 네트워크 체크 기능을 개발해 놓으면 사용자가 앱을 실행했을 때 흰 화면을 마주하게 되는 좋지 않은 경험을 하지 않게 할 수 있다.
확인 버튼을 누르면 앱은 네트워크가 연결됐는지 확인하고 네트워크가 연결됐다면 디자인 공유하기 웹을 띄워주며, 연결되지 않았다면 위 메시지를 다시 사용자에게 전달한다.4_ 다크 모드(Dark Mode)
브런치를 쓰면서 나의 페인 포인트(Pain Point, 고충점) 중 하나는 다크 모드가 없다는 점이었다. 개인적으로 다크 모드가 눈이 더 편안해 다크 모드를 좋아한다. 디자인 공유하기는 내 개인의 취향을 반영해 다크 모드로 디자인했다. 다크 모드(Dark Mode)와 라이트 모드(Light Mode) 중 사용자가 원하는 모드로 전환할 수 있도록 미리 개발해 두었는데, 실제로 적용할지 말지는 아직 고민 중이다.
5_ 프레이머 모션(Framer Motion)
UI/UX 디자인을 처음 시작했을 때 자연스럽게 모션 디자인(Motion Design)과 프로토타입(Prototype)을 제작하는 일에 매력을 느꼈었다. 스케치나 어도비 XD, 피그마 같은 디자인 툴에서 만든 정적인 화면들을 실제 제품처럼 동작하도록 만드는 모션 디자인과 프로토타이핑(Prototyping)은 대단히 흥미로운 일이었다.
2019년에 모션 디자인과 프로토타입 제작을 위해 주로 사용했었던 툴은 프로토파이(Protopie)였다. 주요 목적은 개발자에게 모션 가이드와 더불어 동작 화면을 녹화해 전달하고, 실제 제품처럼 동작하는 디자인으로 팀원들과 디자인 리뷰를 하기 위해서였다. 실제 제품처럼 동작하는 디자인으로 디자인 리뷰를 해본 적이 없었던 예전 팀의 팀원들이 처음 프로토파이로 만든 프로토타입으로 디자인 리뷰를 할 때 놀라며 좋아했던 모습이 기억난다.
그렇게 1년 정도 프로토파이로 모션을 디자인하고 프로토타입을 제작했었지만, 사용 빈도는 점점 줄어갔다. 개인적으로 단순 반복적인 일을 하는 걸 좋아하지 않는데, 프로토파이는 코드를 몰라도 쓸 수 있는 큰 장점이 있는 대신 단순 반복적인 작업을 상당히 많이 해야 했다. 무엇보다 프로토파이로 만든 결과물을 실제 프로덕트에 쓸 수 없었다는 점이 내겐 큰 페인 포인트였다. 프로토파이로 디자인한 모션을 실제 제품에 적용하기 위해 각 모션 수치들을 가이드로 만들어 개발자에게 전달하면 개발자가 그 수치들로 모션을 구현했는데, 이 과정에서 가이드도 따로 제작해 전달해야 하는 불편함이 있었다.(덧. 이는 2019년 프로토파이 기준이며, 지금은 프로토파이에 'Interaction Recipes'라는 훌륭한 가이드 전달 방법이 있습니다.)
그래서 프로토파이보다는 어도비 애프터 이펙트(After Effect)를 활용해 만든 애니메이션을 실제 코드로 전달할 수 있는 에어비앤비(Airbnb)의 Lottie 라이브러리를 더 자주 활용하게 됐다. 하지만 Lottie로는 내가 원하는 UI 움직임을 모두 표현할 수 없었다. 단일 애니메이션에 특화된 기술이었기 때문이다. 여러 트릭을 써서 다양한 방법으로 Lottie를 활용하긴 했지만, 한계가 명확했다.
프로토파이와 Lottie의 한계를 극복할 새로운 방법은 없을까? 후보로는 페이스북에서 만든 프로토타이핑 툴 '오리가미 스튜디오(Origami Studio)'와 코드 친화적인 프로토타이핑 툴 '프레이머(Framer)'가 있었다. 프레이머는 예전부터 관심이 있던 터라 덜컥 2020년 7월에 1년치를 결제하고 이것저것 시도해봤다. 하지만 내가 생각했던 방향과는 다른 툴이었다.
프레이머를 선택했던 건 프레이머에서 만든 '코드 컴포넌트(Code Component)'를 리액트로 개발한 실제 웹 어플리케이션에 그대로 적용할 수 있을 거라는 기대 때문이었다. 하지만 프레이머에서 만든 코드 컴포넌트를 실제 프로덕트에 적용하려면 추가 작업이 필요했다. 결국 프로토파이로 디자인하고 가이드를 전달하는 것과 크게 다를 바가 없는 과정을 거쳐야 했다.
1년치 결제한 돈이 아까워 프레이머를 계속 파다 보니 '프레이머 모션(Framer Motion)'을 알게 됐다. 프레이머 모션은 프레이머 팀에서 개발하고 유지 보수하고 있는 실제 제품에 적용할 수 있는 UI 모션 라이브러리였다. 내가 찾던 그 무언가였다.
www.framer.com/motion/하지만 대단히 큰 벽이 있었다. 프레이머 모션은 리액트 기반 라이브러리로 프레이머 모션을 다루려면 리액트를 알아야 했다. 처음 프레이머 모션을 알게 됐을 때만 해도 리액트를 잘 몰랐기 때문에 대단히 큰 벽이 느껴졌다. 하지만 리액트로 개발하는 걸 즐기는 지금에 와서는, 프레이머 모션은 가이드를 만든다거나 코드를 수정하는 등 중간 과정 없이 바로 쓸 수 있도록 UI 모션 혹은 애니메이션을 만들어 프론트엔드 개발자에게 전달할 수 있는 훌륭한 도구가 됐다. 또, 단일 애니메이션에 특화된 Lottie의 한계를 완벽히 해결하고 다양한 UI 모션들을 실제 프로덕트 코드 수준에서 프론트엔드 개발자와 의논하고 코드를 작성할 수 있게 됐다.
디자인 공유하기에서는 프레이머 모션을 적극적으로 쓰고 있다. 사실 이제 프로그래밍이 익숙하기 때문에 모션을 디자인하는 데 꼭 프레이머 모션이라는 라이브러리 하나에만 의존할 필요는 없다. 순수 CSS나 자바스크립트, 타입스크립트로 개발할 수도 있고, 수많은 오픈 소스 라이브러리를 활용할 수도 있다. 더이상 프로토파이, Lottie 같은 툴에 종속적이지 않게 된 것이다.
홈 디자인
디자인 공유하기의 홈은 내비게이션 역할을 한다. 사용자는 홈에서 디자인 공유하기에 있는 콘텐츠를 둘러보고 원하는 콘텐츠로 이동할 수 있다. 콘텐츠 목록이 위에서부터 아래로 나열되는 디자인이다.
최초 배포 시에는 콘텐츠가 하나밖에 없어서 빈 부분을 어떻게 처리할지 고민이 많았다. 물론 이는 콘텐츠가 늘어나면서 자연스럽게 해결될 문제지만, 큰 화면에서는 빈 공간이 너무 많았다. 이를 해결하기 위해 사용자가 접속한 기기의 화면 세로 길이에 따라서 길이가 달라지는 직선을 활용했다. 화면 세로 길이의 0.45배 길이인 직선을 첫 번째 콘텐츠 목록 아래에 넣어 스크롤을 내리면 무언가 있다는 걸 알리는 동시에 공간을 채웠다. 직선 아래에는 '프로젝트 소개' 화면으로 이동하게 하는 버튼과 저작권 표시가 있다.
디자인 공유하기의 홈은 내비게이션 역할을 한다. 콘텐츠 목록이 위에서부터 아래로 나열되는 디자인이다.콘텐츠 디자인
디자인 공유하기에서 가장 중요한 디자인은 콘텐츠 화면 디자인이다. 디자인 공유하기의 목적인 UI/UX 디자인 경험 공유를 하는 화면이기 때문이다. 사용자가 다크 모드에서 편하게 읽을 수 있도록 하기 위한 배경 색과 글씨 색의 대비부터 한국어와 영어를 동시에 대응할 수 있는 자간과 행간, 모바일과 태블릿, 데스크톱에서 각각 적절한 폰트 크기 등을 정하기 위해 많은 고민과 시행착오를 거쳤다.
배경 색과 글씨 색의 대비부터 한국어와 영어를 동시에 대응할 수 있는 자간과 행간, 모바일과 태블릿, 데스크톱에서 각각 적절한 폰트 크기 등을 정하기 위해 많은 시행착오를 거쳤다.사용자는 콘텐츠마다 댓글을 남길 수 있다. 일반적인 서비스라면 로그인을 해 각 사용자의 프로필과 닉네임 등으로 댓글을 쓸 수 있지만, 디자인 공유하기는 개인 프로젝트이지 서비스가 아니기 때문에 회원 가입이 없다. 따라서 댓글별로 구별할 방법을 고안해야 했는데, 내가 생각한 방법은 '색'과 '날짜'였다.
사용자가 '댓글 남기기' 버튼을 눌러 댓글 쓰기 화면에 도달하면 원 안에 2가지 색으로 된 그라데이션이 자동으로 채워지고, 그 오른쪽에는 그날의 날짜가 입력된다. 재미있는 건 처음에 정해진 색이 마음에 들지 않으면 바꿀 수 있도록 '색 바꾸기' 버튼을 제공한다는 점이다. 이 버튼을 누르면 랜덤으로 색이 바뀐다. 사용자에게 이 버튼이 있다는 걸 알리기 위해 사용자가 댓글 쓰기 화면에 도달하면 이 버튼은 부르르 진동한다. 하지만 내 생각과는 다르게 이 진동 모션은 모바일 외에는 별로 눈에 띄지 않아서 다른 식으로 바꿔볼까 고민 중이다.
처음에 정해진 프로필 색이 마음에 들지 않으면 바꿀 수 있도록 '색 바꾸기' 버튼을 제공한다.추가로 사용자가 댓글을 연속으로 쓰지 못하게 했다. 사용자가 연속으로 댓글을 쓰려고 하면 댓글 작성을 막고 토스트 메시지로 댓글을 연속으로 쓸 수 없다는 사실을 알려주도록 디자인하고 개발한 것이다. 디자인 공유하기는 사용자가 로그인을 하고 댓글을 쓰는 게 아니기 때문에, 악의적으로 댓글을 여러 개 쓸 가능성을 고려했다.
사용자가 연속으로 댓글을 쓰려고 하면 토스트 메시지로 댓글을 연속으로 쓸 수 없다는 사실을 알려준다.디자인 공유하기의 어떤 콘텐츠든 하단에 공유 버튼이 있다. 공유 버튼을 누르면 페이스북, 링크드인, 트위터에 바로 공유하거나 현재 화면의 URL을 복사할 수 있는 모달(Modal)이 모션과 함께 나타난다. 모달은 현재의 맥락에서 잠시 벗어나 사용자에게 필요한 기능을 제공하거나, 알림을 주거나, 확인을 요청할 때 쓰이는 UI 요소다.
모달 뒤쪽 배경은 불투명한 유리에 흐려진 모습처럼 보이게 하는 글래스모피즘(Glassmorphism)을 활용해봤는데, 모달 뒤쪽 배경에 색이 들어갔을 때 더 큰 효과를 낼 것 같다. 이 모달에는 '페이스북에 공유', '링크드인에 공유', '트위터에 공유', 'URL 복사'라는 4가지 목록이 있다. 이 목록들은 0.07초의 차이를 두고 가장 위에 있는 '페이스북에 공유' 버튼부터 각 버튼 위치의 아래쪽으로 50px만큼 떨어진 위치에서 위쪽으로 이동하면서 나타난다. 동시에 각 목록의 투명도는 0(0%)에서 1(100%)로 바뀐다. 이처럼 각 요소가 시차를 두고 동작하는 모션을 스테거(Stagger)라 한다. 모달을 닫을 때에는 모달이 나타날 때와는 반대 방향으로 각 목록이 0.04초의 차이를 두고 아래쪽으로 순차적으로 사라진다.
모달 뒤쪽 배경은 글래스모피즘(Glassmorphism)을 활용해 흐려지게 했고, 모달에 있는 각 목록 버튼은 순차적으로 나타나도록 모션을 디자인했다.사용자가 동작시켜볼 수 있는 콘텐츠
브런치에 글을 쓰는 대신 디자인 공유하기를 만들어 콘텐츠를 배포하는 가장 큰 목적 중 하나는 사용자가 직접 동작시켜볼 수 있는 요소를 콘텐츠 속에 넣기 위해서다. 그래야 UI/UX 디자인 경험이 더 잘 전달될 수 있다고 믿는다. 디자인 공유하기의 첫 콘텐츠 '언어 전환 토글 버튼의 UI/UX 디자인은?'에서는 콘텐츠 속에서 '언어 전환 토글 버튼'을 직접 동작시켜볼 수 있다.
디자인 공유하기의 첫 콘텐츠 '언어 전환 토글 버튼의 UI/UX 디자인은?' 콘텐츠 속에는 사용자가 실제로 동작시켜볼 수 있는 UI 요소가 있다.연락처 디자인
디자인 공유하기에는 웹 포트폴리오에 기본적으로 들어가는 연락처 화면도 있다. 가로 길이가 768px 미만인 모바일 기기나 태블릿에서는 하단 탭 바(Tab Bar)의 오른쪽 편지지 모양 아이콘으로 디자인돼 있는 탭을 눌러 이동할 수 있고, 768px 이상인 태블릿 기기나 데스크톱에서는 상단 헤더 컴포넌트로 위치가 바뀐 편지지 모양 아이콘 탭을 눌러 이동할 수 있다.
연락처 화면의 가장 위쪽에는 프로필 사진과 이름, 직업을 넣었다. 그 아래에는 이 화면에서 가장 중요한 연락처, 이메일을 넣었다. 디자인 공유하기에서는 앱과 같은 모바일 사용성을 제공하고 콘텐츠 무단 복제를 막기 위해 글씨를 드래그할 수 없다. 따라서 사용자는 모바일이든 태블릿이든 데스크톱이든 이메일을 드래그해 복사할 수 없다. 대신 내게 연락을 원하는 사용자가 이메일 주소를 복사할 수 있도록 '주소 복사' 기능과 바로 이메일을 보낼 수 있는 '메일 보내기' 기능을 제공한다.
이메일 영역 아래에는 내 인생 목표 및 경력, 개인 프로젝트, 전시 이력, 강연 이력을 넣었다. 그 아래에는 내 브런치와 페이스북, 링크드인으로 이동할 수 있게 하는 버튼을 넣어 디자인을 마무리했다.
마치며
첫 글 '회원가입을 쉽게 만드는 UI/UX 디자인은?'을 시작으로 브런치에 글을 쓰기 시작한 지 벌써 2년이 넘었습니다. UI/UX 디자인을 하면서 얻은 깨달음, 그 과정에서 겪은 시행착오를 공유해왔지요.
제 모든 걸 쏟아부은 브런치 글의 발행 전 최종 확인을 할 때마다 정말 떨렸습니다. 단지 브런치 UI의 발행 버튼을 누르고 글의 태그를 선택하는 단순한 일이지만, 글 하나하나에 저를 쏟아부었기에 제게는 너무 긴장되는 일이었습니다. 제 기준을 맞추기 위해 저를 혹사해가면서 썼던 브런치 글의 최종 발행 버튼은 언제나 무거웠습니다.
디자인 공유하기(SHARE DESIGN) 프로젝트의 여정은 만만치 않을 것 같습니다. 디자인 공유하기에 공유한 제 경험을 그 경험이 필요한 누군가에게 전달하는 일은 대단히 어려운 일일 겁니다. 하지만 좋은 디자인과 좋은 콘텐츠의 힘을 믿기에 당연히 가능한 일이라고도 믿습니다.
디자인 공유하기의 첫 번째 콘텐츠는 브런치 콘텐츠처럼 글을 많이 썼지만, 새로운 경험 공유 콘텐츠는 글은 줄이고 디자이너답게 디자인으로 경험을 전달할 수 있도록 노력해볼 생각입니다. 디자인 공유하기 프로젝트를 진행하며 어떤 경험을 하게 될지 기대됩니다. 디자인 공유하기 프로젝트를 시작하지 않았다면 상상하지도 못했을 경험을 할 수 있지 않을까요?(끝)
2021년 4월 18일 자로 발행된 '모션 디자인은 UX에 어떤 영향을 미칠까?'라는 글을 끝으로 디자인 공유하기 프로젝트는 마무리됐으며, 현재는 디자인과 개발 경험을 기록하고 공유하는 경험의 기록 블로그를 운영하고 있습니다.
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
05 참고 자료
1. 검색 엔진 최적화(Search Engine Optimization) Wikipedia
2. 구글 서치 콘솔은(Google Search Console)은 구글에서 무료로 제공하는 서비스로, 웹 사이트의 구글 검색 결과 순위를 모니터링하고 관리할 수 있도록 도와줍니다.
3. Typescript - Typed JavaScript at Any Scale.
4. ReactJS - A JavaScript library for building user interfaces
5. NextJS - The React Framework for Production
6. NextJS - Internationalized Routing
7. Styled Components
8. NextJS에서 Styled Components의 스타일이 적용되기 전에 렌더링이 되는 문제를 해결하는 방법을 담은 글입니다.
9. 소프트웨어의 국제화 i18n
10. Framer Motion API - A production-ready motion library for React
11. The Net Ninja's Framer Motion(for React) Tutorial
12. 스포카 한 산스(Spoqa Han Sans)
13. 로보토(Roboto)
14. if kakao 개발자 컨퍼런스 2019
15. [참고 서적] 실전 리액트 프로그래밍(개정판)
