제가 12년 동안 쌓아온 웹 디자인 지식, 좀 더 빨리 알았으면 좋았을 것 같은 경험들을 알려드릴게요. 자, 시작해 봅시다. 좋은 웹 디자인은 크게 세 가지로 요약할 수 있어요.00:00

레이아웃, 타이포그래피, 그리고 색감. 이 세 가지가 어떻게 함께 작동하는지 이해하면 왜 어떤 웹사이트는 저렴하게 느껴지고 다른 웹사이트는 고급스러워 보이는지 알 수 있게 됩니다.00:11

자, 오늘 이 예시 하나를 가지고 웹 디자인의 세 가지 단계를 분석해 볼 거예요.00:22

50달러짜리 웹사이트를 1만 5천 달러짜리 프로젝트로 만들어가는 과정을 보여드리겠습니다. 우선 레벨 원, 50달러짜리 웹사이트부터 시작해볼게요.00:28

이게 아주 흔한 경우죠, 그냥 랜덤 템플릿을 집어서 로고만 바꿔 붙이는 겁니다. 바로 눈에 띄는 건, 마치 세 개의 웹사이트를 하나로 합친 것 같은 느낌이에요.00:39

여기 아이콘 스타일은 저기 삽화 스타일이고, 폰트 크기도 다르고, 섹션 레이아웃도 제각각이고, 색깔도 오렌지에서 블루로 변하는지… 각각은 문제가 없어 보이는데, 함께 보면 통일된 브랜드 느낌이 안 들어요. 이걸 크게 바꾸지 않고 더 고급스러워 보이게 하려면, 하나의 시각적 요소를 선택해야 할 것 같아요.00:48

언어와 일관성을 유지하고, 같은 아이콘 스타일, 같은 종류, 같은 크기, 같은 간격, 같은 코너 라디우스, 같은 오렌지색 시스템을 사용하면, 간단한 템플릿조차도 모든 요소가 같은 언어를 구사하는 것처럼 디자인되었다고 느껴지기 시작합니다. 이제 레이아웃에 대해 이야기해 보자면, 여기가 저가형 웹사이트의 허점이 드러나는 부분입니다. 확대해서 보면요.01:08

간격이 완전히 랜덤해요. 여기서는 13픽셀, 저기서는 27픽셀, 섹션 사이는 19픽셀... 그냥 느낌대로 숫자를 고른 거죠, 의도가 있는 게 아니에요. 아주 간단하게 해결할 수 있는 방법이 있는데, 바로 8포인트 그리드를 사용하는 거예요. 모든 간격 값이 8의 배수가 되도록 하는 거죠.01:28

그래서 13픽셀 대신 16픽셀을 쓰고, 27픽셀 대신 24픽셀을 쓰는 거죠.01:48

19 대신 16 픽셀을 쓰고, 이런 식으로 계속 하는 거죠. 이렇게 하면 전체적으로 훨씬 더 차분하고 고급스러운 느낌을 줘요.01:56

이 레이아웃도 F자 패턴을 따르려고 하는 것 같아요. 왼쪽에는 헤딩이 있고, 오른쪽에는 이미지가 있고, 그 아래에 약간의 텍스트가 있네요.02:05

네, 예전에는 F패턴을 이용해서 웹사이트 가독성을 높이는 방식이 엄청 인기 있었죠. 하지만 지금은 아니에요.02:12

사람들은 예의 바르게 한 가지 방식으로 읽지 않아요. 마치 작은 악마처럼 스크롤하고, 대충 훑어보거나, 튕겨나가고, 여기저기 훑어보면서, 핸드폰을 확인하고, 나중에 다시 돌아오죠.02:20

이걸 해결하려면 헤드라인을 더 크고 명확하게 만들고, 부제를 줄이고, 하나의 패턴을 주요 도시 A로, 다른 하나는 부차적인 것으로 만들 거예요. 그리고 CTA가 눈에 띄도록 대비를 사용하세요.02:29

영웅 문구는 하나의 아이디어에 집중해야 해요. 목표는 3초 안에 이 웹사이트가 무엇을 하는지, 그리고 왜 관심을 가져야 하는지 알 수 있도록 하는 거죠.02:44

다음 문제는 여백입니다. 숨 쉴 공간이 없어서 사용자들이 내용을 살펴보기도 어렵고, 대충 훑어보기는 거의 불가능합니다.02:52

여백은 단순히 낭비되는 공간이 아니라, 아이디어를 구분하는 방법입니다.02:59

그래서 여기서는 각 섹션 간의 수직 간격을 넓히고, 각 콘텐츠 블록 안에 더 많은 패딩을 추가해서 리듬감을 살릴 거예요.03:04

큰 부분, 작은 부분, 큰 부분. 이런 리듬이 사람들의 스크롤을 유도하고 페이지에 좀 더 깊이 있는, 프리미엄한 느낌을 줍니다.03:14

