본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한글로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

디자이너가 웹사이트 제작의 전 과정을 직접 주도할 때 어떤 일이 일어날까요? ‘아름다운 디자인’과 ‘전환율 높은 랜딩페이지’ 사이의 간극이 사라지고, 시각적 심리학과 인터랙션 디자인, 전략적 사고를 활용하여 사용자가 사이트내에서 자연스럽게 행동하도록 이끌 수 있습니다.

디자인은 웹사이트를 전환시킬 수 있는 강력한 도구로 쓰입니다. 그러나 여전히 많은 디자이너가 마케팅 성과와 별개로 ‘예쁜 디자인’을 만드는 역할에만 머무르고 있죠. 이 경우 개발자와 마케터가 별도로 최적화를 진행하면서, 디자인이 가진 원래의 힘을 잘 발휘하지 못하곤 합니다. Conversion-driven design(전환 중심 디자인)은 이러한 간극을 메우며, 디자이너가 아이디어 구상부터 최종 런칭까지 전 과정을 주도하여 진행할 수 있도록 도와줍니다.

1. 사용자의 전환 경로를 유도하는 레이아웃 만들기

디자이너로서 새로운 UX 트렌드나 기능에 끌리는 것은 당연하지만, 트렌디한 시각적 기능들이 전환율을 떨어뜨릴 수도 있어요. 사용자의 전환 경로를 유도하는 디자인을 해야 합니다.

사용자의 경로을 따라가보며 필요한 것만을 남기세요

사용자 중심 레이아웃을 설계하려면, 먼저 사용자가 어떤 순서로 페이지를 탐색하는지 파악해야 합니다. 인터뷰나 히트맵, 클릭 경로 분석을 통해 사용자가 원하는 정보, 느끼는 불편, 갖는 의문을 파악해보세요.

아래 내용을 바탕으로 논리적인 흐름을 구성해보세요.

• 명확한 가치 제안으로 시작하기

• 사례 연구나 리뷰 같은 사회적 증거 제시

• 예상되는 반대 의견을 사전에 해결

• 자연스럽게 CTA(Call to Action)로 유도

시각적 요소로 사용자의 행동을 유도해보세요

색상과 대비로 CTA를 강조하는 방법을 사용하기 전, 아래의 내용을 알아두면 도움이 됩니다.

1. "가장 전환을 잘 시키는 최고의" 버튼 색상은 없습니다. 어떤 연구에서는 빨간색 버튼을, 또 다른 연구에서는 파란색 버튼을 선택하라고 하지만, 특정 색상이 중요한 것이 아닌 배경 색상과의 대비가 훨씬 더 중요합니다.

2. 색상 일관성은 색채 심리학보다 중요합니다. 브랜드 팔레트를 활용하여 가장 강렬하고 대비가 강한 색상을 CTA에 사용하고, 모든 곳에 이를 일관성 있게 적용하면 사용자는 무엇을 선택해야 할지 쉽게 알 수 있습니다.

3. 대비를 만든다고 해서 항상 밝은 색상을 사용해야 하는 것은 아닙니다. 때로는 중요한 요소 주변에 공간을 만드는 것이 중요합니다. 여백은 강렬한 색상만큼이나 시선을 사로잡는 데 효과적이며, 특히 클릭 유도 문구를 다른 요소들과 분리하기 위한 전략적으로 사용하면 더욱 효과적입니다.

랜딩 페이지에서 시각적으로 CTA 버튼이 눈에 잘 띄는지 확인해보세요. 만약 눈에 잘 띄지 않는다면 대비가 높은 색상으로 바꾸고, CTA 버튼은 여백을 두어 강조하여 사용자가 CTA 버튼을 못보고 지나치지 않도록 해야 합니다.

전환율이 저조할 땐 목적에 집중해보세요

전환율이 저조하다면 “혹시 이를 해결할 수 있는 숨겨진 해결책이 있지 않을까?"라고 생각할 수도 있습니다. 하지만 실제로 가장 큰 원인은 디자인 목적의 부재(사용자가 무엇을 원하는지 이해하지 못함) 또는 설득력 부족(사용자가 왜 이런 행동을 취해야 하는지 설득되지 않음)에 있을 수 있습니다.

