소셜 미디어 활용

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

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

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

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

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

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

Freebie

more

온라인 쇼핑 일러스트 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/..

Images 2020.11.10 0

온라인 쇼핑 일러스트 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의 모든 이미지..

Images 2020.10.25 0

온라인 쇼핑 일러스트 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의 모든 이미지는 무료이며 개인 및 상업적 용도로 자유롭게 이용 가능합니다. * 타인의 이미지 재판매, 재배포는 금지.)

Images 2020.10.24 0

디자인을 위한 코딩

more

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

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

워드프레스 2020.10.21 0

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 ..

Sleek CSS 2020.10.18 0

내 블로그, 워드프레스(Wordpress)로 만들면 좋을까?

디자인에 중점을 둔 웹사이트 운영을 고려하는 분 & 코딩 모르는 분을 위해 작성한 글입니다. 처음 웹사이트(블로그 포함)를 만들게 되면, 어디에 만들지 플랫폼을 알아볼텐데요, 많은 한국인의 경우 티스토리, 네이버 블로그, 워드프레스.org (추가로, 워드프레스.com, 구글블로그, Wix나 Squarespace 정도) 등 잘 알려진 CMS 플랫폼 중에서 고민해 볼 것입니다. (쇼핑몰 사이트는 주기능이 다르기 때문에 이 글에선 제외) 각각의 장점을 살짝 언급한다면, 네이버블로그 - 만들기 간단, 네이버 검색에 최적화되어 있어 네이버 이용자=내 블로그 잠재적 방문자 기대, 다양한 파생 수익 티스토리 - 만들기 간단, 구글에서 유리하다, 네이버보다 세련됨 워드프레스 - 구글검색에 유리하고 이 중에서 확장성, ..

워드프레스 2020.10.10 3