랜딩 페이지 구축에 유용한 도구

프로그래밍에 대해 배울 때 두 가지 별개의 단계를 접할 수 있습니다.

기본 사항에 대해 학습: 컴퓨터 프로그램의 구조를 탐구하기 시작하고, 논리 단위 측면에서 간단한 문제를 생각하는 방법을 배우고, 이러한 단위를 코드 지침으로 형식화하기 시작합니다. 이 단계에서는 추상적인 주제와 간단한 실습에 대해 배웁니다. 제대로 수행되고 적절한 시간이 주어지면 누구나 선택한 언어를 사용하여 간단한 논리 프로그램을 이해하고 작성하는 데 확실히 익숙해질 수 있습니다.
대부분의 사람들이 좀 더 어렵게 생각하는 두 번째 단계는 개발 생태계 학습으로 구성됩니다. 간단한 프로그래밍 지식을 습득한 후 자연스러운 다음 단계는 프로그래밍 하위 도메인(웹 개발, 모바일 애플리케이션 개발, 임베디드 시스템 등)을 선택하는 것입니다. ) 특정 플랫폼을 사용하여 문제를 해결하는 방법을 배우기 시작합니다. 여기서 어려운 점은 더 이상 일련의 기본 사항을 다루고 각 개념을 실천하고 반복하는 문제가 아니라는 것입니다. 모든 도구, 모든 기술을 포괄하고 모든 원칙을 따르는 것은 종종 불가능합니다. 이를 해결하는 올바른 방법은 건전한 양의 실험과 연구를 수행하는 것입니다. 간단한 작업을 시작하려면 몇 가지 기술만 습득하고 다양한 도구를 사용하면 됩니다. 이 수준에 익숙해지면 새로운 도구 세트로 확장하고 꾸준히 발전할 수 있습니다. 이 방법론에 따라 간단한 랜딩 페이지를 구축하는 데 사용되는 기술과 도구에 대한 탐구를 통해 웹 개발 영역에서 탄탄한 기반을 구축하려고 노력할 것입니다.

이 블로그 게시물에서는 랜딩 페이지 개발에 중점을 두고 프런트엔드 웹 개발 환경을 간략하게 살펴보겠습니다. 우리는 귀하가 접할 수 있는 개발의 다양한 부분에 대해 확인하도록 권장하는 다양한 리소스를 살펴볼 것입니다. 이 기사가 끝나면 랜딩 페이지 구축 방법에 대한 훨씬 더 명확한 그림을 갖게 될 것입니다. 실제 사례를 보려면 이 동반 동영상을 확인하세요.

랜딩 페이지 개발 환경

랜딩 페이지는 마케팅 및 광고 캠페인 목적으로 사용되는 독립형 웹 페이지를 나타내기 위해 디지털 마케팅 전문가가 처음으로 사용하는 용어입니다. 개념은 다소 간단합니다. 회사가 제공하는 제품이나 서비스에 관심이 있는 방문자가 해당 제품의 링크를 클릭한 다음 제품에 대한 텍스트, 이미지 등이 결합된 풍부한 설명이 있는 웹 페이지에 "접속"합니다. 서비스. 페이지에는 방문자를 유료 고객으로 전환하기 위한 "CTA"(Call To Action)라는 구매 버튼이 포함되어 있습니다. 예상할 수 있듯이 좋은 사용자 경험을 만드는 것은 좋은 전환율을 얻는 데 가장 중요합니다.

이 기사 전체에서 우리는 역할을 수행하는 랜딩 페이지를 구축할 수 있는 다양한 방법과 도구에 대해 배울 것입니다. SEO(검색 엔진 최적화)와 관련된 랜딩 페이지를 구축할 때 다른 고려 사항이 있다는 점을 언급하는 것이 중요합니다. SEO에 대해서는 향후 워크샵에서 다룰 예정입니다.

디자인 영감