마지막으로, 레벨 1에 대한 타이포그래피입니다. 몸통 텍스트보다 조금 더 큰 제목, 데스크톱에서 읽기 힘든 작은 단락, 그리고 명확한 시스템이 전혀 없네요. 이걸 해결하려면 정말 간단한 타입 스케일을 만들 겁니다.03:23

제목(H1), 크고 굵게, 주요 메시지. 소제목(H2), 중간 크기. 본문, 16~18 픽셀 정도의 가독성 좋은 크기. 상세 정보는 좀 더 작은 레이블 크기를 사용하면 좋을 것 같습니다.03:37

모두 동일한 글꼴 패밀리를 사용해야 합니다. 이건 레벨 1입니다. 임의적인 간격, устарелый 레이아웃 방식, 공백 부족, 일관성 없는 스타일, 그리고 혼란스러운 타이핑이 문제였죠. 이제 이걸 개선하고 레벨 2로 넘어가 보겠습니다.03:51

동일한 웹사이트, 동일한 아이디어지만, 이제 좀 더 품위 있어 보이는 것 같아요. 이런 식으로 대부분의 소규모 사업체들이 결국 만들게 되는 웹사이트거든요. 깔끔하고 단순하고, 좀 덜 당황스러운 거죠.04:06

근데 왜 아직도 민트색이죠? 훨씬 보기 좋아졌긴 하지만, 프리미엄 웹사이트의 특징이 아직 부족한 것 같아요.04:19

메시지가 강력해야 합니다. 지금은 아무 의미가 없는 해결책을 만드는 더 나은 방법을 제시하는, 너무 일반적인 문구입니다. 다양한 색상이 섞여 있어서 이 Sass 웹사이트에는 이상적이지 않습니다. 아주 간단한 색상 가이드는 60-30-10 비율로 하는 것이 좋습니다. 60%는 중립적인 흰색이나 밝은 회색으로 부드러운 배경을 만들고, 30%는 브랜드 컬러를 사용해야 합니다.04:26

여기에는 주황색이 있고, 그 다음에 액센트처럼 시티 에이스 같은 것들이 10개 정도 들어갑니다. 물론 다양한 색상을 섞을 수 있지만, 웹 디자인을 처음 시작한다면 60-30-10 규칙이 안전한 선택입니다. 레벨 2는 깔끔하고 기능적이죠. 솔직히 레벨 2 웹사이트만 디자인해도 괜찮은 커리어를 쌓을 수 있습니다. 하지만 5천 달러, 10천 달러 같은 것을 원한다면...04:49

프로젝트를 레벨 3까지 진행해야 합니다. 이번에는 시각적인 부분보다는 웹사이트 전략에 깊이 파고들 거예요. 레벨 3에서 달라진 점은, 주인공이 명확한 메시지를 갖게 되었다는 겁니다.05:11

이건 누구를 위한 건지, 뭘 하는 건지, 그리고 왜 신경 써야 하는지를 말하는 거예요. 훨씬 더 직접적이고, 훨씬 더 이해하기 쉽죠.05:24

섹션들이 이제 스토리를 전달합니다. 문제, 해결책, 기능, 사회적 증거, 가격, 그리고 CTA가 있습니다. 그리고 간격과 구조가 그 스토리를 지지합니다. 콘텐츠를 쌓는 방식이 아니라요.05:32

히어로 부분에는 디스플레이 폰트를 사용할 수도 있지만, 본문 텍스트는 가독성을 최대한 살려주세요.05:45

7개 또는 10개 이상의 단어는 가독성이 우선입니다. 멋있어 보이는 것보다 명확하게 전달하는 게 중요해요. 색상은 장식적으로 쓰지 않고 시스템으로 활용할 겁니다. 마지막으로, 브랜드와 어울리는 이미지를 사용해야 합니다. 따라서 무작위적인 디자인 시안이나 아이콘 대신, 일관성 있는 상상도와 시안을 사용할 거예요.05:51

색상 팔레트도 똑같고, 조명도, 분위기도, 각도도 비슷하게 해서, 다른 웹사이트에서 복사해서 붙여넣은 느낌이 들지 않게 해야 해. 이 정도면 드립(Dribbble)을 위한 디자인이 아니라, 우리가 원하는 결과를 위한 디자인이야. 버튼을 클릭했을 때 어떤 일이 일어나는지, 정말 명확하게 전달해야 해.06:12

제목만 대충 훑어봐도 제안 내용을 이해할 수 있을 만큼, 중요한 부분에 사회적 증거를 배치했는지 확인해야 합니다. 자, 이제 대부분의 사람들이 여기에서 당황하며 '아, 아가씨, 이거 좋네요! 그런데 저는 디자이너가 아니고, 코딩도 모르고, 어떻게 사용해야 할지 모르겠어요.' 라고 말하는 부분이 나옵니다.06:30

피그마요. 사업용 웹사이트를 괜찮게 만들고 싶은데, 50파운드짜리처럼 싸구려 느낌은 안 났으면 좋겠어요.06:47

