한국어
우리 회사의 마케팅 사이트 설계 및 구현: 콘텐츠에서 구현까지의 나의 여정
최근에 우리 회사의 웹사이트를 새로 고쳤습니다. 이 블로그 글에서는 웹사이트 개선을 위해 사용한 도구와 방법을 자세히 설명합니다.
Guamian
Product & Design
Product & Design
최근에 우리 회사의 웹사이트를 새로 고쳤습니다. 이 블로그 글에서는 웹사이트 개선을 위해 사용한 도구와 방법을 자세히 설명합니다.
Logto 사용자라면, 최근에 우리 회사의 웹사이트가 새로워진 것을 알아차렸을 것입니다. 만약 그렇지 않다면, 웹사이트 logto.io를 확인해 보세요. 우리가 이 일을 성사시키기 위해 얼마나 많은 자원을 투입했는지 맞춰보세요.
여러분은, '이 사람들이 단순히 훌륭한 실행력을 보여주기 위해 많은 작업과 노력을 기울이고 신중하게 디자인했음을 자랑하려는 건가요?'라고 생각할 수 있습니다.
아니요!
반대로, 우리는 도구와 방법을 얼마나 똑똑하게 활용하여 우리 제품의 품질을 향상시키고 사용자에게 최고의 제품과 서비스를 제공하는지 보여주고 싶습니다.
우리는 커뮤니티로부터 긍정적인 피드백을 받았고, 어떻게 그렇게 했는지 궁금해하고 있습니다. 이번 업데이트는 서로에게 전하는 새로운 워크플로우를 완전히 다시 창조한 것입니다. 우리는 이러한 최선의 실천을 소개하고, 팀워크 및 협업 문화를 가까이서 들여다보고자 합니다.
우리는 고객 신원 관련 개발 서비스 및 인프라 작업을 제공하는 데에 주력하는 기술 팀입니다. 제공의 압박은 큽니다. 한편으로는 브랜디드 마케팅 웹사이트 구축, 블로그 작성, 프로젝트 홍보, 사용자와의 소통과 같은 다양한 스토리텔링 및 운영 업무를 지원해야 합니다.
매력적인 랜딩 웹사이트는 종종 청중이 제품에 대해 가지는 첫인상을 형성하는 데 중요한 역할을 하며, 제품이 해결하려는 문제, 가격 책정, 그리고 신뢰를 얻기 위한 유명 고객을 이해하는 데 도움을 줍니다.
또한, 여러 가지 비즈니스 목표를 달성하는 데 중추적인 역할을 합니다:
이전 직장에서 웹사이트 프로젝트에 참여한 적이 있었습니다. 일반적인 워크플로우가 어떻게 구성되는지 살펴봅시다:
이 과정은 지루하고, 많은 사람들과 이해관계자가 참여하는 데다, 빠르게 움직이는 환경에는 적합하지 않습니다.
처음에는 제품 디자이너와 엔지니어 두 사람이 유지관리하는 것만으로도 웹 성능 관리, 이미지 업로드, 반응형 디자인 보장, 이미지 형식 처리, 콘텐츠 업데이트 등의 작업이 여전히 많은 상호 소통을 요구합니다.
이 워크플로우는 비효율적입니다. 나는 항상 엔지니어링 자원을 풀어서 기본 제품 작업에 집중할 수 있도록 나머지 작업을 처리하는 방법을 고민합니다.
생산성을 향상시키기 위해 도구를 사용하는 것은 우리 팀의 기본 철학입니다. 그래서 나는 이러한 프로세스를 간소화할 수 있는 도구를 연구하기 시작했습니다.
성공적인 SaaS 마케팅 웹사이트를 개발하기 위해 필요한 필수 요소를 분석해 보겠습니다:
조사를 한 결과, 다음과 같은 디자인 도구 키트를 사용하기로 결정했습니다:
ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper 또는 이와 유사한 AI 애플리케이션을 조종사로 사용합니다.
이는 마케팅 콘텐츠와 메시지를 세부 조정하고 최적화하기 위함입니다. 목표와 의도를 명확히 하는 것이 중요합니다. AI는 단지 조종사일 뿐, 결정권자가 아님을 기억해야 합니다. 내가 어떤 마케팅 메시지를 쓰기 전에, 몇 가지 질문을 스스로에게 물어봅니다:
그런 다음, 내가 전달하려는 요점을 작성한 초기 초안을 작성합니다.
때로는 AI가 논리적으로 맞다고 느껴지지만 딱딱하거나 원래 의도를 왜곡하는 단어들을 도입할 수 있습니다. 그러나 여러분은 자신의 의도를 재강조하고 목표에 충실해야 합니다. 청중에게 전달되는 단어들이 명확하고, 직설적이며, 간결하고, 투명하게 전달되는지 표준을 설정해야 합니다. 이것은 특히 많은 비즈니스와 개발자들을 대상으로 하는 우리 제품 영역에 있어서 매우 중요합니다.
Figma, Framer는 상호작용, 시각 디자인, 애니메이션 및 프로토타이핑을 담당합니다.
나는 디자인 배경을 가지고 있지만, 주로 제품 디자인(즉, UI 및 UX 제작)에 중점을 두고 있습니다. 세련된 UI를 디자인하는 것은 나에게는 도전거리가 아니지만, 내 작업은 전문 디자이너만큼 세련되지 않습니다. 그러나 기본적인 시각적 디자인 및 일러스트레이션 기술과 적절한 도구를 선택하면 작업의 품질을 높일 수 있습니다. 나는 이 창작 과정에서 Framer와 Figma를 사용합니다.
이것은 Figma로 완전히 구축된 우리 옛 디자인입니다.
우리의 원래 디자인은 Figma에서 만들어졌습니다. 나는 공식 Framer 플러그인, 'Framer to HTML'을 사용하여 기본 디자인을 복사하여 Framer에 붙여넣음으로써 시작 지점을 마련했습니다.
다음 단계는 디자인입니다. 이전에 Figma를 사용한 경험이 있다면, Framer로의 전환이 매끄러울 것이며, 전체 사용자 경험이 매우 유사합니다. 나는 생산성을 크게 향상시키는 몇 가지 흥미로운 상호작용을 강조하고자 합니다.
Figma 사용자들은 자동 레이아웃을 애용하는데, 이는 요소를 배치하고 정리하는 데 많은 시간을 절약해줍니다. 그러나 Framer에서의 레이아웃 기능은 더욱 스마트하여, 프론트엔드 마인드셋에 더욱 가깝습니다. Framer에서는 그리드 또는 스택 레이아웃을 사용할지 선택할 수 있고, 열을 정의하며, 최대 너비를 설정하면 필요할 경우 자동으로 다른 행으로 래핑됩니다. 이 기능은 실시간 웹 환경에서 요소가 어떻게 동작할지를 반영하여 디자인 과정을 향상시킵니다。
브레이크포인트와 너비 설정(예: 채우기, 고정, 상대적, 콘텐츠에 맞추기)을 현명하게 설정하고 다른 캔버스를 정의함으로써 다양한 반응형 디자인을 쉽고 정확하게 달성할 수 있습니다. 이 접근법은 다양한 화면 크기와 기기에 맞게 레이아웃을 효율적으로 조정할 수 있도록 합니다.
Framer는 우리가 웹사이트에서 광범위하게 사용하는 ticker 애니메이션을 포함한 다양한 프리빌트 애니메이션을 제공합니다. 구성 요소를 설정하고 이 위젯에 포함시킬 수 있습니다. 속도, 방향, 패딩 등 다양한 설정을 정의할 수 있어 사이트에서 애니메이션이 어떻게 작동할지에 대해 유연성을 제공합니다.
Framer의 또 다른 유용한 기능은 스크롤 애니메이션을 맞춤 설정할 수 있다는 것입니다. 예를 들어, 스크롤 중에 아이템이 보일 때 어떻게 나타나는지 지정할 수 있습니다. 스크롤 애니메이션 설정을 통해 아이템이 어떻게 표시될지에 대한 타이밍과 스타일을 제어할 수 있어 사용자 경험과 콘텐츠와의 상호작용을 향상시킵니다.
나의 주요 요구 사항 중 하나는 다음과 같습니다:
이전 워크플로우에서는 콘텐츠를 업데이트해야 할 때마다 엔지니어에게 부탁하거나 직접 풀 리퀘스트를 제출해야 했습니다. 우리 엔지니어링 팀은 코드 품질을 보장하기 위해 엄격한 절차를 따르며, 이로 인해 시간이 많이 소요되고 신속한 변경 사항 적용이 제한됩니다.
Framer가 이 문제를 해결해 주었습니다. 이제 내가 변경을 한 후, Publish 버튼을 클릭하면, 변경 사항이 즉시 실시간으로 반영됩니다. 이 기능 덕분에 과정을 상당히 간소화할 수 있었고, 콘텐츠 관리에 있어 더 큰 자율성을 얻을 수 있었습니다.
Framer에서 호스팅되므로, 우리의 구현이나 기술 작업이 필요하지 않습니다. 우리 엔지니어들은 약 10 분 정도 소요되어 이를 나머지 웹사이트와 통합했습니다.
현재 웹사이트에는 20-30 페이지 정도가 있으며, 일부는 Framer를 사용하여 개발되었고, 다른 일부는 전통적인 소프트웨어 개발 방법을 통해 생성되었습니다. 우리는 페이지를 유지 관리하는 데 가장 적합한 도구를 선택하는 과정에 있습니다. 예를 들어, Framer로 관리하기 어려운 개발자 문서는, 개발자 친화적인 문서화 프레임워크를 사용하여 콘텐츠를 호스팅하는 것이 최적의 선택입니다. 향후 우리는 필요에 따라 계속 자체 호스팅을 유지할지, 완전히 Framer로 전환할지 결정할 예정입니다.
우리는 완전히 워크플로우를 전환하여 마케팅 사이트 생산을 완전무결하게 만들었습니다. 그것은 신뢰할 수 있고, 관리 가능하며, 매우 효율적입니다.
이 블로그를 작성한 이유는 베스트 프랙티스를 공유하기 위함입니다. Framer로 멋진 웹사이트를 디자인한 경험이 있다면, 여러분의 이야기를 듣고 싶습니다. 함께 대화하며 서로 배워봅시다.
이제 우리의 제품을 확인해볼 시간입니다! logto.io를 방문해보세요.