초보도 쉽게 따라하는 최고의 웹사이트 제작 비법!

이 영상을 본 후에는 더 나은 수익성 있는 웹사이트를 구축할 수 있을 뿐만 아니라  이전보다 훨씬 빠르게 만들 수 있습니다.

 웹사이트를 구축하는 두 가지 방법이 있습니다.

  코드를 작성하여 구축하는 전통적인 방법과 웹플로우나 워드프레스와 같은 웹사이트 빌더를 사용하는 것입니다.

 이 영상은 두 그룹 모두에게 적용되는데,  개념은 같지만 더 많은 창의적 자유를 제공하고 더  나은 코드 작성에 초점을 맞춥니다.

 CSS라고 하면 웹사이트 빌더의 스타일링 옵션을 의미하고 코드 편집기라고 하면 워드프레스나 웹플로우를 의미합니다.

 코딩하는 법을 배우기 전에는 워드프레스를 사용하여 웹사이트를 구축했고 많은 실수를 했습니다.

 코딩하는 법을 배운 후에도 계속 그런 실수를 했습니다.

  유튜브에서 워드프레스 사용법이나 코드 작성 방법을 배웠지만  웹사이트 구축 방법은 아무도 가르쳐주지 않았기 때문입니다.

 이해가 되시나요? 공감이 가는 부분이 있다면 알려주세요.

   최종 웹사이트의 모양과 기능이 마음에 들지 않아 전체 코드를 다시 작성해야 하거나 어디서부터 시작해야 할지 모른 채 빈 페이지를 응시해야 하는 경우 웹 사이트가 4G 에서도 로드하는 데 10초가 걸리 거나 최악의 경우 고객이 수정을 요청하는 경우 수정을 했지만 아무것도  그들을 만족시키는 것 같지 않아서 여기 최소한의 노력과 시간으로 가능한 최고의 웹사이트를 만드는 솔루션이 있습니다.

  두 가지를 해야 합니다.

 첫 번째는 디자인입니다.

적절한 디자인에 대해 이야기하고 있습니다.

대상 고객이 누구인지, 이 웹사이트가 그들에게 어떤 문제를 해결해 줄 것인지 파악합니다.

 디자인에는 콘텐츠도 포함됩니다.

따라서 대상  고객이 누구인지, 그들이 웹사이트에서 무엇을 원하는지 파악하면 적절한 제목과 강력한 이미지가 자연스럽게 떠오를 것입니다.

 그것뿐만 아니라 처음부터 적절한 구조를 만들 수 있을 것입니다.

  카드를 사용할지 여부를 알 수 있을 것입니다.

사용한다면 몇 장의 카드를 사용할지, 카드의 크기는 얼마나 되어야 하는지 알 수 있을 것입니다.

 이제 사용자가 원하는 것이 무엇인지 생각하기 때문에 그들을 돕기가 더 쉬워집니다.

 하지만 디자인은 첫 번째 단계일 뿐입니다.

 두 번째 단계는 실제로 그 디자인을 구현하는 것입니다.

 노코드 도구를 사용하든 수동으로 코드를 작성하든 상관없습니다.

  첫 번째 단계에서 모든 것을 생각하고 계획하기만 하면 되므로 그 디자인을 구현하는 것은 식은 죽 먹기가 될 것입니다.

  노코드 도구의 한계나 자신의 코딩 기술 세트에 주의하십시오.

