우리 회사의 마케팅 사이트 설계 및 구현: 콘텐츠에서 구현까지의 나의 여정

Logto 사용자라면, 최근에 우리 회사의 웹사이트가 새로워진 것을 알아차렸을 것입니다. 만약 그렇지 않다면, 웹사이트 logto.io를 확인해 보세요. 우리가 이 일을 성사시키기 위해 얼마나 많은 자원을 투입했는지 맞춰보세요.

여러분은, '이 사람들이 단순히 훌륭한 실행력을 보여주기 위해 많은 작업과 노력을 기울이고 신중하게 디자인했음을 자랑하려는 건가요?'라고 생각할 수 있습니다.

아니요!

반대로, 우리는 도구와 방법을 얼마나 똑똑하게 활용하여 우리 제품의 품질을 향상시키고 사용자에게 최고의 제품과 서비스를 제공하는지 보여주고 싶습니다.

우리는 커뮤니티로부터 긍정적인 피드백을 받았고, 어떻게 그렇게 했는지 궁금해하고 있습니다. 이번 업데이트는 서로에게 전하는 새로운 워크플로우를 완전히 다시 창조한 것입니다. 우리는 이러한 최선의 실천을 소개하고, 팀워크 및 협업 문화를 가까이서 들여다보고자 합니다.

배경#

우리는 고객 신원 관련 개발 서비스 및 인프라 작업을 제공하는 데에 주력하는 기술 팀입니다. 제공의 압박은 큽니다. 한편으로는 브랜디드 마케팅 웹사이트 구축, 블로그 작성, 프로젝트 홍보, 사용자와의 소통과 같은 다양한 스토리텔링 및 운영 업무를 지원해야 합니다.

매력적인 랜딩 웹사이트는 종종 청중이 제품에 대해 가지는 첫인상을 형성하는 데 중요한 역할을 하며, 제품이 해결하려는 문제, 가격 책정, 그리고 신뢰를 얻기 위한 유명 고객을 이해하는 데 도움을 줍니다.

또한, 여러 가지 비즈니스 목표를 달성하는 데 중추적인 역할을 합니다:

• 제품의 브랜드와 가치 제안을 보여줍니다.
• 리드를 생성합니다.
• 콘텐츠 허브로 작용하여, 특히 제품 리드 성장 또는 개발자 리드 성장에 중점을 둔 회사에 중요합니다.
• SEO 개선, 사용자 확보, 지속적인 트래픽 추적 장소를 제공합니다.

이전 직장에서 웹사이트 프로젝트에 참여한 적이 있었습니다. 일반적인 워크플로우가 어떻게 구성되는지 살펴봅시다:

1. 우선, 제품 마케팅 관리자 및 제품 관리자가 콘텐츠와 요구 사항을 정의합니다.
2. 제품 디자이너와 UX 라이터가 콘텐츠를 개선합니다.
3. 진행 중인 작업, 보통 저화질 버전을 시각 및 브랜딩 디자이너에게 전달하여 생산 전에 마무리 작업을 진행합니다.
4. 그런 다음 엔지니어와 제품 관리자가 구현을 시작하며, 애니메이션과 반응형 웹 디자인에 초점을 맞춥니다.

이 과정은 지루하고, 많은 사람들과 이해관계자가 참여하는 데다, 빠르게 움직이는 환경에는 적합하지 않습니다.

처음에는 제품 디자이너와 엔지니어 두 사람이 유지관리하는 것만으로도 웹 성능 관리, 이미지 업로드, 반응형 디자인 보장, 이미지 형식 처리, 콘텐츠 업데이트 등의 작업이 여전히 많은 상호 소통을 요구합니다.

이 워크플로우는 비효율적입니다. 나는 항상 엔지니어링 자원을 풀어서 기본 제품 작업에 집중할 수 있도록 나머지 작업을 처리하는 방법을 고민합니다.

생산성을 향상시키기 위해 도구를 사용하는 것은 우리 팀의 기본 철학입니다. 그래서 나는 이러한 프로세스를 간소화할 수 있는 도구를 연구하기 시작했습니다.

요구 사항 분석#

성공적인 SaaS 마케팅 웹사이트를 개발하기 위해 필요한 필수 요소를 분석해 보겠습니다:

