반응형

테크

[UI/UX] 토스 페이먼츠 결제 UX 사례 스터디

최근 토스 페이먼츠 결제를 처음 해봤습니다. 기존 PG사 결제와 다르게 역시 토스답게 가장 편리한 UX를 구현한 것 같아 공유합니다. 우선 온라인 쇼핑몰에서 토스페이먼츠로 결제하기를 누르면 위와 같은 팝업 창이 뜹니다. 로그인, 이름, 주민등록번호 앞자리, 휴대폰인증 등 다 생략하고 휴대폰번호와 생년월일 6자리만 입력하면 해당 정보로 가입한 계정이 토스앱에서 결제할 수 있도록 연동됩니다. 문자를 보내고 또 링크를 클릭하는 게 아니라 바로 앱에서 결제 알림을 보내주니 정말 편하더라구요. '혹시, 알림이 안 왔나요?'와 같은 마이크로카피도 토스가 잘 하는 부분 중 하나죠. 대화형 마이크로카피로 고객에게 친숙한 서비스로 인식되고 있습니다. 토스페이먼츠로 결제 시 연계 제공되는 할인 혜택과 함께 놀라웠던 것은,..

테크 2022.02.15

[cafe24] 상세페이지 내에 동영상 삽입하기

cafe24 쇼핑몰 상세페이지 내 동영상 삽입하기 cafe24 쇼핑몰의 상세페이지를 전체 통이미지가 아닌 html로 작성하여 동영상을 삽입할 수 있습니다. iframe은 뒤쳐진 기술인 듯 최근 활발히 사용되는 태그는 아닙니다만 여전히 동영상 삽입 코드로 iframe이 사용되고 있습니다. 1. 삽입할 동영상의 url을 준비합니다. 동영상을 업로드하거나, 업로드된 동영상 하단의 '공유'버튼을 클릭하여 url을 추출합니다. 2. 상세페이지 이미지를 cafe24 쇼핑몰 관리자의 ftp에 업로드합니다. cafe24 쇼핑몰 관리자 접속 > ftp (상단 우측메뉴) > 파일 업로더 (좌측메뉴) 폴더는 별도로 생성하거나 사용하고 있는 이미지 폴더에 넣고 해당 경로를 포함한 이미지 URL을 추출합니다. 전체 상세페이지에..

테크 2022.02.11

cafe24 쇼핑몰 메인 하단에 인스타그램 연동 설치하는 방법

쇼핑몰 디자인 트렌드로 메인페이지 내에 인스타그램 콘텐츠 연동을 많이 사용하고 있습니다. cafe24 쇼핑몰 무료 템플릿에는 인스타그램이 연동되어있지 않아 별도로 연동 설치가 필요한데요, 무료로 인스타그램 위젯 설치하고 연동하는 방법입니다. cafe24 쇼핑몰 인스타그램 연동하기 1. cafe24 쇼핑몰 관리자에 로그인합니다. 2. 스마트모드로 접속된 경우 좌측 상단에서 프로모드로 변경하고, 상단 메뉴의 제일 오른쪽에 있는 '앱스토어' 메뉴를 클릭합니다. cafe24 앱스토어란? cafe24의 앱스토어는 cafe24에서 무료로 제공하는 다양한 api를 앱의 형태로 설치하여 관리할 수 있는 플랫폼입니다. 다양한 기능으로 개발된 앱들을 검색하여 무료 또는 유료로 사용할 수 있습니다. 3. 앱스토어 페이지 내..

테크 2022.02.10

피그마 웹 브라우저 버전에서 로컬폰트 사용하는 방법

피그마는 웹 브라우저에서 실시간으로 사용할 수 있는 반면, 데스크탑 어플리케이션으로 프로그램으로 사용도 가능한 두가지 방식으로 툴을 제공하고 있습니다. 저는 어디서나 이용이 가능한 웹 브라우저를 즐겨 사용하는데요. 피그마 웹 브라우저 버전 사용이 조금 불편하다면 불편한 점 한가지는 브라우저를 열고있는 데스크탑 컴퓨터의 로컬 폰트를 불러올 수 없어 컴퓨터를 바꿔가며 사용할 때 호환성이 떨어진다는 것입니다. 하지만 피그마 웹 브라우저에서도 로컬폰트를 동기화하여 사용할 수 있는 방법은 있습니다. 피그마를 로그인하자마자 실시간으로 연동되지는 않지만 플러그인 하나만 설치하면 바로 컴퓨터에 있는 폰트를 피그마 웹에서도 바로 사용할 수 있습니다. 피그마에서 불러올 수 없는 폰트를 사용한 경우 사용한 폰트 그대로 볼 ..

테크 2022.01.27

[CSS] 멋져보이는 웹디자인 포인트 - 마우스커서 URL 이미지로 바꾸기