랜딩 페이지 구축 경험이 있거나 이제 막 시작하더라도 웹사이트가 어떤 모습으로 나타나기를 원하는지 정확히 찾아내는 것이 종종 어렵다는 것을 알게 될 것입니다. 클라이언트와 작업할 때 웹 페이지에 어떤 디자인을 원하는지 정확히 알지 못하는 경우도 종종 있습니다. 일반적으로 이러한 작업을 전문으로 하는 웹 디자이너가 디자인 목업과 프로토타입을 개발자에게 전달합니다. 신뢰할 수 있는 웹 디자인 소스를 갖는 것이 도움이 될 수 있습니다. 이러한 소스를 사용하면 디자인 트렌드에 대한 최신 정보를 얻고 창의력을 발휘하며 시작할 수 있습니다. 다음 프로젝트를 위한 디자인 영감을 얻는 데 사용할 수 있는 최고의 리소스 두 가지는 Dribbble과 Behance입니다.

드리블

Dribbble은 아마도 웹 디자인 분야에서 가장 인기 있는 리소스일 것입니다. 자신의 작품을 공유하여 실력을 향상시키고, 서로 도우며, 건설적인 피드백을 받는 디자이너 커뮤니티입니다. 여기에는 전 세계 창의적인 사람들이 만든 거의 모든 주제나 분야의 다양한 디자인과 커뮤니티 피드백이 포함되어 있어 영감을 얻기에 이상적인 장소입니다.

비핸스

Behance는 영감을 찾는 데 도움이 되는 또 다른 인기 디자인 커뮤니티입니다. 이 웹사이트는 키워드, 필드 및 색상 팔레트를 사용하여 관심 있는 특정 작업에 쉽게 액세스할 수 있는 고급 검색 기능을 제공합니다. Behance는 Adobe의 일부이며 Adobe Creative Cloud와 깔끔하게 통합된다는 점을 기억하는 것도 중요합니다.

Dribbble과 Behance는 모두 웹 디자인 영감을 위한 훌륭한 플랫폼이며 둘 중 하나도 잘못될 수 없습니다. 디자인을 탐색하고 자신만의 디자인을 생각해 보는 것을 권장합니다!

디자인 프로토타이핑

재능 있는 디자이너의 작업에서 영감을 얻었으니 이제 랜딩 페이지 디자인의 프로토타입을 시작할 차례입니다. 프로토타이핑은 랜딩 페이지 구축의 중요한 단계입니다. 아이디어를 눈에 보이는 구조로 구현하여 팀이나 고객과 함께 이를 구체화하고 검증할 수 있는 실험 프로세스로 정의할 수 있습니다. 프로토타이핑 단계가 끝나면 랜딩 페이지에 생생하게 적용할 수 있는 디자인이 완성됩니다.

디자인 프로토타입을 제작하는 데 사용할 수 있는 소프트웨어 솔루션이 많이 있습니다. 실제로 도구가 너무 많아서 하나의 도구를 평가, 비교 및 선택하는 것이 금세 어려워질 수 있습니다. ux/ui 디자이너가 일반적으로 사용하는 Figma를 사용하겠습니다. 프로토타입 제작에 Figma를 사용하는 방법을 배우고 싶다면 바로 여기 YouTube에서 집중 강좌를 확인하실 수 있습니다.

피그마

Figma는 UX 디자이너와 개발자가 브라우저 기반, 클라우드 호스팅 플랫폼에서 디자인 프로토타입을 쉽게 구축하고 협업할 수 있게 해주는 올인원 디자인 도구입니다. . Figma는 단순성과 사용 편의성에 중점을 둡니다.

Figma의 인터페이스를 사용하면 페이지 전체의 텍스트, 그리드 및 기타 구성 요소의 모양을 제어하여 요소를 만들고 스타일을 지정할 수 있습니다. 사용자 흐름을 보여주는 Autoflow, 애니메이션을 위한 Figmotion 등과 같은 다양한 보완 플러그인을 제공합니다.

아이콘 및 글꼴

