최근 마우스오버나 딤처리 배경에서 블러효과가 들어간 디자인을 많이 보실 수 있는데요, 나이키 공식 웹사이트에서는 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:..

최근 어디에서나 보셨을 법한 웹/그래픽 디자인 트렌드는 #레트로, #로파이, #세리프, #아치 총 4가지 키워드로 이야기 될 수 있을 것 같습니다. 키워드에 따라 구분하여 웹디자인과 그래픽 디자인의 트렌드에 대하여 알아보겠습니다. 전반적으로는 아르데코와 캘리그라피를 합쳐놓은 듯한 우아하고 유려한 곡선을 가진 세리프 폰트가 많이 사용되고 있습니다. 이런 형태의 폰트 디자인도 새로이 많이 제작되는 듯 합니다. 어딘지 모르게 명화 속 비너스가 떠오르는 폰트 디자인은 주로 두세가지 컬러의 그라디언트 배경에 많이 사용되며, 이미지와 그라디언트 배경 모두에는 노이즈가 가미되어 있습니다. 또한 아치 형태의 이미지 크롭이 많이 등장하고, 빛을 형상화하는 기하학 도형이나 원형, 선들이 그래픽 요소로 적용됩니다. 웹디자인..

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