기획하는 디자이너

쇼핑몰, 사이트 내 가로로 흐르는 전광판 텍스트 만들기 최근 트렌디한 웹사이트에서 볼 수 있는 가로로 흐르는 전광판의 역할을 하는 텍스트를 CSS 만으로 만들 수 있는 방법을 소개해드립니다. moho design template glad moho design template glad moho design template glad moho design template glad moho design template glad moho design template glad 아래에서 예제를 확인해보세요. HTML 삽입 미리보기할 수 없는 소스 텍스트가 삽입된 사이트의 예시입니다. 적용된 사이트 확인하기 이 글이 도움되셨다면 댓글과 공감으로 응원해주세요 🥳 궁금하신 점은 댓글 남겨주세요.

HTML&CSS 2022. 4. 18. 20:05

웹디자인 트렌드 참고 사이트 5 IT업계, 웹 디자이너, UI/UX 분야에 종사하고 계신 분들이라면 웹디자인 트렌드에 항상 민감하게 반응하고 계실텐데요. 제가 참고하고 생각날 때 마다 검색해보는 웹디자인 트렌드 참고할만한 사이트 5가지를 소개해드립니다. 1. themeforest(envato market) 테마 포레스트, 씸포레스트, 엔바토마켓 등으로 불리우는 세계적으로 유명한 디자인 템플릿 소스 사이트입니다. 저는 워드프레스 사이트 제작을 위해 방문했다가 다양한 디자인 소스들에 매료되어 업데이트되는 최신 소스들을 검색하곤 합니다. 가끔 유튜브 추천 동영상으로 이 envato market에서 소개하는 최신 템플릿 소스 영상이 뜨기도 할 만큼 워낙 대형 플랫폼이고 사용자 규모가 크다 보니 실시간으로 업데이..

Design Trend 2022. 3. 31. 17:40

동영상이 재생되는 듯한 스크롤 이펙트 패럴랙스 사이트 5 애플의 신제품 홍보 페이지에서의 동영상과 같은 화려한 스크롤 인터랙션을 많이 경험해보셨을텐데요, 웹 프론트엔드 개발을 디자인과 결합하는 영역의 선구자라고도 할 수 있는 애플의 이러한 인터랙션 디자인은 최근 국내외 사이트에서 많은 적용 사례를 확인해볼 수 있습니다. 이제는 웹디자인 트렌드에서 빠질 수 없는 기술과 디자인의 결합이라고도 할 수 있습니다. 고도의 개발 기술을 요하는 인터랙션 디자인 예제를 가득 확인할 수 있는 멋진 사이트 5가지의 사례를 준비했습니다. 스크롤을 내릴수록 마치 한 편의 동영상이 재생되는 듯한 화려한 인터랙션을 확인할 수 있는 스크롤 이펙트 패럴랙스 디자인의 사이트를 소개합니다. 1. FLOEMA floema 주얼리 브랜드 ..

Design Trend 2022. 3. 14. 23:03

프로페셔널해 보이는 웹디자인을 위한 부가적 요소 몇 가지 웹디자인에 간단한 인터랙션을 조금만 더하면 프로페셔널해 보이는 몇 가지 요소들이 있습니다. 작은 효과들로 내 사이트를 풍성한 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..

Design Trend 2022. 2. 23. 18:00

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

HTML&CSS 2022. 2. 22. 23:31

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

IT Tip 2022. 2. 22. 01:03

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

HTML&CSS 2022. 2. 19. 02:51

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

IT Tip 2022. 2. 17. 23:17