1. 콘텐츠: 마케팅 사이트의 기초는 정확히 무엇을 보여줄지 아는 것입니다. 이는 대상 고객, 그들의 일반적인 사용 사례, 그리고 제품의 가치 제안에 대한 깊은 이해를 요구합니다. 어떤 도구도 이러한 이해를 대체할 수는 없습니다.다행히, 나는 제품 디자인 및 시장 진출 전략에 참여했기 때문에 사용자의 요구를 충족하는 콘텐츠를 만들 수 있습니다.
2. 디자인: 사이트는 세련되고 다듬어진 시각적 매력을 가져야 합니다. 내가 UX/제품 디자인 분야에 있었던 배경은 있지만, 전문적인 창의적인 디자이너만큼 풍부하지 않더라도, 이 작업을 수행할 수 있는 역량을 갖추고 있습니다.
3. 엔지니어링: 주요 기술적 고려 사항은 사이트를 호스팅하고, 반응형 디자인을 보장하며, 매끄러운 마이크로 인터랙션을 가능하게 하는 것입니다. 사이트를 다른 구성 요소들과 매끄럽게 통합하는 것도 필수적이며, 여기에 링크 리디렉션과 제품의 인증 페이지가 포함됩니다.

조사를 한 결과, 다음과 같은 디자인 도구 키트를 사용하기로 결정했습니다:

제품 및 마케팅 콘텐츠#

ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper 또는 이와 유사한 AI 애플리케이션을 조종사로 사용합니다.

이는 마케팅 콘텐츠와 메시지를 세부 조정하고 최적화하기 위함입니다. 목표와 의도를 명확히 하는 것이 중요합니다. AI는 단지 조종사일 뿐, 결정권자가 아님을 기억해야 합니다. 내가 어떤 마케팅 메시지를 쓰기 전에, 몇 가지 질문을 스스로에게 물어봅니다:

1. 누가 이 메시지를 읽을 것인가?
2. 그들은 추가적인 맥락이 필요한가?
3. 메시지에서 중심이 되는 포인트는 무엇인가?
4. 다음 단계로 사용자가 무엇을 하기를 기대하는가?
5. 이 메시지는 교육용인가, 아니면 특정 행동을 유도하기 위함인가?
6. 이 메시지가 오해의 소지가 있거나 과장될 가능성이 있는가?

그런 다음, 내가 전달하려는 요점을 작성한 초기 초안을 작성합니다.

때로는 AI가 논리적으로 맞다고 느껴지지만 딱딱하거나 원래 의도를 왜곡하는 단어들을 도입할 수 있습니다. 그러나 여러분은 자신의 의도를 재강조하고 목표에 충실해야 합니다. 청중에게 전달되는 단어들이 명확하고, 직설적이며, 간결하고, 투명하게 전달되는지 표준을 설정해야 합니다. 이것은 특히 많은 비즈니스와 개발자들을 대상으로 하는 우리 제품 영역에 있어서 매우 중요합니다.

디자인#

Figma, Framer는 상호작용, 시각 디자인, 애니메이션 및 프로토타이핑을 담당합니다.

나는 디자인 배경을 가지고 있지만, 주로 제품 디자인(즉, UI 및 UX 제작)에 중점을 두고 있습니다. 세련된 UI를 디자인하는 것은 나에게는 도전거리가 아니지만, 내 작업은 전문 디자이너만큼 세련되지 않습니다. 그러나 기본적인 시각적 디자인 및 일러스트레이션 기술과 적절한 도구를 선택하면 작업의 품질을 높일 수 있습니다. 나는 이 창작 과정에서 Framer와 Figma를 사용합니다.

이것은 Figma로 완전히 구축된 우리 옛 디자인입니다.

우리의 원래 디자인은 Figma에서 만들어졌습니다. 나는 공식 Framer 플러그인, 'Framer to HTML'을 사용하여 기본 디자인을 복사하여 Framer에 붙여넣음으로써 시작 지점을 마련했습니다.

다음 단계는 디자인입니다. 이전에 Figma를 사용한 경험이 있다면, Framer로의 전환이 매끄러울 것이며, 전체 사용자 경험이 매우 유사합니다. 나는 생산성을 크게 향상시키는 몇 가지 흥미로운 상호작용을 강조하고자 합니다.

레이아웃#

Figma 사용자들은 자동 레이아웃을 애용하는데, 이는 요소를 배치하고 정리하는 데 많은 시간을 절약해줍니다. 그러나 Framer에서의 레이아웃 기능은 더욱 스마트하여, 프론트엔드 마인드셋에 더욱 가깝습니다. Framer에서는 그리드 또는 스택 레이아웃을 사용할지 선택할 수 있고, 열을 정의하며, 최대 너비를 설정하면 필요할 경우 자동으로 다른 행으로 래핑됩니다. 이 기능은 실시간 웹 환경에서 요소가 어떻게 동작할지를 반영하여 디자인 과정을 향상시킵니다。

