반응형

브라우저 화면 드레그 안되게 css

 

.unselectable {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.all {
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
<head>
<style type="text/css">
.no-drag {
	-ms-user-select: none; 
	-moz-user-select: 
	-moz-none; 
	-webkit-user-select: none; 
	-khtml-user-select: none; 
	user-select:none;
}
</style>
</head>
<body>
   <p class="no-drag">드래그를 할 수 없습니다.</p>
   <p>드래그를 할 수 있습니다.</p>
</body>

 

반응형
반응형

텍스트나 배경에 순수한 검정을 사용하면 안 되는 이유

 

https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/

 

Why You Should Never Use Pure Black for Text or Backgrounds

Did you know that pure black text can cause eye strain? A survey found that “58 percent of adults in the U.S.” have experienced eye strain from working on computers. Designers can do their part to reduce the likelihood of eye strain on their designs by

uxmovement.com

순수한 검정색 텍스트가 눈의 피로를 유발할 수 있다는 것을 알고 계셨습니까? 조사  따르면 "미국 성인의 58%"가 컴퓨터 작업으로 인해 눈의 피로를 경험한 적이 있습니다. 디자이너는 사용하는 검정색에 주의하여 디자인에 대한 눈의 피로 가능성을 줄이기 위해 자신의 역할을 할 수 있습니다.

흰색 배경에 순수한 검정 텍스트

흰색 배경에 순수한 검정색 텍스트는 사용자가 오랜 시간 동안 텍스트를 읽을 때 눈의 피로를 유발할 수 있습니다. 흰색은 색상 밝기가 100%이고 검은색은 색상 밝기가 0%입니다. 색상 밝기의 이러한 차이는 텍스트를 읽을 때 눈을 과도하게 자극하는 강렬한 조명 수준을 만듭니다. 이로 인해 눈 은 밝기에 적응하기 위해 더 열심히 일 하게 됩니다 .

이 개념을 보여주는 예는 어두운 방에서 밝은 조명을 켤 때입니다. 조명 조건의 이러한 급격한 변화는 우리의 눈에 가혹합니다. 그러나 어두운 방에서 희미한 조명을 켜면 대비의 급격한 증가로 인해 망막이 과도하게 자극되지 않기 때문에 눈이 변화에 더 쉽게 적응합니다.

흰색 바탕에 검은색 글씨 대신 짙은 회색 글씨를 사용하여 밝기 변화가 심하지 않게 합니다. 이것은 망막의 과도한 자극을 방지하고 사용자가 더 오랜 기간 동안 읽을 수 있도록 합니다.

연구 연구  따르면 "흰색 배경의 검은색 텍스트는 OFF 신경절 세포를 과도하게 자극하고 검은색 배경의 흰색 텍스트는 ON 신경절 세포를 과도하게 자극합니다." 이 발견은 "검은 화면의 흰색 텍스트는 근시를 억제할 수 있지만 흰색 배경의 검은 텍스트는 근시를 자극할 수 있다"는 것을 의미합니다. 이 연구는 대조 극성의 현저한 효과로 인해 흰색 배경에 검은색 텍스트를 읽지 말라고 조언합니다.

순수한 검정색 배경에 흰색 텍스트

흰색 텍스트와 함께 순수한 검정색 배경을 사용하지 말아야 하는 이유도 있습니다. 순수한 검정색 배경은 화면에서 방출되는 모든 빛을 죽입니다. 이것은 더 많은 빛을 흡수해야 하기 때문에 눈이 더 열심히 일하고 더 크게 뜨게 만듭니다. 이 경우 흰색 글자가 검정색 배경으로 번져 텍스트가 흐려질 수 있습니다. 이 효과는 " 할레이션 " 으로 알려져 있으며 모든 연령대의 사람들이 가질 수 있는 난시 가 있는 사용자에게 영향을 미칩니다 .

검정색 배경 대신 어두운 회색 배경을 사용하여 더 많은 빛이 방출되고 텍스트가 번지지 않도록 합니다. 이렇게 하면 눈의 피로가 줄어들고 독서 체력이 강화됩니다.

접근성을 위한 고대비

순수한 검정은 모든 사용자에게 해롭지 않습니다. 시각 장애가 있지만 맹인이 아닌 저시력 사용자는 검정색 배경에 순수한 검정색 텍스트 또는 흰색 텍스트가 있는 텍스트를 더 잘 읽는 경향이 있습니다. 그들을 위해 디자인할 때 접근성 모드에 검은색을 사용해야 할 수도 있습니다. 시력이 정상인 사용자의 경우 눈의 피로를 방지하기 위해 검은색 위에 짙은 회색을 사용하십시오.

더 나은 가독성을 위한 균형 잡힌 대비

높은 색상 대비는 가독성에 유용합니다. 그러나 색상 대비가 너무 높으면 사용자가 읽을 때 눈에 영향을 미치는 조명 수준의 상당한 차이가 발생합니다. 텍스트와 배경색 간의 대비 균형은 사용자의 눈에 안전한 텍스트를 만드는 효과적인 방법입니다.

색상 대비가 확실하지 않은 경우  색상 대비 검사기  를 사용하여 자신에게 적합한 최적의 범위를 찾을 수 있습니다. 접근성 지침 에 따라 색상 대비가 너무 낮을 때 표시됩니다  . 그러나 색상 대비가 너무 높을 때는 표시되지 않습니다. 그 결정은 디자이너의 세심한 눈에 달려 있습니다.

텍스트 색상은 흑백으로 제한되지 않지만 텍스트의 가장 일반적인 색상 조합입니다. 디자이너는 그것을 사용하기 전에 사용자의 눈에 어떤 영향을 미치는지 생각해야 합니다. 눈의 피로를 줄이는 디자인은 사용자가 인터페이스의 콘텐츠를 읽고 즐기는 데 더 많은 시간을 할애할 수 있음을 의미합니다.

반응형
반응형

image , giphy, Drunk fall 

 

 

via GIPHY

.

반응형
반응형

랜딩 페이지란 무엇인가요?

 

홈페이지와 랜딩 페이지의 차이점

 

홈페이지와 랜딩 페이지에 무슨 차이점이 있는지 헷갈리실 수 있는데요. 주요 차이점은 랜딩 페이지가 단일 마케팅 또는 판매 목적으로 활용하기에 좀 더 적합하다는 것입니다. 반면에 홈페이지에는 다양한 요소가 있습니다. 소개 페이지나 이미지 갤러리, 온라인 쇼핑몰 등이 있을 수 있는데요. 랜딩 페이지는 오로지 사용자들이 원하는 목표를 달성하도록 유도하는 가장 필수적인 정보만을 제공합니다.

 

랜딩 페이지에는 CTA에서 벗어나게 하는 추가 링크가 많지 않다는 점을 염려하실 수 있습니다. 결과를 먼저 말씀드리자면 랜딩 페이지를 보는 사용자에게는 페이지를 나가거나 전환하는 두 가지의 선택지 밖에 가지고 있지 않은데요.

 

그렇기 때문에 전환율을 높이거나 잠재 고객 유도 및 판매에는 랜딩 페이지가 더 효과적 입니다.

 
 

랜딩 페이지를 제작하는 방법

 

무료 랜딩 페이지 템플릿을 사용하여 나만의 랜딩 페이지를 제작할 수 있습니다. 모든 랜딩 페이지 템플릿은 전문 디자이너와 마케팅 전문가가 제작하였기 때문에 전환율을 높이고 판매를 유도하기에 적합합니다. 또한, 자유롭게 디자인을 변경할 수 있어 내 브랜드 로고를 넣거나 브랜드 아이덴티티 컬러 등의 요소들을 적용할 수도 있습니다.

 

무료로 랜딩 페이지를 제작하는 방법에 관해 포괄적으로 소개한 글을 읽어보면 더 자세한 정보를 확인하실 수 있습니다.

 

 
 

랜딩 페이지 유형

 

이제까지 랜딩 페이지가 무엇이며 어떻게 제작하는지 알아봤습니다. 자, 그럼 이제 크게 두 가지로 나뉘는 랜딩 페이지의 유형에 대해 살펴보겠습니다.

 
  • 잠재 고객 형성 랜딩 페이지 이 미니 사이트는 고객에 관한 정보를 수집하여 잠재 고객을 형성합니다. 방문자들이 연락처 정보를 제출하는 양식이 마련되어 있어 방문자의 이메일로 후속조치를 하고 커뮤니케이션을 이어 나갈 수 있는 전형적인 방식입니다. 그러기 위해서는 방문자가 양식에 연락처 등의 세부 정보를 입력하여 제출해야 하는데요. 쿠폰 코드나 전자책 및 웨비나, 뉴스레터를 통한 단독 콘텐츠 제공을 목적으로 방문자가 연락처 정보를 입력하도록 유도할 수 있습니다.
 
  • 클릭율 랜딩 페이지 해당 유형의 랜딩 페이지는 방문자가 판매 또는 구독 페이지로 이동하도록 유도합니다. 일반적으로 CTA 버튼이 있어서 방문자가 바로 구매나 구독을 하도록 장려하고 바로 결제 페이지까지 이어지는 플로우를 제공합니다.
 

어떤 유형의 랜딩 페이지가 내 비즈니스에 어울리는지 고민이 되신다면 목적이 무엇인지를 생각해 보세요. 잠재 고객 형성을 위한 방문자 연락처 정보 수집이 목적인가요? 일시적인 세일 이벤트를 하고 계신가요? 행사 참석 여부에 대한 응답을 수집하고 있으신가요? 어떤 목적으로 랜딩 페이지를 제작하려고 하는지 생각해보면 내 필요에 정확하게 들어맞는 페이지를 구축하는 데 도움이 될 것입니다.

 

그래도 어떤 유형의 랜딩 페이지를 제작해야 할지 감이 잡히지 않는다면 랜딩 페이지 모범 제작 사례를 살펴보세요.

 
 

랜딩 페이지 사용 시기

 

목적이 무엇이든지 간에 랜딩 페이지를 활용한다면 어쨌든 그 목적을 달성할 수는 있을 것입니다. 그렇지만 어떤 상황에서 랜딩 페이지가 더 유용하게 쓰일 수 있는지 알아 놓는다면 좋겠지요?

 
  • 방문자에게 제품 페이지 연결 ‘지금 구매하기'와 같은 CTA 버튼이 들어간 랜딩 페이지를 제작 함으로써 방문자들은 제품 구매 페이지나 온라인 쇼핑몰에 바로 이동할 수 있습니다.
 
  • 무료 체험판 제공 구독 서비스를 제공할 수 있는 비즈니스를 운영하고 있다면 랜딩 페이지에서 방문자가 구독 서비스의 무료 체험판을 신청하도록 유도할 수 있습니다.
 
  • 블로그 게시물을 통한 잠재 고객 확보 블로그 독자들이 연락처 세부 정보를 입력하게 함으로써 무료 전자책 또는 백서와 같은 심도 있는 콘텐츠 혜택을 제공하여 독자들을 잠재 고객으로 확보하세요.
 
  • 뉴스레터 구독자 확보 랜딩 페이지를 사용하면 이메일 뉴스레터 신청을 장려할 수 있습니다.
 
  • 행사 등록 유도 웨비나 또는 온라인 교육 세션 등록을 유도하는 랜딩 페이지를 제작하면 더 많은 잠재 고객을 확보할 수 있습니다.
 
  • 멤버십 서비스 제공 랜딩 페이지를 방문자들이 단독 콘텐츠 또는 회원 전용 초대장과 같이 VIP 서비스를 제공받기 위한 유료 멤버십을 신청하는 공간으로 사용할 수 있습니다.
 

 

 

랜딩 페이지 구조

 

지금쯤 이면 랜딩 페이지를 어떤 것인지, 왜 랜딩 페이지가 비즈니스 운영에 있어서 중요한지 감을 잡으셨을 거예요. 이제 랜딩 페이지에 들어가는 기본적인 요소들을 살펴보면서 내 비즈니스에 적합한 랜딩 페이지를 제작하려면 어떻게 구성하면 좋을지 생각해 봅시다.

 

01. 매력적인 헤드라인

첫 번째로 알아야 할 것은 랜딩 페이지는 일종의 헤드라인이라는 것입니다. 뉴스의 헤드라인처럼 랜딩 페이지는 사람들이 콘텐츠를 더 보고 싶게 만드느냐, 그만 보고 싶게 만드느냐를 결정합니다. 때때로 강력한 랜딩 페이지 헤드라인은 데이터 중심적이어서 통계 자료로 독자들을 끌어 모으기도 합니다. 또는 고객의 니즈는 대변하는 슬로건을 내걸어서 방문자들의 시선을 사로잡기도 합니다. 핵심은 헤드라인을 쓰고, 헤드라인의 내용이 부족하다면 서브헤드라인으로 내용을 보충함으로써 고객들의 즉각적인 반향을 불러일으키고, 문제를 해결할 솔루션을 제공하거나 삶을 개선하기 위한 약속을 하는 것입니다.

 
 

02. 깔끔한 디자인

 

가끔은 랜딩 페이지 디자인이 텍스트 내용보다 중요할 수 있습니다. 방문자의 관심을 즉시 끌 수 있는 깔끔한 템플릿과 강렬한 이미지, 동영상 또는 애니메이션을 활용하세요. 방문자에게 감성적으로 접근할 수 있는 기회가 될 수 있습니다. 디자인도 중요하지만 가장 중요한 비주얼 콘텐츠는 맨 상단에 배치해서 방문자가 랜딩 페이지에 들어오자 마자 볼 수 있도록 하는 것을 잊지 마세요.

 
 

03. CTA(콜-투-액션)

CTA는 방문자에게 특정 행동을 즉시 유도하는 짧은 문구로 랜딩 페이지의 본질적인 요소 중 하나입니다. 예를 들어, ‘구독하기’, ‘무료 체험판 시작하기’, ‘지금 등록하기'와 같이 내 랜딩 페이지의 방문자가 취했으면 하는 행동을 CTA로 표현해야 합니다. 어떤 CTA를 만들어야 할지 망설여진다면 CTA 예시를 살펴보면서 다른 사람들은 어떻게 만들었는지 확인해 보세요.

 

 

04. 혜택 요약

랜딩 페이지에 들어가는 모든 텍스트는 중요합니다. 한 페이지만으로 방문자가 CTA를 클릭해서 특정 행동을 취하도록 설득해야 하기 때문이지요. 방문자는 자신이 이 랜딩 페이지에서 얻을 수 있는 혜택이 크다고 생각할 때 전환할 가능성이 높다는 점을 기억하세요. 랜딩 페이지의 공간은 제한적이기 때문에 내가 제공하는 혜택이 무엇인지 자세하게 설명하기 보다는 내 제품 및 서비스를 구매하거나 등록했을 때 무엇을 얻을 수 있는 것을 보여주는 데 초점을 맞추는 것이 좋습니다.

 
 

05. 추천 후기

 

방문자들의 시선을 사로잡을 수 있는 중요한 혜택을 요약해서 넣었음에도 여전히 내가 제공하는 혜택이 왜 좋은지에 대한 주장을 뒷받침할 자료가 필요합니다. 그러기 위한 가장 좋은 방법은 내 제품을 사용해보고 좋아했던 고객들의 추천 후기를 추가하는 것입니다. 랜딩 페이지에 고객 추천 후기를 넣으면 방문자들의 CTA 클릭율이 더 높아질 수 있습니다.

 

06. 마무리 강조 메시지

랜딩 페이지의 맨 하단까지 스크롤을 내린 방문자들을 위해 설득력 있는 마무리 강조 메시지를 배치 함으로써 강렬한 인식을 남길 수 있습니다. 마무리 메시지는 랜딩 페이지의 주요 포인트를 강화하는 내용이어야 합니다. 사실 많은 방문자들이 맨 하단까지 안 보는 경우가 많긴 하지만 마무리 강조 메시지는 내 랜딩 페이지에 계속 머무는 방문자 들에게 마지막으로 전환을 유도하는 강력한 힘을 가지고 있습니다.

 
 

랜딩 페이지 모범 사례

 

랜딩 페이지에 들어갈 콘텐츠를 고민할 때, 이 랜딩 페이지 모범 사례를 참고하여 내 비즈니스에 가장 효과적인 콘텐츠를 제작해 보세요.

  • 내비게이션 최소화 내 랜딩 페이지 방문자의 시선이 분산되지 않도록 하기 위해서 내비게이션 메뉴 삽입은 지양하는 것이 좋습니다. 마찬가지로 페이지 내부에 삽입되는 링크의 개수를 제한해서 방문자들이 다른 페이지로 옮겨가지 않고 CTA를 클릭할 수 있도록 유도하세요.
 
  • 가독성 극대화 한 문단의 글이 너무 길면 방문자가 압도되어 지루함을 느낄 수 있습니다. 반면에 내용이 어렵지 않은 짧은 호흡의 글을 적절한 여백을 두어 삽입하면 오히려 방문자들의 관심을 사로잡고 CTA로 시선을 유도할 것입니다.
 
  • 명료한 CTA 눈에 잘 띄는 CTA를 만들기 위해서는 명확하고 직관적인 표현을 사용하고, 버튼의 색상이 배경 색상과 대조될 수 있도록 하세요. 그리고 랜딩 페이지 전반에 걸쳐서 CTA 버튼을 여러 차례 반복하여 배치함으로써 방문자가 페이지의 어느 부분을 보고 있든지 CTA 버튼에 쉽게 접근할 수 있도록 하세요.
 
  • 중요한 콘텐츠는 상단에 배치 방문자들이 전환을 하기 위해 스크롤을 내릴 것이라고 기대하지 마세요. 최소한 1개의 CTA 버튼을 상단에 배치해서 방문자가 랜딩 페이지에 들어오자 마자 CTA 버튼을 발견하고 즉시 클릭할 수 있도록 유도하세요. 이미지나 헤드라인과 같은 랜딩 페이지의 다른 핵심 요소도 마찬가지로 상단에 배치해야 합니다.
 
  • 모바일 친화적인 랜딩 페이지 내 랜딩 페이지가 모든 기기에서 제대로 보이는지 확인하세요. 랜딩 페이지 트래픽의 상당 부분이 모바일 브라우징을 통해서 오는데요. 작은 스크린에서 내 랜딩 페이지가 어설프게 보인다면 방문자들이 전환할 가능성이 낮아집니다.
 
 

내 랜딩 페이지의 트래픽을 증가시키는 방법

 
 

일단 내 랜딩 페이지에 방문하는 사람이 있어야 방문한 사람들을 전환시킬 수 있겠죠? 트래픽 증가를 위한 4가지의 주요 방법을 살펴보겠습니다:

 
 

01. SNS

SNS는 고객의 참여를 높일 수 있는 가장 기본적인 플랫폼이기 때문에 가장 먼저 내 랜딩 페이지를 홍보할 장소는 SNS가 되어야 할 것입니다. Facebook, LinkedIn, Twitter, Pinterest 등 어떤 SNS가 되었든지 간에 내 비즈니스가 온라인에서 돋보이도록 만들기 위해 랜딩 페이지 연결 링크를 포함하는 인상적인 게시물을 제작해서 올려보세요. 이 방식을 사용하면 내 브랜드에 이미 관심이 있던 사람들을 대상으로 하기 때문에 고품질의 트래픽을 증가시킬 수 있습니다.

02. 이메일 마케팅

이메일 마케팅은 여전히 내 랜딩 페이지의 트래픽을 증가시키기 위한 가장 효과적인 방법 중 하나입니다. 그런 이유로 SNS 홍보와 더불어 내 연락처 목록으로 이메일 캠페인을 보내면 트래픽 증가 효과가 더욱 증폭합니다.

 

이메일 제목과 본문 디자인 및 레이아웃, 카피라이트를 정성스레 꾸며서 보내면 랜딩 페이지의 방문 횟수가 눈에 띄게 증가하는 것을 보실 수 있을 것입니다. 이메일 마케팅을 어떻게 시작해야 할지 잘 감이 오지 않는다면 전문가가 제작한 이메일 마케팅 가이드를 살펴보세요.

 
 
 

03. SEO 최적화

검색 엔진의 결과 페이지에서 내 랜딩 페이지가 상위 노출되도록 함으로써 더 많은 방문자를 확보하세요. 내 콘텐츠가 상위에 노출될 수록 더 많은 사람들이 내 랜딩 페이지 링크를 클릭합니다.

SEO를 강화하기 위해 전략적으로 내 랜딩 페이지에 키워드를 추가하면 상위에 노출될 수 있습니다. 내 랜딩 페이지의 SEO를 최적하는 방법에 대해 더 자세히 알아보려면 키워드 리서치 방법에 대한 글을 읽어보세요.

04. 유료 광고

SNS 마케팅, 이메일 마케팅, SEO 최적화는 무료로 내 랜딩 페이지의 트래픽을 증가시킬 수 있는 방법입니다. 그런데 내 랜딩 페이지에 더 많은 사람들이 방문하길 바란다면 유료 광고를 통해 내 랜딩 페이지를 홍보하는 방법도 생각해 볼 수 있습니다.

 
  • 검색 결과 광고 Google 검색 결과 페이지에서 최상단에 위치한 광고 목록을 생각해 보세요. 바로 그 목록이 검색 결과 광고입니다. 검색 결과 광고는 내가 정의한 키워드를 기반으로 사람들이 Google이나 기타 다른 검색 엔진에서 내가 정의한 키워드를 포함하는 검색어로 검색을 하면 내 광고가 나타나게 됩니다.
 
  • SNS 광고 유료 SNS 게시물을 제작하면 Facebook과 같은 SNS 플랫폼이 타깃 고객에 해당하는 사람들의 피드에서 내 게시물을 홍보합니다. SNS 광고의 장점은 내 제품 또는 서비스에 관심을 가질 만한 사람들이나 관련된 사람들이 광고를 보게 되기 때문에 더 많은 잠재 고객을 확보할 수 있다는 것입니다.
 
  • 광고 배치 또 다른 선택지로는 타사의 광고 도구를 사용해서 내 고객이 자주 방문할 만한 웹사이트에 배너를 다는 것입니다.
 

광고의 목적이 무엇이냐에 따라서 다양한 종류의 광고를 제작하거나 한 가지 광고 플랫폼에 집중할 수 있습니다. 어떤 방식을 선택하든지 간에 중요한 것은 꾸준하게 광고 효과를 모니터링하면서 내 비즈니스에 적합한 광고를 적용하는 것입니다.

랜딩 페이지의 이점

 
 

랜딩 페이지는 내 브랜드에 어마어마한 이점을 제공합니다. 이 강력한 마케팅 도구가 어떻게 내 비즈니스를 성장시킬 수 있는지에 대한 방법을 정리해 보겠습니다.

첫째, 랜딩 페이지는 전환율을 극적으로 향상시킬 수 있습니다. 앞서 언급했듯이 랜딩 페이지는 단일 목적에 집중하여 방문자가 특정 행동을 취하도록 유도합니다. 그렇게 함으로써 익명의 방문자들부터 잠재 고객까지, 마침내는 구매 의사가 있는 고객들까지 마케팅 깔때기에 들어오게 해 아래로 이동시킵니다.

둘째, 랜딩 페이지는 고객에 대한 가치 있는 통찰력을 제공합니다. 내 랜딩 페이지에 등록 양식이 포함되어 있다면 목표 시장을 더 잘 이해하기 위해 고객의 연락처 정보와 더불어 인구 통계, 경력에 관한 정보를 요청할 수 있습니다. 게다가, 내 랜딩 페이지 홍보에 효과가 있거나 혹은 효과가 없는 채널들을 분석함으로써 내 잠재 고객들의 관심사와 습관에 대해 많은 것을 알 수 있습니다. 이 정보를 이용해서 전반적으로 타깃 대상을 정하기 위한 노력을 최적화할 수 있습니다.

마지막으로, 랜딩 페이지는 측정이 가능합니다. 전환율을 분석하여 어떤 마케팅 캠페인이 효과적이며 어떻게 진행되고 있는지 알 수 있습니다. 유료 광고 게시물 또는 이메일 마케팅 캠페인 등을 통해 트래픽이 어디서 발생하는지 살펴보고, 어떤 마케팅 애셋이 가장 효과적인지를 확인하세요.

이제까지 소개해드렸듯이 랜딩 페이지는 잠재 고객을 확보하고, 적절한 고객을 찾도록 도와주며, 마케팅 전략의 방향을 전반적으로 알리는 데 중요한 역할을 합니다. 아직 랜딩 페이지를 제작하지 않았다면 무료 랜딩 페이지 템플릿을 살펴보고, 랜딩 페이지 제작을 시작해 보세요.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

https://ko.wix.com/blog/post/what-are-landing-pages-how-to-use-them-wisely

 

랜딩 페이지란 무엇인가요? 완벽 가이드

온라인 마케팅을 항상 신경 써야 하는 요즘, 강력한 마케팅 전략을 위한 효과적인 도구로 주목받으며 떠오르고 랜딩 페이지에 대해 자세히 알아볼까요?

ko.wix.com

 

반응형
반응형

smile-o   meh-o  frown-o

https://fontawesome.com/v4/icon/smile-o

 

fa-smile-o: Font Awesome Icons

Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des

fontawesome.com

https://fontawesome.com/v4/icon/meh-o

 

fa-meh-o: Font Awesome Icons

Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des

fontawesome.com

https://fontawesome.com/v4/icon/frown-o

 

fa-frown-o: Font Awesome Icons

Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des

fontawesome.com

 

반응형
반응형

반응형 웹 디자인의 9가지 기본 원칙

https://knulab.com/archives/1153

 

반응형 웹 디자인의 9가지 기본 원칙 – KNULAB

반응형 웹 디자인은 다중 스크린 문제에 대한 훌륭한 솔루션이지만 인쇄 관점에서 볼 때 어려움을 겪습니다. 고정 된 페이지 크기가 없으며, 밀리미터 또는 인치가 없으며, 물리적 인 제약이 없

knulab.com

 

반응형
반응형

이미지 갤러리 한 줄에 4개씩 보여지다가, 모바일 세로일때 (가로 480px 이하일때) 한 줄에 2개씩 보여주기. 

이미지는 width=100% 로 하고 넓이는 div에서 조절. 

object-fit:contain

<div>
 	<div class='img_contain_left' ><img src='image/1번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/2번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/3번.jpg' width='100%' ></div>
 	<div class='img_contain_left' ><img src='image/4번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/5번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/6번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/7번.jpg' width='100%'  ></div>
 	<div class='img_contain_end'  ><img src='image/8번.jpg' width='200px'  ></div>
 </div>
    @media screen and (min-width: 480px) {                
        .img_contain_left {
        width:23.5%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
        .img_contain_end {
        width:23.5%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
    }
    
    @media screen and (max-width: 480px) {    
        .img_contain_left {
        width:47%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
        .img_contain_end {
        width:47%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
    }

1. meta viewport 설정

<meta name="viewport" content="width=device-width, initial-scale=1" />

 

2. 4개의 반응형 분기점

- 낮은 해상도의 PC, 태블릿 가로 : ~1024px

- 태블릿 가로 : 768px ~ 1023px

- 모바일 가로, 태블릿 : 480px ~ 767px

- 모바일 : ~480px

 

3. 3개의 반응형 분기점

- PC : 1024px ~

- 태블릿 가로, 세로 : 768px ~ 1023px

- 모바일 가로, 세로 : ~768px

 

4. Media Query 사용법

@media screen and (min-width:1024px) {
	/* Desktop */
}
@media screen and (min-width:768px) and (max-width: 1023px) {
	/* Tablet */
}
@media screen and (max-width:767px){ 
	/* Mobile */
}

5. PC / Tablet / Mobile 구분해서 CSS 파일 작성 

<link href="style_pc.css" media="screen and (min-width:1024px)" rel="stylesheet" />
<link href="style_tablet.css" media="screen and (min-width:768px) and (max-width:1023px)" rel="stylesheet" />
<link href="style_mobile.css" media="screen and (min-width:320px) and (max-width:767px)" rel="stylesheet" />

 

https://record22.tistory.com/98

반응형
반응형

피그마 Figma, 주목받는 UI GUI 디자인 프로그램

 

https://www.figma.com/

 

Figma: the collaborative interface design tool.

Build better products as a team. Design, prototype, and gather feedback all in one place with Figma.

www.figma.com

1) 윈도우OS, 맥OS 대응 + 웹 브라우저를 통한 디자인 진행

  • 웹 기반 브라우저로 사용하여 프로그램 활용 범위가 용이하며 앱 설치를 하지 않아도 됩니다.
    → 스케치는 맥OS에서만 사용 가능하지만, 피그마는 윈도우OS 및 웹 브라우저에서도 사용할 수 있습니다.
  • 웹 브라우저가 아니라도 컴퓨터에 직접 (네이티브) 프로그램을 설치하여 사용할 수도 있으므로 빠르게 작업을 진행할 수 있습니다.

2) 실시간 협업 시스템 (공동 라이브 디자인)

  • 웹 기반 브라우저 프로그램으로서, 피그마 계정 소유자가 링크를 공유하여 여러 명이 아트 보드를 확인하며 동시에 온라인으로 실시간 작업을 진행할 수 있습니다.
  • 개발자가 참조할 수 있는 정보를 주는 ‘개발 툴바’가 있어 개발자와 소통에 매우 효과적입니다.
    마우스 툴바로도 수치값을 확인할 수 있어 가이드라인이 없어도 빠른 작업이 가능합니다.
  • 스케치는 제플린 zeplin이라는 앱을 따로 사용하여 (핸드오프) 작업물을 내보내는 방식으로 개발자와 소통하는 반면, 피그마는 앱 하나에서 바로 핸드오프 기능을  사용할 수 있습니다.

3) 버전 히스토리 관리

  • 히스토리 영역을 통해 협업자 중 누가 무엇을 변경했는지 확인하고, 필요에 따라 날짜&시간별로 기록되어 있는 히스토리를 확인할 수 있습니다. 때문에 버전 관리 필요 없이 히스토리 기능을 사용하여 편리하게 버전 관리가 가능합니다.
  • 포토샵과는 다르게 사용자가 날짜를 지정하여 저장할 수 있으며, 최대 30일까지 히스토리 저장이 가능합니다.
  • 히스토리뿐만 아니라 피그마 파일로도 저장이 가능하므로 필요시 파일로 내보내기 하여 파일을 관리하실 수 있습니다.

4) 최적화된 어댑티브(ADAPTIVE) 레이아웃 시스템

  • 포토샵은 해상도에 맞추어 매번 새롭게 작업을 해야 하는 것에 비해, 피그마는 외곽 선을 조정하는 것만으로도 대부분의 콘텐츠 레이아웃을 크기에 맞게 자동 조정해 줍니다.

5) SKETCH 파일과의 연동

  • 기존에 작업하던 스케치 파일들을 피그마에 임포트 하여 작업할 수 있습니다.
  • 현재 온라인에 배포되어 있는 스케치 UI 키트들을 피그마에서도 사용할 수 있습니다.

6) 프로토타이핑 PROTOTYPING

  • 직관적인 인터페이스로 UI 상호작용 및 애니메이션 제작이 가능합니다.
  • 클릭/호버/버튼 동작 등 단순한 인터렉션을 넣어 프로토타입을 제작할 수 있습니다.
  • 모바일에 최적화되어있어 플레이 시 프레임 및 모멘텀 스크롤과 같은 세부적인 부분의 프로토타입 또한 실제 화면처럼 느낄 수 있습니다.

장점

  • 스케치와 거의 비슷한 인터페이스를 다양한 환경에서 사용하실 수 있습니다.
  • 윈도우와 맥 모두 호환이 가능하여 사용 환경이 넓습니다.
  • 프로그램을 설치하지 않아도 사용할 수 있고, 1인은 무료로 사용 가능합니다. 

단점

  • 스케치에서 옮겨올 시 폰트가 깨질 가능성이 높습니다.
    *특히 한글 폰트는 무조건 깨집니다. 앱으로 사용할 시 폰트 깨짐 현상이 줄어듭니다.
  • 심볼 기능이 없으나, 스케치에서 옮겨온 것은 사용이 가능합니다, 단 Figma → Sketch로 파일을 옮기는 것은 불가능합니다.

출처 : https://medium.com/designcodeio/figma-vs-sketch-c01e5e74eddd#.jufkza6p1

 

Figma VS Sketch

Figma is like Sketch in the browser with real-time collaboration.

medium.com

 

.

반응형

+ Recent posts