멋진 웹사이트는 인터랙션이 화려한 것이 특징이라면 특징입니다. 사용자의 행동에 따라 적절한 반응을 실시간으로 해준다면 웹서핑에 재미를 붙여 체류 시간을 더 높여줄 수 있죠. 그 중 멋져보이는 웹사이트의 특징이 되는 포인트 중 하나인 마우스커서 이미지 바꾸는 방법입니다. 웹 기본 커서 지정 속성 웹 기본으로 이미지 추가 없이 제공되는 커서 속성은 다음과 같습니다. cursor : help; cursor : wait; cursor : crosshair; cursor : not-allowed; cursor : zoom-in; cursor : grab; 하지만 제공되는 아이콘을 사용할 게 아니라, 별도의 디자인된 아이콘이나 사진 이미지로 적용하고 싶다면 url 설정이 필요한데요. 준비물은 png 또는 svg 이..

테크 2022.01.21

[CSS] 나이키사이트처럼 배경 블러 효과 넣기

최근 마우스오버나 딤처리 배경에서 블러효과가 들어간 디자인을 많이 보실 수 있는데요, 나이키 공식 웹사이트에서는 gnb에서 메가메뉴를 펼쳤을 때 나머지 웹페이지의 배경을 어둡게 dim처리 하면서 블러효과를 주어 포커싱되는 인터랙션을 사용하고 있습니다. 이 배경 블러 효과를 사용하는 소스는 css 스타일 소스로 backdrop-filter 입니다. backdrop filter로 검색하시면 MDN 문서에서 다양한 적용 값을 확인해보실 수 있어요. 나이키 공식 웹사이트에서의 적용 사례입니다. gnb가 스크롤 시 상단 고정될 때 gnb 메뉴 자체의 배경에 blur 효과를 주어 배경이 100% 일 때보다 답답한 느낌을 줄이고 투명도로 인한 개방감을 준 사례입니다. div의 배경컬러를 지정할 때 함께 사용하는 속성..

테크 2021.10.14

[CSS] css 컬러 hex 코드가 6자리가 아닌 8자리일 때

최근 퍼블리싱 코딩 마크업 작업을 하던 중 기존에 작업했던 dbre 사이트의 디자인 중 일부에서 신기한 부분을 발견했습니다. 컬러 헥사코드에 opacity를 준 rgba 코드를 사용해서 배경 컬러를 작업했는데, 크롬 개발자도구에서 보니 헥사코드가 6자리가 아닌 8자리로 표기되는 것이었지요. 위 이미지에서 background 를 보시면 #0047FFCC 라고 8자리로 되어있는 것을 보실 수 있는데요, 보통 우리가 알고있는 컬러 지정 css 코드는 hex 코드 6자리와 rgba(255,255,255,0.8) 과 같은 rgb 형태입니다. rgb 형태는 (r값,g값,b값,1을 100%로 하는 opacity 소수점자릿수) 로 지정을 하게 되는데, 끝자리의 소수점자릿수가 투명도조절 값이 됩니다. 본래 해당 코드는 ..

테크 2021.09.29

[CSS] 웹사이트 사파리 브라우저에서 명조체로 보일 때 해결방법

사파리 브라우저에서 웹사이트 기본 폰트가 명조체로 보일 때 웹사이트를 사파리 브라우저에서 볼 때 가끔 고딕체나 특정 폰트로 지정한 부분이 기본 명조체로 보여질 때가 있습니다. 사파리의 고유 기본 폰트명을 고딕체로 설정해주지 않아서 생기는 이슈인데요. 크롬 브라우저에서는 'Noto Sans'로만 지정되어있어도 텍스트가 고딕 폰트로 정상적으로 노출되지만, 사파리 브라우저에서는 이렇게 기본 명조체로 나타나게 됩니다. 해당 부분의 css 소스에서 'Apple SD Gothic Neo'를 추가하면 해결됩니다. .text {font-family:'Noto Sans KR','Apple SD Gothic Neo',Sans-serif; } 위처럼 설정 시 '' 안에 들어간 폰트 순서대로 해당 폰트가 없는 경우 다음 폰트..

테크 2021.09.18

[UI/UX] 피그마 오토레이아웃으로 간격조정 자유롭게

Figma autolayout 피그마의 오토레이아웃이라는 기능 아시나요? 피그마는 웹디자인이나 UI/UX 디자인을 더욱 쉽게 만들어주는 온라인 툴인데요. 무료로 사용할 수 있고, 협업 시 동시작업이 가능한 환경을 만들어 주어 국내 사용자가 늘어나는 추세입니다. Gnb 메뉴를 만들 때나 메뉴 리스트 등을 만들 때 정렬이 필요한 오브젝트를 생성할 때 모두 오토레이아웃을 사용하여 디자인 수정이 더욱 원활하게 만들어줄 수 있습니다. 각각 텍스트 레이어로 만들어 어느정도 정렬을 해 두었으나, 메뉴를 추가 할 때 동일한 간격으로 자동 정렬되도록 하고싶습니다. 이 때 전체 메뉴를 선택한 상태에서 Shift + A 단축키를 이용하여 Auto layout으로 만들어줍니다. 오토레이아웃이 잘 생성되면 화면 하단의 중간에 ..

테크 2021.09.16