반응형 디자인을 위한 브레이크포인트#

브레이크포인트와 너비 설정(예: 채우기, 고정, 상대적, 콘텐츠에 맞추기)을 현명하게 설정하고 다른 캔버스를 정의함으로써 다양한 반응형 디자인을 쉽고 정확하게 달성할 수 있습니다. 이 접근법은 다양한 화면 크기와 기기에 맞게 레이아웃을 효율적으로 조정할 수 있도록 합니다.

애니메이션#

Framer는 우리가 웹사이트에서 광범위하게 사용하는 ticker 애니메이션을 포함한 다양한 프리빌트 애니메이션을 제공합니다. 구성 요소를 설정하고 이 위젯에 포함시킬 수 있습니다. 속도, 방향, 패딩 등 다양한 설정을 정의할 수 있어 사이트에서 애니메이션이 어떻게 작동할지에 대해 유연성을 제공합니다.

Framer의 또 다른 유용한 기능은 스크롤 애니메이션을 맞춤 설정할 수 있다는 것입니다. 예를 들어, 스크롤 중에 아이템이 보일 때 어떻게 나타나는지 지정할 수 있습니다. 스크롤 애니메이션 설정을 통해 아이템이 어떻게 표시될지에 대한 타이밍과 스타일을 제어할 수 있어 사용자 경험과 콘텐츠와의 상호작용을 향상시킵니다.

빠른 게시#

나의 주요 요구 사항 중 하나는 다음과 같습니다:

1. SEO 최적화 및 마케팅 캠페인을 위해 다수의 랜딩 페이지를 신속하게 디자인합니다. 속도는 필수입니다.
2. 이로 인해 콘텐츠의 빈번한 업데이트가 가능합니다. 제품 랜딩 페이지는 최신 발전 사항과 현재 제품 포지셔닝을 반영합니다. 오래된 콘텐츠는 시장 기회를 놓치고 고객의 요구를 충족시키지 못하게 됩니다.

이전 워크플로우에서는 콘텐츠를 업데이트해야 할 때마다 엔지니어에게 부탁하거나 직접 풀 리퀘스트를 제출해야 했습니다. 우리 엔지니어링 팀은 코드 품질을 보장하기 위해 엄격한 절차를 따르며, 이로 인해 시간이 많이 소요되고 신속한 변경 사항 적용이 제한됩니다.

Framer가 이 문제를 해결해 주었습니다. 이제 내가 변경을 한 후, Publish 버튼을 클릭하면, 변경 사항이 즉시 실시간으로 반영됩니다. 이 기능 덕분에 과정을 상당히 간소화할 수 있었고, 콘텐츠 관리에 있어 더 큰 자율성을 얻을 수 있었습니다.

엔지니어링#

Framer에서 호스팅되므로, 우리의 구현이나 기술 작업이 필요하지 않습니다. 우리 엔지니어들은 약 10 분 정도 소요되어 이를 나머지 웹사이트와 통합했습니다.

현재 웹사이트에는 20-30 페이지 정도가 있으며, 일부는 Framer를 사용하여 개발되었고, 다른 일부는 전통적인 소프트웨어 개발 방법을 통해 생성되었습니다. 우리는 페이지를 유지 관리하는 데 가장 적합한 도구를 선택하는 과정에 있습니다. 예를 들어, Framer로 관리하기 어려운 개발자 문서는, 개발자 친화적인 문서화 프레임워크를 사용하여 콘텐츠를 호스팅하는 것이 최적의 선택입니다. 향후 우리는 필요에 따라 계속 자체 호스팅을 유지할지, 완전히 Framer로 전환할지 결정할 예정입니다.

워크플로우의 변화#

우리는 완전히 워크플로우를 전환하여 마케팅 사이트 생산을 완전무결하게 만들었습니다. 그것은 신뢰할 수 있고, 관리 가능하며, 매우 효율적입니다.

이 블로그를 작성한 이유는 베스트 프랙티스를 공유하기 위함입니다. Framer로 멋진 웹사이트를 디자인한 경험이 있다면, 여러분의 이야기를 듣고 싶습니다. 함께 대화하며 서로 배워봅시다.

이제 우리의 제품을 확인해볼 시간입니다! logto.io를 방문해보세요.