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을 사용하고 있습니다. 글..

behance에서 해외 디자이너들의 유려한 웹디자인 포트폴리오를 보면 화려한 인터랙션이 마치 모션그래픽처럼 멋지게 첨부되어있는 것을 볼 수 있습니다. App UI/UX 포트폴리오의 경우 프로토타입 툴을 이용해 동영상을 제작하기도 하지만, 웹디자인 포트폴리오는 퍼블리싱된 사이트에서 화면 녹화만으로도 깔끔하게 gif를 제작할 수 있습니다. 웹 포트폴리오 제작에 유용한 웹 화면 녹화를 통해 gif 만드는 방법 두 가지와 gif 저용량으로 변환하는 방법을 소개합니다. 1. 윈도우 화면 녹화 기능 사용하여 녹화하기 window key + G 윈도우 운영체제에서 Xbox Game center를 통해 자체 화면 녹화 기능을 제공하고 있습니다. window key + G 단축키를 통해 컴퓨터 화면을 녹화할 수 있습니다..

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

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

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

최근 퍼블리싱 코딩 마크업 작업을 하던 중 기존에 작업했던 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 소수점자릿수) 로 지정을 하게 되는데, 끝자리의 소수점자릿수가 투명도조절 값이 됩니다. 본래 해당 코드는 ..