디자인은 구현하기 어려운 것이기 때문에 대부분의 경우 사용자는 노력을 알아차리지 못하기 때문입니다.

 웹사이트에 넣을 수 있는 몇 가지 간단한 팁과 요령을 살펴보겠습니다.

 뛰어난 사용자 경험을 제공하지만 구현하기는 매우 쉽습니다.

 가장 먼저 해야 할 일은 반복 가능한 디자인을 만드는 것입니다.

 반복적인 디자인은 일관성을 유지하고 만족스럽게 보이도록 합니다.

 몇 가지 예를 들어보겠습니다.

 또 다른 팁은 페이지를  섹션으로 나누어 한 번에 한 가지에 집중할 수 있도록 하는 것입니다.

  첫 번째 섹션은 영웅 섹션이 될 것입니다.

 일부 사용자는 평균적인 사용자가 웹사이트에 머무를지 떠날지 결정하는 데 몇 초를 보내기 때문에 웹사이트에서 가장 중요한 부분이라고 할 수 있습니다.

   멋지고 강력한 제목을 맨 앞에 배치하면  관심을 끌 수 있습니다.

 제목을 생각해내는 것은 쉽습니다.

 주요 제목은 이 질문에 답해야 합니다.

  사용자가 현재 겪고 있는 문제는 무엇입니까? 사용자는 귀하에게 관심이 없다는 것을 기억하십시오.

 사용자는 귀하가  제공하는 솔루션에 관심이 있습니다.

 관심을 끌면  작은 단락(이상적으로는 2~3개 문장)으로 제목을 확장하고 이미지, 비디오 또는 제품 데모를 추가해야 합니다.

 강력한 제목 과 적절한 미디어를 사용한 단락을 결합하면 사용자가 제품이나 서비스를 매우 쉽게 이해할 수 있으며  제공하는 내용을 이해하면 자세히 알아보기와 같은 행동 촉구가 필요합니다.

 가입 또는 지금 구매 버튼 버튼 목표가 무엇이든  지금 바로 넣으세요.

 히어로 섹션에는 두 가지 디자인이 있습니다.

 두 개의 열과 한 개의 열 디자인 두 개의 열은 모든 화면 크기에 구현하기 쉽기 때문에 더 인기가 있지만  한 개의 열로도 충분합니다.

 디자인이 컴퓨터와 랩톱뿐만 아니라 모든 화면에서 작동하는지 확인하세요.

  강력하고 매력적인 히어로 섹션을 만든 후 다음 섹션에서는  제품이나 서비스에 대한 자세한 정보를 제공해야 합니다.

 다시 한번 불필요한 내용은 없고 요점만 직접적으로       설명하세요.

 투명성이 높을수록 다른 사람의 관심을 끌기가 더 쉽습니다.

 이제 신뢰를 얻어야 합니다.

 제품이라면 기능과 이점을 설명하고 가격을 설명하여 경쟁사보다 귀사를 선택하기 쉽게 만드세요.

 계속해서 스스로에게 이 질문을 하세요.

 이 섹션의 목적은 무엇인가요?  무언가를 설명하는 것이라면 가능한 한 간단한 단어로 설명하세요.

 과시하는 것이라면 자신감 있게 설명하세요.

 어떤 단어를 사용하든 많은 사용자가 알고 있어야 하는 질문에 답해야 합니다.

 사용자 와 대화 하고 경쟁사를 살펴보세요.

 대부분의 경우 좋은 제목은 경쟁사가 제공하지 않는 제안입니다.

  이 제목 무제한 다운로드 무제한 재미와 경쟁은 그런 기능이 없습니다.

 업계 에서 매우 흔한 질문에 답해 볼 수도 있습니다.

 여기 실제로 답변인 제목의 예가 있습니다.

 광고 없음 개인 정보 위험 없음 소셜 미디어 웹사이트가 가입 페이지에서 이렇게 말하는 것을 상상해 보세요.

 이런 제목을 선명한 일러스트나 굵은 이미지와 섞으면  황금빛입니다.

 거기에는 무료 웹사이트가 많이 있습니다.

 찾을 수 있을 거라고 확신 하지만 중요한 것은 코드 한 줄도 쓰지 않았는데도 대부분의 경우와 마찬가지로 프로세스에서 훨씬 앞서 있다는 것입니다.

 웹사이트 구축도 고전적인 8020 규칙을 따릅니다.

 웹사이트를 구축하기 전에 생각하고 계획하면 많은 고통을 피할 수 있습니다.

 저는 이것을 어렵게 배웠습니다.

 이제 색상과 글꼴에 대해 이야기하겠습니다.

 흑백을 포함하여 최소 4가지 색상이 필요합니다.

 흑백의 변형을 사용할 수 있지만 너무  과하지 마세요.

 다음 두 가지는 강조 색상입니다.

 약간의 특성과 스타일을 추가하는 데 사용됩니다.

 버튼 테두리와 그라데이션을 디자인하는 데 사용하세요.

 마지막 부분은 글꼴이며  경험이 있다면 웹사이트당 하나의 글꼴만 사용하는 것이 가장 좋습니다.

   웹사이트당 두 개 또는 최대 세 개의 글꼴을 사용할 수 있지만 글꼴과 색상에 대해서는 걱정하지 마세요.

  코드 도구 없이 웹사이트를 구축하기 위해 CSS 변수를 사용할 것입니다.

 이를 전역 색상 및 글꼴로 설정할 수 있습니다.

 변수의 멋진 점은 나중에 변경할 수 있으며 결과가 전체 웹사이트에 적용된다는 것입니다.

 다크 모드 토글을 사용할 계획이라면   변수가 있으면 훨씬 쉬울 것입니다.

변수가 있으면  반복되는 디자인에 동일한 클래스를 지정해야 합니다.

같은 CSS를 반복해서 작성하고 싶지 않기 때문입니다.

   같은 클래스와 변수를 사용하여 CSS를 덜 작성한다는 말은  우리가 원하는 단계에서 웹사이트를 매우 쉽게 구축하고 수정할 수 있다는 말입니다.

이전에  WordPress나 vs code로 바로 뛰어들어 디자인이나 콘텐츠를 염두에 두지 않고 처음부터 웹사이트를 구축했습니다.

 최종 결과는 다시 빌드 해야 하는 보기 흉하고 쓸모없는 웹사이트였습니다.

 아니면 최악의 경우 고객이 만족할 때까지 색상과 디자인을 계속 조정해야 했습니다.

 이제는 모든 최종 콘텐츠와 반복 가능한 디자인을 먼저 디자인하고  디자인과 콘텐츠에 만족하면 저에게 가장 적합한 코드 편집기인 VSS 코드를 엽니다.

 최고의 몇 가지 간단한 팁을 약속했습니다.

 뛰어난 사용자 경험을 제공하기 위한 요령을 알려드리  자면, 끝까지 읽어주신 분들을 위해 동적 제목 크기, 유연한 카드, SPG 아이콘, 스냅 스크롤, 확대/ 축소, 축소, 이렇게 하면 강력한 웹사이트를 구축하는 가장 쉽고 빠른 방법이 됩니다.

  좋아요와 구독 버튼 바로 아래에 있는 댓글 섹션에 팁이나 제안을 추가해 주세요.