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

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

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

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

Life in VOGUE 프로젝트는 2018년부터 오프라인 공간에서 디자인과 패션을 접목하여 진행된 복합 프로젝트 입니다. 올해는 비대면 전시를 위해 온라인상에 VR로 가상의 빌딩을 제작하여 아티스트의 공간 디자인 프로젝트를 소개하는 사이트를 오픈했는데, 차분하면서도 고급스러운 기조로 전개되는 UI와 함께 아티스트의 작품들을 층별로 전시하여 통상적인 가상 공간 전개 방식인 360도 영상이나 커다란 갤러리 공간에 전시된 작품을 감상하는 방식이 아닌 색다른 방법으로 풀어낸 부분이 인상적입니다. 가상의 빌딩을 인지시켜주는 예쁜 일러스트로 제작된 페이퍼북으로부터 시작하여 페이지를 넘기면 엘리베이터 문 팝업 페이지가 등장하여 층을 이동하는 버튼을 누를 수 있도록 화면이 연결됩니다. 전체 메뉴 UI를 엘리베이터의 ..

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

position:absolute 일 때 가운데 정렬하는 방법 left:50%; transform:translateX(-50%;) *크로스 브라우징 사용 주의

이미지 흑백처리 CSS 이미지 작업 없이 CSS 코드만으로 흑백 처리하는 방법 마우스 hover 효과 적용시 유용하다.

멋진 명조체로 디자인된 웹사이트 11 을 소개합니다. Craig Reynolds 뉴욕 출신 Craig Reynolds 라는 디자이너의 포트폴리오 사이트로 마우스 오버 시 타이포 디자인 위로 이미지가 커서에 따라 움직이며 나타나는 효과가 인상적 입니다. 명조체와 이미지 페이드 효과가 분위기 있는 웹 디자인을 보여주고 있고, 타이틀 hover 시 해당하는 콘텐츠를 이미지로 보여주어 더욱 직관적입니다. Marvin Schwaibold 디자이너의 포트폴리오 사이트입니다. 포트폴리오의 썸네일, 상징적인 이미지와 함께 잘 보여주고 있습니다. 정형화된 레이아웃이 아닌 스크롤 인터랙션으로 이미지가 등장하는 방식이 자유로움을 느끼게 해줍니다. 특정 아이콘을 로고화하여 표현한 점이 눈여겨볼만 합니다. reiter-fris..

웹에 최적화된 이미지 파일 유형인 .svg 아이콘을 무료로 다운로드 할 수 있는 사이트를 소개합니다. feather https://feathericons.com/ 지속적으로 새로운 아이콘을 업데이트하는 듯 합니다. png로 크게 키우고 이미지를 작게 조절해도 깨지기 일쑤인 아이콘 이미지 파일을 SVG 유형으로 사용할 수 있고, 깔끔한 디자인이 포인트인 고마운 무료 사이트입니다. 제작자 Colebemis 원하는 아이콘을 클릭하면 바로 파일이 다운로드 됩니다. Size와 Stoke width를 조절하여 원하는 느낌의 아이콘 디자인으로 변경하여 다운로드도 가능합니다. Color 코드를 입력하여 컬러 변경도 가능합니다. 상단의 Reset 버튼을 클릭 시 모든 설정이 초기화됩니다. feather에서 다운로드한 s..

웹디자인에 유용한 여름테마 컬러 팔레트를 제작하였습니다. 이미지 수정 금지 및 출처를 밝히고 자유로운 배포 가능합니다. @dbre.co.kr Summer flower color palette Flower and bees color palette Fruits color palette Summer icecream color palette Summer beach color palette

여러개의 페이지로 생성할만한 충분한 양의 콘텐츠가 없을 때 소량의 콘텐츠와 텍스트만으로도 멋진 웹사이트를 구현할 수 있는 원페이지형 웹사이트 21가지를 소개합니다. 원페이지 웹사이트란 접속한 전면페이지에서 스크롤 다운으로 전체 메뉴가 구성되어 별도의 페이지 이동이 없이 전체 스크롤 페이지 내에서 위치를 이동할 수 있도록 구현된 웹 페이지입니다. 원페이지 웹사이트는 콘텐츠의 양이 적어 웹사이트 내에서 머물 수 있는 요소가 적을 수 있지만, 대신 스크롤을 내리고 슬라이드를 탐험할 수 있도록 다양한 인터랙션을 적용하면 콘텐츠의 양이 많은 웹사이트보다 콘셉을 전달하고 감각을 표현하는 데에 더욱 효과적일 수 있습니다. 요즘 많은 브랜드와 기업들이 단기적인 캠페인을 홍보하거나 마이크로사이트 등으로 활용하고 있습ㄴ다..

