인스타그램 피드에 꾸준히 게시물을 올리기가 쉽지 않죠. 그래서 저는 30일짜리 캘린더를 만들어, 콘텐츠 기획을 미리 설정하고, 필요한 이미지, 캡션, 해시태그까지 모두 준비해 매일 손쉽게 발행할 수 있는 콘텐츠 기획 양식을 만들었습니다.이 양식은 한 달 동안 사용할 수 있는 30일치 플랜입니다.다음 달 기획을 추가할 때는 페이지를 새로 만들어 레퍼런스 이미지, 제목, 캡션, 해시태그 등 미리 세팅해두면, 디자인 콘텐츠 작업이 빠르면 30분, 길어도 1시간 안에 끝낼 수 있어요.인스타그램 콘텐츠 발행 시간을 단축하고 사전 기획으로 마케팅 플랜을 구성할 수 있는 콘텐츠 캘린더 제작 방법을 공유합니다. 직접 만드는 게 번거로우시다면, 제가 제공하는 양식을 사용해보세요. 무료 다운로드 링크를 포스팅 하단에 첨부..

요즘 피그마로 웹 기획을 진행하는 프로젝트들이 많아졌습니다.국내 대표 에이전시인 P 사에서도 피그마로 기획하는 클래스 상품을 오픈한 걸 보면 대세는 피그마인 것 같습니다. 피그마로 웹 기획 시 장점웹기획을 피그마로 하게 되면 다양한 장점이 있는데요.전통적인 방식인 파워포인트를 벗어나 유연한 UI 가이드의 변경 적용이 쉽습니다. 버튼 하나만 수정 되어도 매 페이지의 버튼을 바꿔주어야 하는 ppt와는 달리 다이나믹 컴포넌트라는 기능을 활용하면 피그마에서는 컴포넌트 하나만 바꿔주어도 모든 페이지에 연결된 컴포넌트가 변경됩니다.페이지 이동이 쉬워 작업시간을 획기적으로 줄여줍니다. 하나의 페이지에 많은 내용을 담게 되는 기획문서는 100페이지가 넘는 것은 일도 아니지요. 이럴 때 프로세스를 설명하기 위해 페이지 ..

로컬 폰트를 웹폰트로 적용하는 방법로컬에 설치된 폰트 파일을 웹사이트에서 사용하고 싶지만, 제공되는 웹폰트 링크가 없다면 다음과 같은 방법을 통해 웹폰트로 사용할 수 있습니다. 1. 웹폰트 적용 css 코드 작성먼저, 아래의 CSS 코드를 작성하여 웹폰트를 설정합니다 :@font-face {font-family: 'NanumSquare';font-weight: 400;src: url(NanumSquareR.eot);src: url(NanumSquareR.eot?#iefix) format('embedded-opentype'),url(NanumSquareR.woff) format('woff'),url(NanumSquareR.ttf) format('truetype');}이 코드를 'style.css' 또는 '..

내가 보고 있는 쇼핑몰 어떤 솔루션(카페24, 고도몰) 사용했는지 확인하는 방법 쇼핑몰 운영 담당자분들이 가장 많이 궁금해하시는 부분은 바로 내가 운영중인 쇼핑몰 솔루션에서 어느 범위까지 수정이 가능한가 입니다. 퍼블리싱 의뢰 또는 문의를 받아서 진행하다보면 '내가 원하는 기능은 이런 건데, 우리 사이트에서 수정이 가능한가요?', 또는 '여기 레퍼런스 사이트에서는 이런 게 되는데, 우리도 똑같이 수정하고 싶어요.' 가 많은데요. 쇼핑몰 솔루션에 따라 수정할 수 있는 범위나, 가능 여부, 수정 방식 등이 모두 상이하다보니 내가 보고 있는 쇼핑몰이 어떤 솔루션을 사용했는지 파악할 수 있다면 가능 여부에 대한 파악이 조금 쉬울 수 있겠습니다. 왜냐하면 솔루션에 따라서 카테고리로 사용하는 상품 분류나 게시판 분..

웹, 앱, 서비스 기획 문서를 작성할 때는 주로 power point 를 사용하게 됩니다. 화면 레이아웃이나 유저 플로우 등 다양한 프로세스를 도형을 이용해서 표현이 가능해 가장 편리하고 버전에 관계 없이 호환되다보니 많은 곳에서 주로 사용하는 툴인데요. 그 중에서도 기획 문서 내 플로우차트를 작성 시에 흐름을 표현하는 화살표 등의 추가가 더 쉽고 플로우차트 전용 도형 등이 제공되는 무료 툴이 있어 소개해드리려고 합니다. Diagrams.net diagrams.net은 구글 계정과 연동하여 작성한 flowchart를 다양한 이미지 유형으로 추출할 수 있습니다. 또 완성본은 로컬 드라이브 뿐 아니라, 구글 드라이브나 깃허브에 저장도 가능한 온라인 기반의 툴입니다. diagrams.net 사용 방법 1. 새..

사용하던 cafe24 호스팅 만료 후 2개월이 지나 연장이 불가하다면? 사용하던 cafe24 호스팅이 있습니다. 소개용 개인 웹사이트 제작이라 대략 틀만 잡아놓고, 메인 화면 채우고 서브페이지 콘텐츠를 채워 나가다가 디자인을 리뉴얼해야 할 듯 하여 디자인을 다시 제작하던 중 다른 일 때문에 잠깐 손을 놓아두었던 프로젝트. cafe24 호스팅 만료되었다는 메일은 받았지만 다른 일로 바빠 까맣게 잊고 지내다 5개월 정도가 지났을 즈음 생각이 들어 어느날 연장하러 cafe24에 접속하니 만료되어 더이상 연장이 불가하다는 안내 문구가 있습니다. 이럴수가... 연장이 불가한 것인가? 정말 방법은 없는것인가? 열심히 검색해보았지만 결론은, 만료 2개월 후에는 연장 불가. 서버 데이터 용량 문제로 만료된 데이터는 2..

쇼핑몰, 사이트 내 가로로 흐르는 전광판 텍스트 만들기 최근 트렌디한 웹사이트에서 볼 수 있는 가로로 흐르는 전광판의 역할을 하는 텍스트를 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 삽입 미리보기할 수 없는 소스 텍스트가 삽입된 사이트의 예시입니다. 적용된 사이트 확인하기 이 글이 도움되셨다면 댓글과 공감으로 응원해주세요 🥳 궁금하신 점은 댓글 남겨주세요.

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

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

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