[무료템플릿] 디자이너가 만든것 같은 전자책 표지 무료로 만들기

요새 수익 자동화로 PDF 전자책 제작하시는 분이 많으신 듯 해요. 나만이 가진 노하우나 내 스토리를 목차를 구성하여 간단하게 책으로 만들면 누구나 작가가 될 수 있는 PDF 전자책. 크몽 플랫폼에서는 이 PDF 전자책 전용 카테고리가 생길 정도입니다. 많은 분들께서 도전하고 계시는 이 PDF 전자책 제작하는 데에 도움이 되실만한 전자책 커버 디자인 소스와 목업 파일을 준비했어요. 무료 목업파일과 무료 북커버 디자인 파일로 그럴듯한 전자책 썸네일을 만드는 방법을 소개해드립니다. 1. PDF 전자책 북커버 디자인 무료로 받기 freepik에 접속합니다. freepik은 무료 디자인 소스를 제공하고 있으며, 개인 사용을 위한 사용은 저작권 공유 링크를 함께 포함하여 게시할 경우 무료로 사용 가능하고, 상업적..

테크 2021.09.14

[cafe24 팁] 카페24 상단 띠배너 추가 설치 수정하기

아래로 스크롤 시 사라지고 닫기버튼으로 끌 수 있는 상단 띠배너 설치 방법입니다. 모든페이지 또는 특정페이지에 노출되도록 설정이 가능하고 즉각적인 POP로 활용하기 좋아 쇼핑몰 디자인에 자주 활용됩니다. 1. cafe24 쇼핑몰 관리자 > 프로모드 > 디자인관리 > 쇼핑몰 디자인 수정 접속하여 HTML 편집창을 열어줍니다. 2. 띠배너를 넣고자 하는 페이지를 열어 해당 코드를 추가합니다. 코드의 위치는 페이지 내 어디에 넣으셔도 상관 없습니다. 3. common.css 에 해당 코드를 추가합니다. layout / basic / css / common.css / * 띠 배너 css * / .promotionBanner { position:relative; overflow:hidden; text-align:..

테크 2021.08.10

[Tip] 스몰비즈니스를 계획하고 있다면 쇼핑몰 무료 제작 가능한 식스샵 PG가입비 지원 이벤트!

8/1까지 가입자(대략 9월 중순까지 PG계약이 완료)에 한하여 토스 페이먼츠 PG가입비를 지원하는 이벤트가 열렸습니다! 쇼핑몰 솔루션 여기저기 알아보던 스몰비즈니스 사장님들께 희소식!!!!!! 당장 공유하고자 내용 가져왔어요. (홍보비 안받음) 요새 토스페이먼츠 결제가 여러 서비스에서 많이 보이던데 공격적인 마케팅을 진행중인가 봅니다. 저는 주로 쇼핑몰 제작 시 cafe24를 사용하지만 커스터마이징이 다양하게 가능한 대신 전문가가 아니신 분들께는 쇼핑몰 수정이 다소 어려울 수 있죠. 식스샵의 심플한 템플릿 제작 방식으로 쉽게 쇼핑몰을 만들고 운영이 가능한데 1개월동안은 PG가입비(대략 22만원 선)를 무상으로 지원한다고 하니 이렇게 반가울 수가 없습니다. PG 가입비 지원받고 쇼핑몰 오픈하는 방법 1...

테크 2021.07.27

[CSS] 배경 이미지가 크롭된 텍스트 스타일 만들기 CSS

배경이미지가 텍스트 컬러로 적용되는 크롭 스타일의 텍스트 디자인 적용 예제입니다. 텍스트를 많이 입력하여 스크롤이 생기면 백그라운드 이미지를 고정시켜{background-attachment:fixed;} 텍스트만 스크롤되는 패럴랙스 스타일로도 적용해볼 수 있습니다. People will throw stones at you. Don't throw them back. Collect them all and build an empire. VIEW DEMO

테크 2021.06.09

[DESIGN] 유튜브 채널아트 쉽게 만드는 법 사이즈 가이드 (psd 파일 공유)

youtube channel art size guide 유튜브 채널아트를 디자인할 때 만들어야 할 여러가지 사이즈가 있죠? 다양한 브라우저 및 모바일 기기에서 잘 보여지도록 유튜브에서 가이드를 제공하고 있습니다. 이미지 크기 및 파일 가이드라인 업로드 최소 크기: 16:9 가로세로 비율의 2048x1152픽셀 텍스트 및 로고가 잘리지 않는 최소 크기: 1235x338픽셀 여기에서 벗어나는 부분은 특정 보기 설정 또는 기기에서 잘릴 수 있습니다. 파일 크기: 6MB 이하 더 쉽게 만들 수 있도록 가이드가 담긴 psd를 만들어 공유합니다. 유튜브 사이즈 가이드 psd 다운로드 가이드에 따라 제작하여 적용해보았습니다. 유튜브 사이즈 가이드 psd 파일 다운로드 이 글이 도움이 되었다면, 공감과 댓글 남겨주세요!

테크 2020.09.14
반응형