brunch

You can make anything
by writing

- C.S.Lewis -

by Sarah Sehee Jun 01. 2020

디자이너의 청첩 사이트 제작기

작년 5월 11일 결혼식을 올리고 벌써 1년이 지났다.


신랑 기태와 결혼 준비를 하면서 최대한 우리 다운 결혼식을 준비하고 싶었다. 특히 청첩장의 경우, 수많은 모바일 청첩장 업체의 시안 중 마음에 드는 디자인과 구성을 찾지 못하게 되어 사이트 포맷으로 직접 디자인하고 구현하게 됐다. 이 것 외에도 결혼식 준비를 위해 할 일이 정말 많았지만 그럼에도 내가 특히 신경을 많이 썼던 준비물이었다.


새벽 작업을 하다가 "내가 할 것도 많은데 왜 이 짓을 했지.."라고 여러 번 후회했다. 하지만 남편과 가족, 친구들의 성원과 도움으로 가장 즐거웠던 준비물이었다. 1년이 지난 지금도 생생히 기억에 남는 추억이라 사라지기 전에 제작 과정을 남겨본다 :)



디자인


기태와 세희다운 디자인을 찾아서


처음 디자인을 시작할 때는 "심플하게.. 여백의 미를 살려서.. 무지 스타일로 만들어야지"라는 강박에 사로잡혔다. 비핸스, 핀터레스트, 다른 그래픽 디자이너들의 작품 등으로 오랜만에 그래픽 디자인 공부를 하면서 평소 내가 하던 디자인과 다른 시안을 시도했다. 어느 정도 완성도 있는 청첩장이 나왔지만 도저히 나와 기태의 결혼식을 위한 청첩장 같지 않았다.

디자인 히스토리를 배울 때부터 바우하우스 무브먼트와 디터 람스보다 멤피스 그룹과 에토레 소트사스의 작업물에 훨씬 큰 애정을 느꼈다. 한옥의 군더더기 없는 단정한 아름다움이 좋지만, 알록달록 면 칠해진 민화가 걸려있거나 진홍색 철쭉이 마당에 피어있는 게 더욱더 아름답다고 느낀다. 그런 사람이 색을 쫙 빼고 디자인하려고 하니 이도 저도 아닌 결과물이 나올 수밖에..

신랑의 응원을 받아 일반적인 청첩장 스타일이 아니더라도 취향을 반영한 방향을 선택하기로 했다. 많은 영감을 줬던 민화나 전통 혼례 용품을 참고하거나 경복궁을 돌아다니며 팔레트와 모티프를 위해 레퍼런스를 모았다. 더 다양한 색상으로 실험하고 그래픽 모티프를 사용하니까 괴로움이 줄어들고 과정 자체를 즐기게 됐다.



(순서대로) 괴석모란도(부분) at 국립고궁박물관,청홍 양단 예단보 by 호호당, 경복궁 자경전 서쪽 담


공간체와 Vulf Mono


색상과 심볼 작업이 마무리되어 갈 때 쯤 한글과 영문 폰트를 선택하는 작업을 시작했다.


기태와 세희, 결혼합니다 등 여러 키워드를 다양한 궁서체로 써보았는데 뭔가 올드한 느낌이 나고, 고딕체를 사용하면 전체적으로 2% 부족한 느낌이었다. 여러 한글 폰트를 번갈아가며 써보다가, 좋아하는 대학로 편집샵 포스터에서 보았던 공간체가 생각났다. 자와 컴파스로 공들여 쓴 것 같으면서도 전체적으로 둥글둥글 여유있어보이는 폰트라 구매했었다. 충분히 실험해 볼 시간이 없어서 구매 후 사용한 적이 없는데 다행히도 나와 기태의 이름이 균형감있게 표현되었고 다른 디자인 요소와도 잘 어울렸다.