솔직히 말해서, 디자인이나 코딩을 잘 모른다면 레벨 3을 처음부터 만들 엄두도 못 낼 거예요. 대신, AI로 80% 정도 완성시켜주는 도구를 쓰고 시각적으로 다 수정하는 게 훨씬 편하겠죠. 오늘 영상의 파트너인 호스팅어 호라이즌이 바로 그런 도구입니다.06:52

호라이즌을 이용해서 어떻게 할지 보여드릴게요.07:10

프롬프트에서 시작하는데, 여기가 대부분의 사람들이 승리하거나 패배하는 곳이에요. 그래서 그냥 'SASP 앱 웹사이트를 만들어줘'라고 말하는 게 아니라, 레벨 3 디자인 요소를 포함하고, SAS 대시보드 도구를 위한 현대적인 마케팅 웹사이트를 만들어 달라고 구체적으로 요청해야 해요. 깔끔한 레이아웃으로요.07:13

여덟 점 스타일 간격, 뚜렷한 시각적 계층 구조, 현대적인 타이포그래피, 부드러운 그라데이션, 풍부한 흰색 여백, 명확한 CTA, 전환에 집중. 이제 호라이즌에서 스타일 색상 및 전체적인 분위기도 직접 선택할 수 있습니다. 첫 번째 초안이 완성되었으니까요.07:33

몇 초 만에 끝낼 수 있는데, 맹목적으로 받아들이는 대신, 레벨 1에서 레벨 3로 넘어갔을 때처럼 계속 개선해 나갈 겁니다. 페이지 내에서 텍스트를 직접 클릭해서 수정하거나, 섹션을 선택해서 빌딩 콘텐츠 에디터를 사용할 수도 있습니다.07:51

예를 들어, 저는 영웅 섹션을 선택해서 이 헤드라인을 좀 더 자신감 있게, 덜 기업적으로 바꿔달라고 할 수 있습니다. 아니면 기능 블록의 경우, 한 문장으로 요약하고 더 많은 이점을 강조하도록 요청할 수도 있습니다.08:06

호라이즌에도 코디라는 작은 도우미가 있는데, 웹사이트 빌더에 내장된 챗GPT와 비슷한 거예요.08:23

SAS 착륙에 대한 5가지 대체 헤드라인을 제안해 줘, 어떤 섹션이 필요한지, 높은 전환율을 가진 가격 페이지에는 무엇이 포함되어야 하는지, 가입자 수를 늘리기 위해 레이아웃을 어떻게 개선해야 하는지 등 다양한 질문을 할 수 있습니다. 심지어 카피라이터나 UX 디자이너가 없더라도, 마치 두 번째 뇌를 얻은 것처럼 활용할 수 있다는 거죠.08:30

모든 것을 다듬으실 수 있도록 시각적으로, 코딩 없이 진행됩니다.08:49

이미 웹사이트를 실제 제품으로 만들기 위해 필요한 통합 기능들이 이미 갖춰져 있습니다.08:54

Supabase를 연결하면 사용자 계정 관리, 데이터 저장, 콘텐츠 관리 등 다양한 작업을 처리할 수 있습니다. 또한, 쇼핑몰 구축도 지원하여 별도의 도구 없이 제품 크레딧이나 구독 서비스를 판매할 수 있습니다.08:59

사이트 사용 현황을 분석해서 사람들이 어떻게 결제를 사용하는지 파악할 수 있습니다. Horizon은 Stripe와 직접 연동되어 정기 구독, 일회성 결제, 청구 관리 등을 지원합니다. 더 많은 제어가 필요하다면 코드를 직접 접근할 수도 있습니다. 호스팅, 데이터베이스 등 모든 것이 깔끔하게 정리되어 있습니다.09:14

게시 버튼을 누르면 바로 준비되니까요. 비용이 궁금하신 분들을 위해 Horizon 플랜을 소개해 드릴 텐데, 제 할인 코드인 'designly10'을 사용하시면 됩니다. 설명란에도 링크를 넣어뒀어요. 15만 달러 정도의 맞춤 제작을 의뢰하기 부담스럽지만, 그래도 좀 더 높은 수준의 결과물을 원하신다면…09:33

솔직히 이건 가장 간단한 방법이에요. 간단하게 요약하자면, 레벨 1은 어수선한 간격, 계층 구조 없음, 저렴하게 느껴지는 임의의 타이포그래피이고, 레벨 2는 깔끔하고 일관적이지만, 너무 평범하고 개성이 없어요.09:51

전략적인 수준에서 명확한 메시지 전달, 탄탄한 구조, 세심한 시각 자료, 전환율을 위한 최적화된 디자인. 피그마 자체로 모든 것을 디자인하든, 호스팅어 호라이즌과 같은 도구를 사용하든 동일한 원칙이 적용됩니다. 레이아웃, 타이포그래피, 색상이 제대로 작동하도록 하는 것이 중요합니다. 여러분의 생각은 어떠신가요?10:07

댓글로 가장 좋아하는 웹사이트 빌더가 무엇인지 알려주세요. 그리고 항상 그렇듯이 좋아요와 구독을 누르고 다음번에 만나요. 안녕!10:28