UX 디자이너 데이비드 카다비는 "제가 본 성공적인 랜딩 페이지는 모두 한 가지 공통점이 있었습니다. 사용자에게 원하는 다음 작업이 무엇인지 시각적으로 매우 명확했습니다."라고 말했습니다. 이처럼 사용자에게 원하는 것이 무엇인지 어떻게 설득할지를 명확하게 정하는 것이 중요합니다.

2. 목적 있는 인터랙션 전략적으로 활용하기

웹사이트에는 수많은 인터랙티브 요소가 있지만, 모두 전환율을 올리는 데에 긍정적인 효과를 주는 것은 아닙니다. 전환에 중심이 맞춰져있는 디자인에서 중요한 것은 인터랙션이 단순한 장식이 아니라 실질적으로 사용자의 여정을 돕는지에 대한 것입니다.

목적에 맞는 마이크로 애니메이션에 집중해보세요

좋은 인터랙션 디자인은 눈에 대놓고 보이지 않습니다. 사용자의 주의를 끌지 않고도 사용자 스스로 인터랙션에 다가가 목적을 이룰 수 있도록 도와줍니다. 각각의 마이크로 인터랙션은 사용자가 원하는 액션에 더 가까이 다가갈 수 있도록 도와줄 수 있는 명확한 목적을 가져야 합니다.

다음과 같은 부분을 고려해보길 추천합니다.

• 중요한 행동을 이끌어 내야 하는 요소들은 더 강조하기

• 로딩 중 사용자가 인지하는 대기 시간을 줄이기

• 사용자 행동에 따라 즉각적인 피드백을 제공하기

• 방문자의 주의를 중요한 전환을 이끌어내야 하는 요소로 유도하기

• 사용자 입력이 수신되었는지 확인하기

소극적인 사용자를 적극적인 사용자로 전환시켜보세요

전환율을 가장 잘 나타내는 지표는 무엇일까요? 몇 가지 좋은 답이 있지만, 가장 연관성이 높은 지표 중 하나는 바로 사이트 체류 시간입니다. 사이트에 오래 머무르는 사용자는 신뢰를 쌓고, 판매 전 이의를 제기하거니, 제품/서비스가 어떻게 문제를 해결하는지 이해할 수 있는 시간이 더 많습니다.

인터랙티브한 컴포넌트는 사이트에 머무르는 시간을 늘릴 뿐만이 아닙니다. 특사용자가 제품에 대한 설명을 읽는 데에서 멈추지 않고, 실제로 제품의 이점을 경험할 수 있는 시간까지 제공다면 그 시간의 질도 물론 향상시킬 수 있겠죠.

다음을 통해 사용자 참여를 유도할 방법을 찾아보는 걸 추천합니다.

• 정적인 가격표를 인터랙티브한 ROI 계산기로 교체

• 일반적인 추천을 개인화된 퀴즈로 변환

• 사용자가 제품을 미리 경험할 수 있는 인터랙티브한 데모 만들기

• 기능 목록을 인터랙티브한 쇼케이스로 전환

3. 전환을 위한 반응형 디자인 구현하기

대부분의 "반응형" 웹사이트는 여전히 모바일 기기를 부가적인 요소로 여깁니다. 모바일 디자인에서는 글자와 요소를 데스크톱보다 좀 더 축소하고, 몇 가지 요소를 숨기는 것에 그치지 않습니다. 하지만 이러한 디자인 방식은 바로 기기마다 사용자마다 목표와 행동이 다르다는 근본적인 사실을 간과하는 방식입니다.

전환율을 목표로 하는 반응형 디자인은 화면 크기뿐 아니라 사용자 맥락에 맞춰 조정돼야 합니다. 이를 실현하려면 사람들이 여러 기기에서 사이트를 실제로 어떻게 사용하는지에 대한 생각을 우선적으로 해보아야 합니다.

모바일부터 시작하되 각 상황에 맞게 최적화하세요

모바일을 우선적으로 제작하는 방식은 수년 전부터 우선시되어 왔지만, 많은 디자이너들이 여전히 이를 잘못 이해하고 있습니다. 처음부터 소형 기기의 환경에 맞춰 개발하기보다는 데스크톱 경험에서 필요한 부분을 제거하여 모바일에 맞춰 디자인하는 방식으로 말이죠.

