by
Dec 02. 2024
프레이머로 모바일 청첩장 만들기
서비스 디자이너가 만든 하나밖에 없는 청첩장
결혼식이 얼마 남지 않은 3개월 정도 시점에(25년 2월 초 결혼) 청첩장을 만들게 되는데
하나뿐인 결혼식이자 초대받는 지인분들에게 특별한 모바일 청첩장 보여주고 싶어 직접 만들게 되었다.
(글 최하단에 제작한 프로토타입 링크가 있습니다.)
사실 예전 버전부터 사용했었지만, (엄청 오래된 예전작업1 예전작업2)
버전이 업데이트될수록 더욱 디자이너가 사용하기 편리하게 변화해 왔으며, 최근 버전은 도메인까지 등록할 수 있기에 해당 툴로 제작을 진행하게 되었다.
우선 모바일 청첩장을 제작하면서 어떤 구성을 할 것인지 리서치 후 구조를 작성했다.
구성 기능 요약제외된 기능을 설명하자면
배경음 - 갑자기 나온다면 놀랠 수도 있고 무음으로 하면 굳이 필요한가 싶어서
화환주기 - 광고처럼 느껴져서 받는 사람이 불편할 것 같아서
방명록 - "작성할까?" 하는 생각과 부담을 줄 수 있고 우리 시점에서 방명록이 적게 있으면 아쉬울 것 같아서
이러한 이유로 제외했다.
내가 클.라.이.언.트.그래도 직접 제작하면서 우리를 표현하고 다른 청첩장에 차별점을 주기 위해 우리만의 브랜딩과 기억되는 인터랙션 그리고 편의성 제공(계좌 어플 연결)을 추가했다.
데이지 꽃
우리만의 준비된 모바일 청첩장을 보여드리기 위해 상징적인 이미지가 필요했다.
그래서 생각했던 것이 예비 신부와 연애를 하면서 데이지 꽃을 많이 선물해 주었고 현재 같이 살고 있는 신혼집에도 인테리어 포인트로 꾸며놓아서 데이지 꽃으로 브랜딩 역할로 제작하게 되었다.
그래서 제작된 데이지 꽃을 화면 상단에 고정하여 스크롤 시 따라오게 했고, (위 사진 1번)
인사말 / 일자 / 위치.. 각 섹션마다 데이지 꽃이 고정되어 단락을 구분하는 요소로 구성하였다. (위 사진 2번)
인터랙션
화면에서 움직임은 사람들에게 이목을 끌게 하는 방법 중 하나이기에
결혼의 감성적인 부분이나 강조하고 싶은 정보에 인터랙션을 넣게 되었다.
진입 시 히어로 영역에 타이틀을 제작한 로티 레이어를 통해 글씨가 써지면서 청첩장에 감성 더했고
(위 사진 1번)
일자와 신랑 신부와 혼주의 성함과 같이 결혼식 정보에 꼭 필요한 부분을을 작은 인터랙션을 통해 표현했다.
(위 사진 2번)
편의성
모바일 청첩장 사용 시 지도를 보거나 부득이한 사정으로 참석을 못해 계좌로 입금하게 되었을 때
불편함이 없도록 기능을 추가하여 제작하게 되었다.
지도
어플연결 / 전화연결은 프레이머 내 기능을 통해 간단하게 연결할 수 있었으나,
(위 사진 2,3번)
지도는 네이버 클라우드를 통해 커스텀으로 직접 제작을 하려 API키를 발급하고 코드를 작성하게 되었다.
(위 사진 1번)
위 사진 1-2-3번의 과정을 통해 지정된 지도를 불러오려 했지만, Framer 사이트 링크가 문제인 건지 호출이 되지 않았다.(혹시 코드가 잘못된 것인지 데스크톱에서 테스트를 했을 땐 정상적으로 노출)
그래서 기본으로 제공하는 링크를 통해 지도를 불러오려 했지만,
다른 모바일 청첩장과 다른 점이 없다고 느껴서 결국 4번과 같이 직접 만들게 되었다.(ㅠㅠ)
계좌 복사 후 어플연결
계좌 복사와 어플연결까지는 별도의 코드입력이 필요했다.
위 이미지 1번의 화면에서 [복사하기] 버튼 터치 시 계좌를 클립보드로 복사하게 한 후
위 이미지 2번의 화면에서 프레이머 기능인 overlay로 팝업을 노출시켜 준 후 지정해 준 어플을 통해
위 이미지 3번의 화면처럼 설치되어 있는 어플이 모바일 화면에서 열리게 된다.
해당 부분을 통해 각 앱의 스킴연결에 대해 알게 되었는데 해당 코드를 잘 활용한다면 어플의 특정 부분까지 랜딩 할 수 있게 지정할 수 있다.
(어플을 토스/카카오페이/농협어플들만 한 이유는 너무 많은 어플을 노출시키기엔 복잡해 보이고 페이 기능에 특화된 어플과 어르신 분들이 많이 이용하는 농협어플로 구성하게 되었다.)
도메인 작업
새로워진 프레이머는 도메인 세팅 및 등록할 수 있는 기능이 있는데,
위 이미지와 같이 사이트 타이틀과 설명글 파비콘 OG 이미지를 설정할 수 있다.
URl 또한 [직접작성].framer.[지정]이나 직접 구매한 도메인 URL을 넣을 수 있는데 그 부분부터 유료이다.
본인은 모바일 청첩장을 구매하는 대신에 사용하는 것이라 mini 가격(월 1만 3천 원) 정도로 구매했다.
*문제발생
(사용자 테스트 겸)
제작된 청첩장을 양가 부모님에게 먼저 보여드렸는데...
화면 스크롤에 대한 불편함을 말씀해 주셨다!
해당 부분의 문제점이 무엇이었나면..
화면 기능 중 특정 영역을 화면 높이 100%으로 고정할 수 있게 하는 코드가 있는데,
화면을 보시는 분들에게 집중되게 보여드리고 싶어 섹션마다 해당 코드값을 입력해 주고, Sticky로 고정하고 일정부분 스크롤 시 다음 섹션으로 넘어가게 했었다.
그리고 고정된 화면을 대응하기위해 스크롤 기능을 코드를 통해 프로그래스바를 상단에 노출시켜주었는데..
가설
1.다수는 청첩장을 볼 때 빠르게 쭉 보는 편이고, 중요한 부분만 신중하게 천천히 보는 것 같았다.
(해당 부분은 추후 프레이머 데이터로 볼 예정..)
2. 사람마다 스크롤 내리는 습관이 다르기에 누군가는 빠르게 보이고 누군가는 느리게 보일 수 있다는 점이다.
3. 화면 가운데에 집중하기에 상단의 프로그래스 바는 신경 쓰지 않는 이상 안보인다.
그래서 PC 버전은 해당 기능을 유지했지만 모바일은 수정하게 되었다.
(유저 테스트의 중요성을 다시 느낍니다...)
장인, 장모님께서 만족하셨다! 감사합니다.마무리하며
출력 청첩장에 넣은 모바일 QR코드시중에 있는 모바일 청첩장을 구매하면 비교적 저렴하고 빠르게 만들 수 있었지만,
초대받는 분들에게 우리만의 모습들과 정성을 느끼게 하고 싶어서 직접 만들게 되었다.
그러면서 본인 또한 개발 환경도 조금 더 배우게 되었고,
어쩌다보니 실무처럼 [기획구성 - 제작 - 사용자테스트 - 수정 - 배포]까지 경험하게 되었다.
프레이머라는 툴이 간단한 웹개발의 경우 직접 할 수 있을 정도로 많은 발전이 있던 것 같아서 제작에 많은 도움이 되었다.
현재 브런치 글 작성하는 시점에서 결혼식이 며칠 안 남았는데 오시는 분들과 가족분들 그리고
우리들까지 모두 즐기고 기쁠 수 있는 순간을 만들어 끝났으면 하는 바람이다!
