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

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

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

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

최근 토스 페이먼츠 결제를 처음 해봤습니다. 기존 PG사 결제와 다르게 역시 토스답게 가장 편리한 UX를 구현한 것 같아 공유합니다. 우선 온라인 쇼핑몰에서 토스페이먼츠로 결제하기를 누르면 위와 같은 팝업 창이 뜹니다. 로그인, 이름, 주민등록번호 앞자리, 휴대폰인증 등 다 생략하고 휴대폰번호와 생년월일 6자리만 입력하면 해당 정보로 가입한 계정이 토스앱에서 결제할 수 있도록 연동됩니다. 문자를 보내고 또 링크를 클릭하는 게 아니라 바로 앱에서 결제 알림을 보내주니 정말 편하더라구요. '혹시, 알림이 안 왔나요?'와 같은 마이크로카피도 토스가 잘 하는 부분 중 하나죠. 대화형 마이크로카피로 고객에게 친숙한 서비스로 인식되고 있습니다. 토스페이먼츠로 결제 시 연계 제공되는 할인 혜택과 함께 놀라웠던 것은,..

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

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

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

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

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