Read All 12

유튜브(Youtube) 채널 관련 이미지 업로드 최적 사이즈 (2022년 기준)

Youtube 채널 프로필, 채널아트, 영상 썸네일, 워터마크 최적화를 위한 사이즈 및 체크리스트 Youtube Profile Picture, Channel Art, Video Watermark, Thumbnail: optimization & best practices 유튜브 채널은 이제 너무 친숙하겠지만, 새로 채널을 개설하려는 유튜버나 채널 외관을 꾸미고 싶은 사용자에게 도움이 되고자 내용을 정리해봤습니다. 유튜브는 종종 인터페이스 업데이트와 기능 추가가 있기 때문에 오랜만에 영상을 업로드를 하는 경우엔 유튜브에서 새롭게 제공하는 서비스를 잘 활용할 수 있도록 새 옵션과 최적화된 규격을 확인하면 좋습니다. 프로필 사진 (Profile picture 혹은 Channel icon) 이미지 크기: 가로 8..

인스타그램 이미지 최적 사이즈 (2021년 업데이트)

Instagram 프로필, 포스팅, 스토리용 사진과 영상의 최적 사이즈 및 체크 리스트 기업의 마케팅, 개인 비즈니스 혹은 퍼스널 브랜딩 도구로 소셜미디어를 운영하는 사람이라면, 각 플랫폼에 최적화된 이미지 사이즈와 비율, 각 플랫폼 고유의 문법과 트렌드를 염두에 두고 그에 맞는 게시물을 작성할텐데요, 인스타그램의 이미지와 영상 사이즈, 파일 포맷 및 몇몇 요구사항을 정리해봤습니다. (2021년 업데이트) 프로필 사진 사이즈: 최소 110x100px, 비율 1:1 (정사각) 스마트폰에서 보여주는 프로필 사진의 크기는 110x110px, 데스크탑에서는 180x180px입니다. 하지만 선명한 프로필 이미지를 위해서는 큰 사이즈의 이미지 업로드를 권합니다. 고해상도 이미지를 올리면 인스타그램상에서 빠른 로딩을..

온라인 쇼핑 일러스트 4 - 패션 아이템

온라인 쇼핑 시리즈 4 - Shop Accessories Online 원본사이즈(3000x2000px) 이미지 Pixabay 다운로드 링크: pixabay.com/illustrations/online-shopping-accessories-bags-5717841/ Type 2 - 모노톤 원본사이즈(3000x1700px) 이미지 Pixabay 다운로드 링크: pixabay.com/illustrations/online-shopping-accessories-bags-5717848/ Type 3 - 그리드(grids) 스타일 원본사이즈(3000x1700px) 이미지 Pixabay 다운로드 링크: pixabay.com/illustrations/accessories-icons-fashion-scarf-5720270/..

Freebie/Images 2020.11.10

인스타그램 줄바꾸기, 엔터 적용 방법 (+원리)

인스타그램에서는 게시글이나 bio에 텍스트를 입력할 때 문단 사이 간격을 띄우기 위해 엔터를 여러 번 쳐도 업로드 후에 보면 의도한 레이아웃과 다른 경우가 많습니다. 인스타그램의 목적이 글보다는 이미지에 집중하는 것, 사용자의 시선이 한 이미지에만 머무르지 않고 많은 이미지를 (스크롤을 내려가며) 보게 하는 것이기 때문에 긴 글, 글 위주의 게시물은 본래의 취지에 맞지 않습니다. 심지어 사용자의 중도이탈의 원인이 되는 하이퍼링크도 제공하지 않는 등 텍스트 입력 부분이 상당히 제한되어 있습니다. 그러나 인스타그램 측의 의도가 그렇더라도, 사용자는 내 게시물을 눈에 잘 띄게 만들어야 하므로 줄 바꿈을 하고 싶을 때가 많습니다. 따라서 이용자들이 문단 사이 간격을 주는 방법을 만들고, 공유하고 있는데요, 대략..

무료 이미지 안전하게 사용하기

저작권 걱정없이 무료 이미지로 내 블로그 꾸미기 Pixabay, Freepik, Unsplash, Pexels, Flikr, Canva, etc... 블로그나 유튜브같은 온라인사이트에 게시물을 올리다보면 스톡이미지, 영상이 필요한 경우가 많은데요. 상업디자인 작업에 필요한 이미지는 주로 유료구매하거나 직접 제작해서 사용하지만, 블로그나 SNS 게시물에 첨부하는 정도는 무료 이미지도 충분합니다. 하지만 다운로드가 무료라고 해서 무조건 라이센스도 무료는 아닙니다. 개인용도로만 사용가능한지, 상업적으로도 가능한지, 저작권자 표시는 필수인지 선택인지, 원본을 수정해서 사용할 수 있는지 등 먼저 라이센스를 확인하는 일이 필요합니다. 무료로 다운로드할 수 있는 벡터파일을 다량 보유해 인기많은 사이트 Freepik은..