모바일 사용자의 경우 세 가지 중요한 요소에 집중하는 것을 추천합니다

• 전환율을 높이는 콘텐츠를 우선시해서 디자인하기

• 한 손으로 쉽게 상호 작용할 수 있을 만큼 큰 탭 요소를 만들기

• 변환되는 프로세스에서 불필요한 단계를 제거하기

모든 결정은 모바일 환경을 고려해야 합니다. 사용자는 화면을 보며 주의가 산만해지기도 하고, 보통 한 손을 사용하여 웹서핑을 한다는 점을 기억해두는 것을 추천해요. 또한, 다양한 연결 속도를 고려해야 할 수 있으므로 로딩 시간에 큰 영향을 미치는 디자인은 피하는 것이 좋습니다.

Framer는 반응형 글꼴 크기 와 사용 가능한 디바이스에 따라 유연하게 반응하는 스택 기반 디자인을 통해 다양한 화면 크기에 맞춰 손쉽게 디자인할 수 있도록 지원합니다. 또한 모든 브레이크포인트 디자인을 하나의 편집 창에서 확인할 수 있으므로, 각 디바이스별 경험을 개선하기 위해 요소를 쉽게 추가하고 제거할 수 있습니다. 또한 브레이크포인트 상속 기능을 사용하면 기본 브레이크포인트에 적용된 모든 변경 사항이 다른 브레이크포인트에도 자동으로 적용됩니다.

데스크톱 공간을 전략적으로 활용하세요

사용자가 데스크톱으로 전환하면 화면 공간이 더 넓어지지만, 그렇다고 해서 콘텐츠를 가득 채우려 하는 건 지양해주길 바래요. 대신, 더 넓어진 공간을 활용하여 디바이스별 전환되는 과정에서 발생하는 콘텐츠간의 마찰을 줄이는 걸 추천합니다.

데스크톱에서는 아래와 같은 장점이 있습니다.

• 한 번에 더 많은 옵션을 표시하는 다중 열 레이아웃 제작 가능

• 추가 클릭 없이 추가 정보 표시

• 사용자를 안내하기 위한 정교한 호버 상태 구현 가능

반응형의 목표는 디바이스별로 완전히 다른 경험을 만드는 것이 아닙니다. 추가 공간을 활용하여 전환을 더욱 쉽게 만드는 것을 목표로 두고 디자인하길 추천합니다.

반응형에서 전환율을 떨어뜨리는 실수 예방하기

다양한 반응형 디자인에서 웹사이트 디자인을 검토할 때 다음과 같은 일반적인 전환 방해 요소에 주의하세요.

1. 모바일에서 CTA를 숨겨두지 않게 주의하세요 : 모바일에서 CTA가 아래로 사라지면 전환율이 떨어져요.

2. 복잡한 레이아웃 양식을 사용하지 않게 주의하세요 : 데스크톱에서는 잘 작동하는 양식이 모바일에서는 전환율 저하의 원인이 될 수 있어요. 작은 화면에서는 필드를 하나 추가할 때마다 사용자의 이탈 위험이 기하급수적으로 증가한다는 점을 염두에 두세요.

3. 아주 작은 글꼴과 버튼을 지양하세요 : 사용자가 텍스트를 읽거나 결제 버튼을 클릭하기 위해 줌 확대/축소를 해야 하는 건 전환율을 빠르게 떨어뜨리는 길이에요.

반응형 디자인을 단지 기술적인 디자인으로만 여기지 않도록 하세요. 사용자 경험을 끊임없이 생각하고, 단순히 여러 화면에서 "작동"하도록 만드는 것이 아니라, 모든 기기에서 반응형으로 전환되도록 만드세요.

4. 성능을 디자인의 일부로 고려하기

웹사이트 성능은 단순히 개발자만의 영역이 아닙니다. 페이지 로딩 속도가 느리면 사용자는 사이트를 떠날 수 있으며, 이는 곧 전환율 저하로 이어지기 일쑤죠. 디자이너 역시 성능 최적화에 기여할 수 있는 부분이 있습니다.

