프로페셔널해 보이는 웹디자인을 위한 부가적 요소 몇 가지 웹디자인에 간단한 인터랙션을 조금만 더하면 프로페셔널해 보이는 몇 가지 요소들이 있습니다. 작은 효과들로 내 사이트를 풍성한 UX web이 되도록 제작해보세요. 1. 블러 효과 filter:blur() 이전 콘텐츠에서도 한번 소개되었던 nike 사이트의 블러 효과입니다. 위와 같은 마우스오버 효과는 스크립트가 함께 추가되어야 하지만 단순한 hover 효과나 blur 효과 자체는 간단한 CSS만으로도 설정이 가능합니다. blur(0) /* No effect */ blur(8px) /* Blur with 8px radius */ blur(1.17rem) /* Blur with 1.17rem radius */ 블러 효과 적용을 원하는 이미지 소스의 cl..

cafe24 쇼핑몰 모자이크 룩북 슬라이드 갤러리 페이지 만들기 cafe24 브랜드 쇼핑몰을 오픈하려다 보면 이미지만 업로드해야하는 룩북 페이지가 고민인 분들이 많으실 것으로 생각됩니다. cafe24의 쇼핑몰 갤러리 게시판은 유료 템플릿에서도 크게 룩북 형태를 중심으로 고려되지 않은 디자인들이 많아 커스터마이징 요청사항으로 많이 들어오는 디자인 중 하나입니다. 또한 cafe24 쇼핑몰 솔루션에는 자체적으로 내부 스크립트가 내장되어있어 잘 되어있는 스크립트 라이브러리를 사용하더라도 적용이 어려운 부분이 많습니다. cafe24 쇼핑몰 사이트에 게시판을 사용하지 않고 별도의 룩북 갤러리 페이지를 만드는 방법을 알려드립니다. cafe24 쇼핑몰 룩북 페이지 디자인하기 우선 룩북페이지를 만들기 위해 룩북 이미지들..

cafe24 쇼핑몰에 기본으로 설치된 팝업 배너는 특정 조건에 의해 조정되지 않고 메인이나 특정 페이지에 항상 떠있도록 설정만 가능합니다. 팝업배너를 고객의 행동에 따라 맞춤형으로 띄우도록 하는 것이 쇼핑몰 UX를 고려할 때 중요하게 보아야 할 점이라고 할 수 있는데요. 예를 들어 회원가입 이전인 고객에게만 회원가입 관련 쿠폰을 띄우거나, 장바구니에 담은 제품이 있는 고객에게 장바구니 알림을 보내주는 등의 고객 맞춤형 팝업 입니다. 이런 세부 설정이 가능한 팝업을 띄울 수 있도록 하는 cafe24 쇼핑몰 인앱이 있습니다. 바로 '팝틴'입니다. 조건 설정 팝업 배너삽입 기능 팝틴 cafe24 앱스토어에서 '팝틴'을 검색하여 설치 후 나의 앱스토어 관리자 마이앱에 보시면 설치한 앱 리스트에 설치된 것을 확인..

cafe24 쇼핑몰 솔루션 이용 시 시스템에서 자동 발송되는 메일을 자동/수동으로 설정할 수 있습니다. 또한 아래 방법을 사용하여 이 자동메일 발송에서 메일의 내용이나 디자인도 변경이 가능합니다. 디자인 변경은 html을 사용하여 수정합니다. cafe24 쇼핑몰에서 자동 발송 메일 레이아웃 디자인 변경하기 1. 고객관리 > 자동메일발송설정 > 자동메일발송설정 메뉴로 접속합니다. 2. 자동메일 발송 리스트 중 수정하고자 하는 메일을 선택하여 우측의 '수정'버튼을 클릭합니다. 3. 수정 창이 뜨면 html 모드에서 디자인을 코드로 수정합니다. 자동 발송 이메일 디자인 활용 방법 자동 발송용 이메일의 템플릿 디자인도 구독용 이메일 템플릿의 방식처럼 웹사이트의 카테고리 링크를 넣어 미니 웹사이트처럼 제작하면 고..

인쇄용 그래픽 디자인은 주로 CMYK 컬러로 제작됩니다. 그런데 인쇄할 때 색상이 컴퓨터로 볼 떄의 색상과 많이 달랐던 경험이 있는 디자이너 분들이 많으실텐데요. CMYK 컬러를 팬톤 컬러 코드로 변경한 뒤 인쇄소에 팬톤값으로 전달하면 더 실제 색상과 유사한 색으로 인쇄가 가능합니다. 그래픽 프로그램에서 사용하는 CMYK 컬러 코드를 팬톤 컬러 값으로 변환하는 방법입니다. 1. CMYK 값을 팬톤 컬러 값으로 변환하여 인쇄하기 구글에서 cmyk to pantone 이라는 키워드로 검색하면 가장 먼저 뜨는 사이트로 접속합니다. 사이트 상단에 보시면 CMYK 각각의 코드 값을 넣어주는 필드가 있는데요. 여기에 내가 작업한 그래픽 파일의 각 컬러 값을 넣어주면 실제 팬톤 컬러 값으로 변환된 유사한 컬러들이 필..

behance 사이트에서 디자인 트렌드를 서치하시나요? 그렇다면 메인에 뜬 추천 디자인이나 검색을 통한 추천디자인만 보고 계시지는 않나요? 비핸스 사이트에서 국가별 최신 디자인 트렌드를 확인할 수 있는 방법을 알려드립니다. behance에서 국가별 최신 디자인 트렌드 확인하는 방법 비핸스(비한스) 메인 페이지에는 알고리즘을 통한 추천 포트폴리오가 굿디자인 위주로 리스팅 됩니다. 검색을 해도 키워드에 최적화된 포트폴리오가 최신순이 아닌 상태로 필터링 되는데요, 검색 하단의 필터 셀렉트 박스에서 Location > Country / Region 및 City 를 선택하면 해당 국가와 도시에 업로드된 포트폴리오를 확인할 수 있습니다. 특정 지역을 대상으로 하니 해당 지역 또는 국가의 트렌드를 확인해볼 수 있다는..

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

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

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

명품 브랜드의 웹사이트는 보통 어느 나라에서든 원활한 접근이 가능하도록 호환성을 높이고 누구나 편하게 볼 수 있도록 직관적인 UI를 사용하고 있기에 장식적 디자인 요소가 많은 편은 아닙니다. 폰트는 영문 위주이며 국가에 따라 기본이 되는 산세리프, 세리프 폰트를 사용하고 있습니다. 그럼에도 브랜드마다의 UI적 특성이 조금씩 다르고 또 보통의 브랜드 사이트들과 대표적 차이가 있는 부분들이 있어 몇 가지 명품 브랜드 웹사이트를 탐색해봤습니다. 1. 보테가 베네타 #기본레이아웃 #심플 보테가 베네타의 메인 이미지는 심플하게 대표 아이템의 아트워크 이미지 배너 1개로 구성 되어있습니다. 모바일 사이즈와 동일한 이미지를 PC에 사용하였고 PC버전 사이트 wrap 가로 사이즈는 1440px을 사용하고 있습니다. 글..