타이포그래피와 스타일 아이콘은 웹페이지의 모양을 향상시키는 데 사용할 수 있는 가장 간단한 기능 중 일부입니다. 전달하려는 일반적인 아이디어에 맞게 랜딩 페이지에 올바른 글꼴과 아이콘을 사용하고 싶습니다. 다행히 Font Awesome 또는 Google Fonts를 사용하면 다양한 글꼴과 아이콘을 쉽게 찾아 적용할 수 있습니다.

글꼴이 훌륭해요

Font Awesome은 CSS 및 Less를 기반으로 하는 글꼴 및 아이콘 도구 키트입니다. . 2020년 현재 Font Awesome은 타사 글꼴 스크립트를 사용하는 사이트의 38%에서 사용되어 Google Fonts(Wikipedia)에 이어 2위를 차지했습니다.

Font Awesome은 처음에 만들어진 Bootstrap과 같은 많은 프런트엔드 라이브러리에서 지원됩니다. Font Awesome을 사용하면 CDN 링크를 포함하는 것만큼 쉽게 웹페이지에 글꼴과 아이콘을 통합할 수 있습니다. 이러한 사용 편의성과 다양한 글꼴 및 아이콘 덕분에 해당 분야에서 가장 인기 있는 솔루션이 되었습니다.

Google 글꼴

Google Fonts는 웹사이트에 글꼴을 삽입하기 위해 Google에서 제공하는 무료 오픈 소스 웹 서비스입니다. 원활한 통합과 높은 수준의 유연성 및 사용자 정의를 제공합니다.

랜딩 페이지 배포

이제 랜딩 페이지를 구축했으므로 전체와 공유할 시간입니다! 마지막 단계는 호스팅 제공업체 솔루션을 사용하여 랜딩 페이지를 배포하는 것입니다. Github Pages와 Vercel이 최고의 선택입니다. 가장 인기 있고 사용하기 쉽습니다. Vercel은 워크숍에서 소개된 도구이지만 Github 페이지도 비슷한 방식으로 작동합니다.

Github 페이지

현재 코딩을 배우고 있다면 Github에 대해 들어보셨을 것입니다. Github은 오픈 소스 커뮤니티의 일부로 코드를 공유하고 호스팅하기 위한 플랫폼입니다. 개인과 조직이 사용할 수 있는 공개 웹페이지 호스팅 서비스인 GitHub 페이지라는 기능을 제공합니다. 모든 페이지는 GitHub의 github.io 도메인이나 사용자 정의 도메인 이름(소유한 경우)에서 무료로 호스팅됩니다. GitHub 페이지는 이미 버전 제어를 위해 Github를 사용하고 있는 경우 무료로 프로젝트를 호스팅할 수 있는 간단하고 효율적인 방법입니다.

베르셀

Vercel은 다양한 기능과 구성을 제공하는 Github 페이지 대안입니다. 무료 버전이 함께 제공됩니다. 훌륭한 개발자 경험을 제공하고 훌륭한 지원을 제공하므로 복잡한 프로젝트를 수행하는 모든 사람에게 Vercel을 권장합니다. Code Labs Academy는 이를 개발 프로세스의 일부로 사용합니다.

결론

이 기사에서는 랜딩 페이지를 개발하는 데 유용한 도구를 소개했습니다. 다시! 가장 좋은 학습 방법은 직접 해보는 것입니다. 따라서 개인 프로젝트에서 이러한 도구를 사용해 보시기를 적극 권장합니다! 개발자 작업의 큰 부분은 직면한 문제에 대한 기존 솔루션을 조사하고 바퀴를 재발명하지 않는 것입니다. 프로그래밍 커뮤니티의 가장 큰 장점은 협업적 성격입니다. 다른 사람들이 공유한 작업을 활용하고 자신의 작업에 기여해 보시기 바랍니다!

멋진 웹사이트를 디자인하고 구축하는 방법에 대해 자세히 알아보려면 UX/UI 디자인 및 웹 개발을 확인해 보세요. ) 부트캠프!