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

멋진 웹사이트는 인터랙션이 화려한 것이 특징이라면 특징입니다. 사용자의 행동에 따라 적절한 반응을 실시간으로 해준다면 웹서핑에 재미를 붙여 체류 시간을 더 높여줄 수 있죠. 그 중 멋져보이는 웹사이트의 특징이 되는 포인트 중 하나인 마우스커서 이미지 바꾸는 방법입니다. 웹 기본 커서 지정 속성 웹 기본으로 이미지 추가 없이 제공되는 커서 속성은 다음과 같습니다. 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 소수점자릿수) 로 지정을 하게 되는데, 끝자리의 소수점자릿수가 투명도조절 값이 됩니다. 본래 해당 코드는 ..

지금까지는 깃허브를 사용하지 않다가 우연히 오늘 깃허브를 가입하게 되었습니다. 내부에 개발자가 있는 팀에서 근무를 할 때 웹개발자분은 깃허브를 유료로 개인사용하고 있었는데, 배워야지 하면서도 늘 미뤄두었던 것 중 하나였지요. 문득 자바스크립트 라이브러리를 검색하러 codepen에 들어갔다가 여러 템플릿을 확인하려면 로그인하라고 뜨기에 회원가입하려는데 '깃허브로 로그인하기'가 눈에 띄었습니다. 깃허브의 계정 정보로 두가지 다 이용할 수 있다고 하기에 깃허브에 가입을 하러 들어갔어요. 깃허브는 그 특유의 고양이 캐릭터가 귀엽다고 생각했는데 개발 관련 서비스 답게 개발자들의 소스코드 작성 창과 우주 그래픽을 활용하여 독특한 그래픽 UI를 연출하고 있었습니다. 회원가입 절차를 밟으려는데 회원가입 플로우의 UX가..

그래픽 디자인에서 세리프 폰트가 트렌드라는 것은 이미 의심할 필요 없는 사실이죠. 기존의 정형화된 세리프 폰트에서 다양한 곡선으로 변화된 디자인은 각각의 특성을 가지고 서로 다른 감성을 표현합니다. 각각의 개성이 뚜렷하지만 본질적인 세리프 폰트의 '신뢰', '권위', '전통적인'과 같은 의미는 그대로 유지하고 있습니다. 트렌디한 브랜딩에 도움이 될만한 세리프 폰트 9개의 리스트를 공유합니다. 약간의 변형과 추가 도형을 얹어 로고디자인을 바로 해도 손색이 없겠네요. 9개 폰트 중 일부는 100% 무료이지만, 일부는 Personal use only 입니다. 각 폰트 제작자의 라이센스를 참고 바랍니다. Derivia 100% free font download Coconat free for personal us..

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

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

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

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