Download on app store

PROJECT OVERVIEW

CLIENT
바른영상제작소
DATE
2023-02-01
TYPE
WEB
STACK
Nuxt.js
Typescript
Tailwind CSS
Node.js
아마존 웹 서비스
Nest.js

LINK

GALLERY

종이에서 디지털로

안녕하세요. 디프랙 대표 임운택입니다.

종이를 사용하던 일부 산업들은 온라인 디지털 세상으로 이동했습니다. 그리고 디지털 매체들은 지난 수 천년을 영위해온 종이 산업보다 규모가 거대해졌으며, 오늘날 전세계 사람들은 익숙하게 온라인에 게시된 글과 그림을 보며 살고 있습니다.

자연스러운 흐름일까요? 이번 프로젝트로 "모바일 청첩장 제작 서비스" 개발을 진행하게 되었습니다. 종이로 제작하던 청첩장을 컴퓨터로 제작하고, 카카오톡이나 문자메시지 등으로 공유해서, 과거에 결혼 전 지인들에게 하나씩 손수 전달해 주던 번거로움을 없앨 수 있죠. 또한 디지털 매체만의 기능과 효과들까지 포함하여 나만의 특별한 청첩장을 만들 수 있습니다.

청첩장 제작을 위한 다양한 기능

사용자가 모바일 청첩장을 제작하려면 다양한 기능이 필요합니다. 청첩장 제작의 과정을 조금 보여드리겠습니다.

청첩장의 영역은 최소 1개부터 10개 이상까지 설정 할 수 있습니다. 영역은 지도, 약도, 사진첩, 방명록 등이 있습니다. 그리고 영역은 모두 다른 기능을 가지고 있습니다.

하나의 영역에는 사용자가 편집할 수 있는 항목들이 여러개 있습니다. 예를 들면 신랑, 신부 이름이나 결혼식 날짜 같은것이 있죠. 편집 항목의 갯수는 청첩장에 따라 100개가 넘을 수도 있는데요.

편집 가능한 항목들은 서로에게 영향을 줄 수도 있습니다. 예를 들면 신랑, 신부 이름을 변경하면 계좌번호 항목의 이름도 변경 됩니다. 또한 각 항목은 유저의 선택 횟수를 집계하여 저장하여야 하죠. 또한 각 영역은 순서를 변경할 수도 있습니다. 맨 아래에 있던 방명록 기능을 청첩장 최 상단으로 이동 시키는 것도 가능합니다.

이렇게 이야기만 들어도 복잡함이 느껴지지 않으신가요? 설명하지 않은 다른 기능과 과정이 더 있는데요, 내용이 너무 길어지니 기능 설명은 여기서 줄이도록 하겠습니다..!

정확함이 중요합니다

사용자가 편집하는 그대로 디지털 인쇄물로 만들어야 하기 때문에 약간의 오차도 발생 해서는 안됩니다. 그리고 청첩장 제작 과정에서 사용자가 편집한 내용은 모두 누락 없이 반영이 되어 있어야 합니다. 사용자들이 청첩장을 열심히 만들었는데 그 결과물이 조금이라도 다르게 나오면 실망하겠죠.

기획과 디자인에 정확히 맞추어서 개발하여 사용자들이 편집할 수 있게 개발하는 단계가 첫번째 난관인데요, 저희는 Vuejs의 기능을 십분 활용하여 개발하였습니다.

두번째로, 이미지로 출력하기 위해서 Puppeteer 라이브러리를 사용했습니다. 브라우저를 리눅스 환경에서 구동할 수 있게 하고, 스크린샷을 찍는 기능을 탑재하고 있다고 생각하시면 편합니다.

이렇게 정확한 결과물을 만들어 낼 수 있었습니다. 저희는 이미지 편집이나, 동영상 편집에 기술을 가지고 있습니다. 디지털 출력물이 필요하거나, 편집 기능이 필요하시다면 문의하기를 통해 문의를 남겨주세요.

마무리하며

종이로 만들 수 있는 것은 다양합니다. 종이는 책이나, 명함, 박스, 종이컵 등을 만드는데 필수적이고, 요즘에는 플라스틱 빨대 대신에 사용 되기도 합니다. 옛날에는 종이 신문을 자주 접할 수 있었지만 요즘은 보기 어려운 것처럼, 수십년간 온라인 매체의 발달과 전자기기 보급으로 종이 사용이 줄어들고 있다고 하는데요.

저도 스마트폰이나 태블릿PC로 저작물을 자주 접하고 있습니다. 정보를 유튜브나 인터넷 서핑을 통해 얻기도 하고, 책을 앱으로 구매해서 보기도 합니다. 디지털 매체들이 종이 매체를 성공적으로 대체하고 있다고 보이는데요. 앞으로 미래에는 어떤 새로운게 나올지 기대됩니다.