• 이미지 최적화: SVG는 아이콘과 로고, JPEG는 사진, PNG는 투명도가 필요한 복잡한 이미지에 적합합니다. WebP는 최신 브라우저에서 효율적인 압축 파일을 제공합니다. Framer는 기본적으로 AVIF 변환을 통해 용량을 줄여주고, 기기별로 최적화된 이미지를 자동적으로 제공합니다.

• 애니메이션 최적화: 과도한 애니메이션은 사이트 속도를 늦춥니다. 연구에 따르면 로딩 속도가 100ms 늦어지면 전환율이 최대 7% 감소할 수 있습니다. 꼭 필요한 경우에만 가볍게 적용하세요.

• 컴포넌트 재사용: 컴포넌트 기반 디자인은 브라우저 캐싱 효과를 극대화해 재방문 속도를 높입니다. 이는 일관성 있는 사용자 경험도 함께 보장합니다.

대부분의 디자이너는 성능 최적화를 개발자에게 맡깁니다 . 하지만 이는 전환율을 떨어뜨리는 실수입니다. 페이지 로딩 속도가 느리면 사용자는 이탈합니다. 그리고 아무리 전환율 디자인을 잘해도 사용자가 볼 기회조차 없는 사이트를 구할 수는 없습니다.

디자이너는 디자인 프로세스 초기에 내리는 선택을 통해 성과에 상당한 영향을 미칩니다. 이러한 선택이 효과를 발휘하도록 하는 방법을 소개해드릴게요.

품질 저하 없이 이미지 최적화

이미지는 일반적인 웹사이트 용량의 절반 이상을 차지합니다. 또한 많은 디자이너들이 타협을 꺼리는 부분이기도 합니다. 눈에 띄는 품질 저하 없이 성능을 크게 향상시킬 수 있는 방법을 소개해드릴게요.

• 아이콘, 로고 및 간단한 일러스트레이션에는 SVG를 사용하세요

• 투명도가 없는 사진 및 복잡한 이미지의 경우 JPEG를 선택하세요.

• 복잡한 이미지에 투명가이 필요한 경우에만 PNG를 선택하세요.

• 최신 브라우저에서 더 나은 압축을 위해 대체 기능을 갖춘 WebP를 사용해보세요.

Framer는 이미지 최적화를 자동으로 처리하여 이 모든 작업을 더욱 간편하게 해줍니다 . 성능 극대화를 위해 대부분의 이미지는 AVIF 포맷으로 변환되어 약 20% 더 작은 크기로 제공됩니다 . 각 이미지는 화면 크기에 따라 자동으로 크기가 조정되어 브라우저에 자동적으로 제공되며, Framer 설정에서 특정 이미지 해상도를 수동으로 조정할 수도 있습니다.

가벼운 애니메이션을 사용하세요

화려한 애니메이션을 추가하는 것은 사용자의 참여를 높이는 방법이 될 수 있지만, 화려한 만큼 사이트 속도를 저하시키면 전환율에도 악영향을 미친다는 걸 유의해야 해요. 연구에 따르면 페이지 로딩 시간이 100밀리초만 지연되어도 전환율이 최대 7%까지 감소할 수 있어요.

인터랙티브 요소를 추가하기 전과 후에 성능 테스트를 실행한 후, 속도가 너무 느려지지 않는지 확인하세요. 애니메이션이 로딩 시간에 100ms 이상 추가된다면, 사이트가 아무리 멋지게 보이더라도 전환률을 올리는 데에 가치가 없을 수도 있습니다.

애니메이션을 가볍게 유지하되, 사용자가 느끼는 로딩 시간을 줄이는 데 도움이 되는 로딩 애니메이션이 어떤 게 있을지 여러 애니메이션을 시도 해보세요.

재사용 가능한 컴포넌트 시스템 구축

컴포넌트 기반 디자인을 사용하면 일관성과 성능적인 이점을 모두 얻을 수 있습니다. 컴포넌트를 재사용하면 브라우저가 이를 효과적으로 캐치하여 재방문객의 로딩 시간을 획기적으로 개선합니다.

모든 페이지에 맞춤형 디자인을 만드는 대신 최적화된 구성 요소 라이브러리를 해보는 것이, 훨씬 체계적인 방법일 수 있습니다. 이러한 접근 방식은 코드 낭비를 줄이고 더욱 밀도있는 사용자 경험을 제공하며, 전체적인 UX를 가속화합니다.