영문 폰트는 이미 Vulf Mono로 답이 정해져있었다. 개인 프로젝트 디자인에 영문이 들어가게 되면 항상 모노스페이스 폰트부터 먼저 올려볼 만큼 좋아한다. 많은 모노스페이스 폰트들 중 특히 Vulf Mono는 재작년 Font Review Journal에서 발견 후 지금까지 나의 최애 폰트다. 특히 글리프 중  & ,  * 는 Vulf Mono의 개성을 충분히 드러내어 사용하게 될때마다 즐겁다. 이 두 글리프만을 봐도 소장 가치가 충분한 타입페이스라고 생각한다. Vulf Mono의 Light Italic체가 채도가 높고 바탕이 꽉 찬 그래픽 모티프와 대비되어 전체적으로 안정적으로 느껴졌다.


자로 잰 듯한 공간체와 가벼우면서도 리드믹한 Vulf Mono가 잘 어울리는 것은 예상 외였다.  특별한 날, 특별한 디자인을 위해 구매하고 아껴놨던 두 개의 폰트를 적극적으로 사용할 수 있게 되어 행복했다.



웹 개발


Online Coding Class: SuperHi

Framework: Tachyons

Library: Anime.js 


디자인에서 생각보다 오랜 시간을 쏟았지만 다행히 웹 구조는 상대적으로 쉽게 구현할 수 있었다. 특히 기존에 사용하던 Bootstrap보다 더 가벼운 Tachyons을 이용해서 더 효율적이었던 것 같다. Women Who Design, Interface Lovers 모두 Tachyons을 사용해서 구현되었다. CSS Flex 속성을 사용할 줄 알고, 반응형 웹을 만들고 싶지만 사람에게 추천하고 싶다.


약간의 욕심을 부려 방명록 남기기, 메세지 남기기와 같은 기능 만들기도 고려했지만  API와 데이터 처리가 필요하다는 의견을 듣고 아주 빠르게 포기했다. 대신 아이폰, 안드로이드, 데탑 등 반응형 구현에 집중했다.


레이아웃을 잡고 컨텐츠를 추가한 후 모바일과 웹브라우저에서 확인해보니, 단색을 사용한 그래픽 요소들과 면 분할 레이아웃이 단조로워 보여 아쉬웠다. 웹 애니메이션 구현이 무서웠지만 가끔씩 코드펜에서 시도해 본 CSS Animation를 실습해볼 수 있는 좋은 기회라고 생각했다. 그래도 자신이 없어서 프론트엔드 개발자 친구들에게 부탁할까, 라는 유혹이 들었다. 하지만 처음부터 끝까지 혼자 만들어보자는 첫 의도가 변질되는 것 같아서 온라인 수강 코스를 열심히 찾다가 SuperHi를 찾게 됐다. Advanced CSS+Javascript 코스를 수강하면서 아래와 같은 도움을 받아 디자인에 생기를 불어넣어줄 수 있었다.


디자인 트렌드를 반영한 실습 예제

Web Font 변환

최신 Javascript 문법

CSS Animation 사용과 라이브러리 Anime.js 활용

24시간 운영되는 Slack 커뮤니티

(주의) 웹 브라우저에서 gif 애니메이션이 정상적으로 작동하지 않습니다


Domain: GoDaddy (kitai-sarah.wedding 도메인 1년 사용 구매)

Hosting: Netlify 


이 단계에서는 나의 삽질이 길어지면 안되는 시기라 프론트 엔드 개발자 친구에게 조언을 구했다. 어차피 동접량이 많지 않은 가벼운 정적 사이트기 때문에 netlify의 무료 호스팅을 추천 받았다. 호스팅 후 드디어 반응형과 속도 테스트를 하는데 한국, 미국에 있는 테스터들 모두 너무 느리게 열린다는 문제를 이야기해줬다. 결국 친구가 넘겨받아 마지막에 이미지 최적화 작업과 비효율적으로 작성된 코드들을 손봐주면서 속도가 많이 개선해주어서 안정화에 힘쓸 수 있었다. 가장 중요했던 테스트 항목은 아래와 같았다.   

어른들이 많이 사용하시는 Galaxy 문자, 카카오톡에서 잘 열리는지 테스트

친구들이 주로 사용하는 카톡, iMessage, FB/Insta Chat 테스트

(나의 프론트엔드 개발자 친구들은 분명히 테스트할 것이기 때문에) 반응형 사이즈 테스트



