메일침프(mailchimp)로 5시간만에 랜딩페이지 구현하기

개인적인 노코드툴 3종 사용 후기

 

 

나는 지금까지 총 3개의 노코드툴을 활용한 웹페이지 제작 경험이 있다.

 

1. WIX: 10년 전 썼는데, 당시 WYSIWYG 중에선 가장 유명했음. 모 의약품 수입회사 웹사이트를 이걸로 만들어 드렸는데 그때는 반응형 디자인이란 개념도 모를 때라 PC 버전만 구현했던 기억이 난다... 입문하기에 좋은 서비스지만 매우 느려서 그 이후론 사용 안함.

 

2. Webflow: 현재 가장 잘나가는 노코드툴. 근데 사실 no-code가 아니라 low-code에 가깝다. 마크업/반응형 디자인에 대한 지식이 필요하고 프로그램을 제법 다뤄봐야 원하는대로 구현이 가능하다. 나도 포트폴리오는 이걸로 만들었다.

 

3. Mailchimp: 본래 이메일 마케팅 서비스인데 부가기능 중 랜딩페이지 제작이 가능하다. 입사한 회사에서 이메일/캠페인 제작 용도로 쓰고 있길래 나도 써보게 됨. 마크업 할 줄 알면 활용도가 제법 올라가는데, 아쉽게도 인터렉션 구현은 거의 불가능.

 

이번에는 회사 업무로 제작한 페이지이기 때문에 Mailchimp를 썼다.

 

---

 

5시간만에 랜딩페이지 구현하기

 

 

1. 시안을 디자인한다. (2시간)

기획안을 바탕으로 반응형 랜딩페이지 시안을 디자인한다.

작업 후 resonsive plugin으로 brackpoint 이동이 자연스러운지 확인함. (bp는 1단만 나눔)

피그마에서 반응형 구현하기

 

 

2. 메일침프에서 랜딩페이지를 생성한다.

 

탬플릿 중 아무거나 선택해도 되지만 구조가 비슷한 탬플릿이 있다면 그걸 하는게 좀 더 작업이 쉬워진다.

(물론 빈 탬플릿을 써도 된다)

 

 

3. 시안 바탕으로 내용을 하나씩 고친다. (2시간 30분)

 

 

4. PC/Mobile의 text 위계 질서를 설정한다. (20분)

 

메일침프에선 기본적으로 PC/Mobile의 h1-4 및 섹션별 본문 font Size/Weight/line-height을 모두 따로 설정할 수 있다.

html 영역에 style을 넣어 더 상세하게 나눌 수 있는데, 텍스트가 그렇게 많이 나뉠 필요는 없어 기본 세팅값만 조정함.

나는 아래처럼 설정했다. (H3이 동일한 이유는 카드 w가 거의 고정이라 두개 화면 모두 이쁘게 보이는 값이 같았음)

 

 

5. 링크/alt text 등을 삽입한다. (10분)

버튼/링크 텍스트에는 원하는 링크를 삽입한다.

whatsapp 버튼에는 담당자 whatsapp 채팅 url 따서 집어넣고 메일은 [mailto:주소]로 연결하면 된다.

사용자 접근성 향상을 위해 이미지마다 alt text는 반드시 추가한다.

 

 

6. 랜딩페이지의 url 등을 설정하고 퍼블리시한다. 끝!

 

완성된 랜딩페이지 확인하기

3B-GENOME

 

 

---

 

 

작업 후 아쉬운 점

• viewport 설정이 불가하다. (효율적인 작업을 위해 많이 쓰는 viewport를 기준 삼음. web 960, mobile 390)
• html만 적용 가능하고 css/javascript 적용이 불가하다. 심지어 html lang값 설정 불가 (접근성 점수 깎이는 소리가 들린다)
• 메일침프는 webp 포맷을 등록할 수 없다(!) 넣고싶으면 별도 호스팅에 올린 webp url을 따다 써야 한다. 매우 귀찮다.
• 기본 제공 폰트 이외에도 google font는 style 처리하면 제공하는데(inter는 적용해봄) 별도 웹폰트는 적용 안되는 것 같다. pretendard import 시도해보다 어려워서 그냥 helvetica 처리.

 

그래도 장점을 꼽자면

• 개발자 없이도 짧은 시간 안에 반응형 랜딩페이지 제작 가능.
• 인터렉션이 없는 건 아쉽지만 gif라는 꼼수를 쓰면 비슷하게마나 구현이 가능하기도 하고, js가 없기 때문에 사이트가 매우 가벼움. pagespeed 성능평가하면 생각보다 더 좋게 나온다.
• 본래 마케팅 서비스인만큼 트래킹/리드 수집 툴 연결이 간편. 자체 성능도 좋고, GA4 등도 쉽게 연동 가능함.