기존에는 맥에 otf 유형의 폰트 파일만 사용이 가능했는데, 요즘에는 ttf 파일도 가능하다고 하네요. 맥에 폰트 설치하는 방법입니다. 저는 무료 영문폰트는 dafont 라는 곳에서 주로 다운로드합니다. 고딕, 명조, 핸드라이팅 등 폰트의 성격 별로 잘 나위어져있고, 영문폰트라 구매가 저렴하며, 일부는 개인 사용 무료 또는 100% 무료인 경우가 많아 잘 사용하고 있어요. 가장 큰 편리한 점은 내가 적용하고자 하는 텍스트를 해당 폰트로 미리보기하여 검색할 수 있다는 점입니다. dafont는 일반 작가들이 폰트를 업로드할 수 있는 사이트로, 저도 hapole 폰트를 만들어 배포하기도 했습니다. Hapole font Download 여기서 폰트를 다운받았는데, 맥에는 어떻게 적용할까요? 맥에 폰트 설치하기 ..

아크릴을 소재로 한 멋진 디자인들을 소개합니다. kisdio THE CURTIS CASA paperartists moodyboard Marijke sabine_marcelis CalligraphyKE biasol thebrandidentity imprimeriedumarais. oflux 다음에 더 유익한 콘텐츠로 찾아올게요!

[Full stack Designer - Publishing] 풀스택 디자이너가 되기 위한 첫 걸음, 퍼블리싱 공부를 저는 cafe24 에디터로 이것저것 수정하면서 자연스레 익히게 됐어요. 하지만 cafe24 에디터는 cafe24에서만 사용하는 코드들이 있고, 공개되어있지 않은 소스들도 많아서 자유로운 수정에는 한계가 있습니다. 무료 호스팅이기 때문에 수정의 범위가 제한되어있는 것은 당연하겠죠. 그래도 무료 호스팅에서 이만큼의 기능을을 모두 무료로 사용할 수 있다는 것은 큰 장점입니다. 많이들 아시겠지만 cafe24는 쇼핑몰에 특화된 무료 이미지호스팅으로 관리자와 ftp까지 제공하는 혜자로운 서비스입니다. 최근에는 스마트모드와 에디봇이라는 더 쉽고 편리하게 UI가 개선된 형태의 서비스를 제공하고 있어 진..

[맥/맥북 초보탈출] 카카오톡이나 기타 링크를 바로 클릭했을 때 맥에서 바로 safari로 연결되어 불편하셨던 경험 있으신가요? 익스플로러가 지원을 중단하면서 많은 유저들이 크롬으로 이동했는데, 크롬의 북마크 링크와 구글 서비스들을 모두 연동해서 사용하다보면 safari가 여간 불편하지 않을 수 없습니다. 물론 아이폰에서는 safari가 익숙해서 아이폰은 무조건 safari를 이용하고 있지만요. 크롬에서는 북마크바에 넣기만 하면 구글아이디로 로그인 시 모든 북마크를 연동할 수 있어 컴퓨터를 바꿔 사용해도 북마크에 즐겨찾기된 링크들을 모두 똑같이 연동해서 사용할 수 있다는 것이 큰 장점이에요. 맥 기본 브라우저 설정 변경하기 맥에서 기본 브라우저가 safari로 되어있는 것을 변경하려고 하니 검색 결과는 ..

2020년의 웹디자인 트렌드를 6가지 키워드로 살펴보았습니다. HTML5와 CSS3가 도입되면서 스크립트가 아닌 간단한 코딩으로 다양한 소스의 구현이 원활해짐에 따라 배경, 이미지, 텍스트가 각각의 요소로써 사용자의 행동에 따라 반응하는 인터랙션이 가미된 웹사이트가 늘어나고 있습니다. 감각적인 컨셉의 디자인임에도 정지된 이미지가 아닌 몇 가지 요소에 모션이 적용되어 웹상에서 더욱 생동감있는 경험을 제공하며, 이는 사용자가 인식하는 해당 브랜드의 가치를 더욱 높여줍니다. 2020 Web design TREND 1. 풀스크린 와이드 전면페이지 2. 스크롤 인터랙션 3. 로딩 아이콘 4. 볼드/컬러 텍스트 5. 스토리텔링 6. 일러스트레이션 1. 풀스크린 와이드 전면페이지 스크롤 없는 와이드형태의 전면페이지 ..