온라인 쇼핑 일러스트 3 - 신발

온라인 쇼핑 시리즈 3 - Shop Shoes Online 원본사이즈(3000x2000px) 이미지 Pixabay 다운로드 링크: pixabay.com/illustrations/shoes-online-shopping-fashion-sale-5705831/ Type 2 - 모노톤 원본사이즈(3000x1700px) Pixabay 다운로드 링크: pixabay.com/illustrations/shoes-footwear-online-shop-logo-5717837/ Type 3 - 그리드(grids) 스타일 원본사이즈(3000x1700px) 이미지 다운로드 링크: pixabay.com/illustrations/shoes-footwear-high-heels-boots-5705833/ (Pixabay의 모든 이미지..

Freebie/Images 2020.10.25

온라인 쇼핑 일러스트 2 - 메이크업

온라인 쇼핑 시리즈 2 - Shop Cosmetics Online 모노톤 원본사이즈(3000x1700px) Pixabay 다운로드 링크: pixabay.com/illustrations/online-shopping-cosmetics-5717835/ 그리드(grids) 스타일 원본사이즈(3000x1700px) Pixabay 다운로드 링크: pixabay.com/illustrations/cosmetics-make-up-lipstick-brush-5709801/ (Pixabay의 모든 이미지는 무료이며 개인 및 상업적 용도로 자유롭게 이용 가능합니다. * 타인의 이미지 재판매, 재배포는 금지.)

Freebie/Images 2020.10.24

내 로컬 컴퓨터에 워드프레스를 설치할 필요가 있을까

워드프레스를 로컬 호스트에 설치하는 이유 워드프레스(wordpress.org)는 다운로드받아 서버에에 설치하는 형태이기 때문에, 실제 사이트는 웹호스팅/클라우드 서비스를 이용하더라도 내 컴퓨터에 우선 설치하여 테스트한 후 라이브 사이트에 옮길 수 있습니다. 이렇게 하면, 내 컴퓨터에서 테마나 플러그인을 이것저것 사용해보고, 테스트, 수정 등을 거쳐 실제 사이트에는 최종 선택한 테마, 플러그인만 깔끔하게 설치할 수 있어 좋습니다. (테스트 및 개발 용도) 또한, 런칭한 후에도 테마, 플러그인 업데이트나 사이트를 재단장할 때, 로컬 컴퓨터에 설치해놓은 워드프레스에서 먼저 테스트 해보고 충돌이나 스타일이 망가지는 부분이 없는지 확인 후 라이브 사이트를 업데이트할 수 있습니다. 단점 1. 설치과정이 비교적 간단..

작명의 중요성

학교나 회사나 들어가면 해당 단체의 파일 작성 및 공유에 관한 가이드라인을 준다. 학생의 경우, 과제 제출시 파일명을 규칙대로 따르지 않고 제출하면 받지 않겠다, 감점하겠다, 0점 처리하겠다는 경우도 있고. 오바하는 것 같아 얄밉지만 규칙대로 파일명을 작성하는 것은 상당히 중요하다. 파일 네이밍 방식은 기관마다 대동소이할텐데, 일례로 일리노이대학 라이브러리에 있는 파일명 작성 팁은 이렇다. (검색에서 가장 먼저 뜬 사이트라서 인용함) 날짜형식을 YYYY-MM-DD 로 한다 알파벳, 숫자, 언더스코어, 하이픈(만)으로 조합 .txt 처럼 기계가 인지하기 좋은 파일 확장명 사용 가능한 짧게 일관성있게 SOURCE: https://guides.library.illinois.edu/introdata/filena..

잡담 2020.10.19

CSS Colors - 숫자로 색상을 표현하는 다양한 방식

Color Models 고유방식을 이용해 색상을 표현하는 다양한 컬러 모델 중, 웹상에 색상을 표현할 수 있는 방식은 hex codes, rgb (rgba), hsl (hsla), named colors 등이 있습니다. 이들의 형식과 개념을 알아봅니다. 1. RGB: Red, Green, Blue RGB는 Red, Green, Blue를 의미하는데요, 각 고유컬러 빛의 양을 가산혼합방식(Addictive color model)으로 스크린상에 표현하는 컬러모델입니다. 이들 세가지 색상을 각각 0~255까지의 숫자로 형식에 맞게 표기하면, 연산에 의해 웹상에서 해당색상을 구현해주며 이를 RGB 컬러값이라고 합니다. 형식: RGB(red, green, blue) 각각 0~255 사이의 숫자 CSS 예시 h1 ..