5. 데이터 기반의 지속적 개선

많은 팀은 사이트를 한 번 만들고 그대로 두거나, 매번 감에 의존해 이를 개선합니다. 그러나 전환 중심 디자인은 데이터를 활용한 피드백 루프를 통해 꾸준히 발전해야 합니다.

활용 가능한 데이터 지표는 다음과 같습니다:

• 사용자 경로 분석: 전환 직전 또는 이탈 직전 행동 파악

• 디바이스별 전환율: 특정 환경에서 전환이 떨어지는지 확인

• 폼 입력 완료율: 어떤 입력 항목이 이탈을 유발하는지 분석

• CTA 클릭률: 버튼이 충분히 효과적인지 확인

• 스크롤 깊이: 중요한 콘텐츠가 실제로 읽히는지 확인

• 이탈 페이지: 전환 이전에 사용자가 떠나는 지점 파악

Framer와 같은 노코드 플랫폼은 A/B 테스트를 빠르게 반복할 수 있어, 실시간으로 데이터를 반영한 개선이 가능합니다. 이를 개선할 때는 효과가 큰 개선 사항부터 우선순위로 적용해보는 게 중요합니다.

6. 가정이 아닌 실제 데이터를 기반으로 디자인을 발전시키세요.

대부분의 팀은 사이트를 디자인하고 출시한 후 다음 프로젝트로 넘어갑니다. 어떤 팀들은 때때로 사이트를 조정하기도 하지만, 직감이나 주관적인 의견, 또는 가장 큰 목소리를 내는 사람의 의견에 따라 조정합니다. 두 가지 접근 방식 모두 막대한 비용을 발생시킵니다.

지속적인 사이트 개선을 위한 피드백 루프를 형성기 위해선, 데이터 기반 디자인 전략 수립이 중요해요. 전환 과정에서 마찰이 일어나는 아래의 신호들에 집중해보세요.

• Path analysis : 사용자가 화면을 전환하거나 나가기 전에 이동한 정확한 경로를 보여줍니다.

• Conversion rate by device : 반응형 디자인이 특정 화면에서 실패하는지 여부를 보여줍니다.

• Form field completion rates : 사용자가 특정 필드를 완료했는지, 포기했는지 살펴보며 사이트를 이탈하게 만드는 필드가 무엇인지를 식별합니다.

• Click-through rates on CTAs : 기본 CTA 버튼이 작동하는지 알 수 있습니다.

• Scroll depth : 스크롤에서 중요한 콘텐츠가 보이지 않는지에 대한 여부를 보여줍니다.

• Exit page analysis: 종료 페이지 분석을 통해 사용자가 어떤 웹 페이지를 떠나는지 알 수 있습니다.

• Time to first interaction: 첫번째 상호작용까지 걸리는 시간은, 사용자가 무엇을 해야 할지 이해했는지 여부를 나타냅니다.

노코드 디자인 플랫폼을 사용하면, 개발자의 A/B 테스트를 기다릴 필요 없이 반복되는 작업을 더욱 빠르게 진행할 수 있습니다. 매번 바뀌는 전환 최적화 스프린트 대신, 실제 사용자 데이터를 기반으로 지속적으로 개선하여 시간이 지남에 따라 전환율 안에서의 복합적인 결과를 얻을 수 있습니다.

모든 변화가 동일하게 만들어지는 것은 아니라는 점을 기억해두는 게 좋습니다. 따라서 전환율에 가장 큰 영향을 미칠 가능성이 있는 변화를 우선시하세요.

디자인을 전환의 무기로 만들기

단순히 예쁜 사이트를 만드는 것을 넘어, 이 사이트를 비즈니스의 성과로 이어지도록 설계해보세요. 디자이너가 전체 제작 과정을 주도하면, 창의성과 전략을 동시에 가져갈 수 있으며 이는 곧 경쟁력이 될 수 있겠죠.

Framer를 활용해 전환 중심 웹사이트를 연습하고, 만들어보세요. 빠르게 시작하고, 지속적으로 개선하며, 실질적인 성과를 만들어낼 수 있을 거에요.

본 글은 Framer 공식 블로그의 ‘5 conversion-driven web design tactics to boost your website’s ROI’를 번역·각색한 콘텐츠입니다.