모바일 타겟의 간단한 정적 프로모션 페이지를 WYSWIG으로 작성할 수 있도록 도와줍니다.
https://simple-webpage-builder.web.app/
모바일 프로모션 페이지를 자주 개발하면서, 항상 비슷한 템플릿에 버튼 위치와 링크만 조금씩 바뀌는 형태를 반복적으로 만들게 되었습니다.
특히, 디바이스 뷰포트 너비에 비례해 버튼의 크기를 조정해야 하는 요구사항이 있다 보니, 기존에 알려진 툴로는 이를 충족시키기 어려워 매번 새롭게 개발해야 했습니다.
이 과정에서 시간이 너무 아깝다는 생각이 들었고, 이런 작업을 효율적으로 처리할 수 있는 전용 도구를 직접 만들어야겠다는 결론에 이르게 되었습니다.
조사를 거쳐 제가 원하는 WYSIWYG 정적 웹 생성기의 기반으로는 GrapeJS 가 가장 적합하다고 판단했습니다.
다만, GrapesJS가 기본적으로 제공하는 블록 기반 에디터 기능은 사용하지 않고, 디바이스 너비에 따라 크기가 조정되고 포지션을 변경할 수 있는 커스텀 이미지와 버튼 블록을 구현해 적용했습니다.
이 도구를 통해 반복 작업을 효율화하고, 보다 생산적으로 프로모션 페이지를 제작할 수 있었습니다.
- 프로모션 이미지
- 버튼 별 클릭 시 연결할 url
- 에디터를 실행하고, template 블록을 canvas에 끌어다 둔다.
- 이미지 노드와 버튼 노드가 생성되는데, 이미지 노드에 원하는 프로모션 이미지를 집어넣는다. (버튼까지 포함된 이미지)
- 버튼의 위치를 조정하고, 창의 너비변화에 따라 클릭가능 범위가 잘 유지되는지 확인한다.
- 버튼의 id와 Link 값을 채우고, Link ready를 체크한 다음, 버튼을 눌러 제대로 동작하는 지 확인한다.
- 버튼이 더 있는경우 버튼 블록을 canvas에 집어넣고 3~4를 반복한다.
- zip으로 export하여 배포한다.