아쉬우니까 미니 청첩장 제작   


인쇄: 레드 프린팅


웹사이트를 열심히 만들고 났더니 두고두고 보관할 실물 청첩장이 없다는 점이 계속 아쉬웠다. 스몰웨딩이라 오는 친구들 숫자가 적었고 모두들 웹사이트로 충분하다고 했지만, 같이 식사할 때 기억에 남을 무언가를 건네주고 싶은 마음이 커졌다. 다행히 디자이너인 나보다 더 감성적인 신랑 기태가 정말 마음에 쏙 드는 아이디어를 알려줬다.


작은 명함 크기의 종이에 “OO야 기태와 세희의 결혼식에 와줘” 라고 적고 같이 폴라로이드를 찍어서 건네주면 어떨까?


청첩장 사이에 폴라로이드를 끼울 수 있도록 2단 세로형 명함 사이즈로 100장 주문하고 무인양품에서 딱 어울리는 봉투가 있어서 효율적으로 3일만에 준비할 수 있었다.


좋은 소식을 전하기위해 친구들과 만나서 밥먹는 것 자체로도 즐거운 일이었는데, 폴라로이드 사진까지 찍어가며 그 순간을 남기니, 많지 않은 모임이었지만 하나하나 기억에 남는다. 폴라로이드 필름이 떨어지거나, 신랑과 중복된 시간에 내 친구 쪽 청첩장 모임이 있거나, 열심히 술마시다가 사진 찍는 걸 까먹는 경우가 있어서 몇몇 사람들과 사진 찍지 못할 때도 있어서 아쉬운 점도 있었다.







마치며


직접 만들기로 결정하고 제작 후 전달까지 3개월 정도 걸렸다. 하루에 평균 2시간 정도밖에 작업할 수 밖에 없었고 코딩에선 중간 중간 배워야하는 부분이 많아 예상보다 힘들었지만 후회하지 않는다. 받는 사람들마다 "정말 기태랑 너 결혼식에 어울리는 청첩사이트다." 라는 말을 해줘서 더 뿌듯했다.


혼자 사용하는 용도로 멈추지 않고, 우리의 결혼식에 관련된 다른 분들이 디자인을 사용해주셔서 기뻤다. 결혼식 디렉팅업체 담당자님이 원래 사용하시던 디자인을 대신하여 결혼식장 앞 문패로 사용해주셔서 결혼식 날까지 의미있게 사용되었다. 그리고 노션에 근무 중인 친구가 결혼 선물로 하객들을 위한 무료 라이센스 등록 페이지를 전달해줄때 청첩 사이트에 있었던 패턴을 바탕에 넣어줘서 감동을 받기도 했다.






주변에서 도와주는 친구들이 없었다면 아마 막판에 포기했을 수도 있었다. 디자인하다가 막힐 때 옆에서 크릿을 해주며 응원해준 디자이너 친구들, 코딩하다가 계속 버그를 만들어서 좌절할 때 나에게 언제든 물어보라며 가르쳐준 엔지니어 선생님들 모두 감사하다.


사용자를 위한 프로덕트 디자인에 대한 고민을 매일매일 하다가, 사랑하는 사람과 나를 위한 디자인을 하면서 즐거웠다. 다시 한번 내가 좋아하는 것들이 무엇인지 돌아보고, 공부하고 결과물을 낼 수 있다는 것에 감사했다. 돌이켜보면 내가 스스로에게 주는 결혼 선물이었다 :)


웹사이트 구현 부분에 최대한 단계별로 자세하게 사용한 프레임워크, 라이브러리, 호스팅 정보 등을 적었는데 본인의 청첩 사이트 또는 개인 사이트를 만들고자 하는 다른 디자이너에게 도움이 되었으면 좋겠다.

Sarah Sehee 소속 직업디자이너
구독자 176
작가의 이전글 피그마에서 커맨드+B를 누르면 무슨 일이 생길까?

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
브런치 시작하기

카카오계정으로 간편하게 가입하고
좋은 글과 작가를 만나보세요

카카오계정으로 시작하기
페이스북·트위터로 가입했다면