반응형

포스트: 12
Tags

Posts

12 posts

티스토리 반응형 스킨 “프라치노 공간”

소인배(小人輩).com|2019년 4월 9일

티스토리 반응형 스킨 “프라치노 공간”이제는 점점 더 많은 웹사이트에서 반응형으로 홈페이지를 구축하고 있습니다. 데스크톱, 노트북, 태블릿, 휴대폰 등의 다양한 기기들이 생활에 침투하면서, 어느 한쪽에만 최적화를 시킨 홈페이지를 만들기가 애매하게 되었기 때문이지요.어떤 사용자가 어떤 기기를 가지고 홈페이지에 접속할 수 예측할 수 없는 상황이니, 사용자의 기기의 화면에 맞게 최적화되는 홈페이지가 더욱더 중요한 시대가 되었다고 할 수 있답니다.“티스토리에서 적용할 수 있는 다양한 반응형 스킨들”이러한 시대의 흐름에 맞춰서 티스토리에서도 다양한 반응형 스킨을 많이 만들어 내고 있는데요. 티스토리 공식 홈페이지에 들어가 보시면, 무료로 배포되는 반응형 스킨을 찾을 수 있답니다.“기기에 맞게 다양한 비율의 화면을 보여주는 웹사이트, 반응형 웹페이지”이렇게 반응형 웹페이지를 적용하게 되면 좋은 점들이 몇 가지 있습니다. 더 이상, 모바일 전용 페이지를 만들지 않아도 되는 것이 장점 중의 하나라고 할 수 있지요.그리고, 어느 기기로 접속해도 무리 없이 작동한다는 점이 이러한 반응형 스킨의 장점이라고 할 수 있답니다. 물론, 네이버나 다음처럼 엄청나게 많은 서비스가 들어있는 웹사이트의 경우에는 “모바일” 페이지와 “PC 전용 페이지”를 따로 운용하는 것이 더 좋기도 하겠지만요.“티스토리 유료 반응형 스킨, 프라치노 공간”아무튼, 이러한 반응형 스킨들은 무료가 있기도 하지만, 이러한 무료 스킨의 단점은 너무나도 많은 사람들이 이용하고 있어서 나만의 개성을 잘 드러내기 어렵다는 단점이 있습니다.그렇다고 해서, 나만의 맞춤 스킨을 제작하기에는 너무 큰돈이 들기에 부담스럽게 되지요. 이런 경우에 절충안으로 찾을 수 있는 것이, 누군가가 만들어 놓은 적당한 가격에 판매되는 유료 스킨을 이용하는 것이 하나의 방법이 될 것입니다.프라치노 스킨 역시도 이러한 유로 스킨 중의 하나인데, 가격은 크게 부담스럽지 않은 유료 스킨이랍니다. 스킨 가격은 “19.99달러”이니까요.“깔끔한 형식의 반응형 스킨, 프라치노 공간”프라치노 공간의 반응형 스킨이 추구하는 분위기는 깔끔함이 아닐까 하는 생각이 들 정도로, 스킨은 잘 정돈이 되어 있는 듯한 느낌이 듭니다. 그리고 동시에 모던한 느낌이 드는 스킨이기도 하니, 전문적으로 블로그를 운영하는 분들이 한 번 고려해볼 만한 스킨이 아닐까 하지요.저는 이미 “탕비수다 이마고”라는 스킨에 20,000원을 주고 구입을 한 상황인지라, 이 스킨이 탐나기도 하지만 자제해야겠다는 생각이 든답니다. 그래도 혹시나 이 스킨이 필요하신 분은 아래의 링크를 타고 들어가시면 공식 페이지로 가실 수 있답니다.“티스토리 반응형 스킨, 프라치노 공간”주소 : https://fraccinospace.tistory.com/분류 : 티스토리 블로그 스킨특징 : 티스토리 유료 스킨

티스토리 반응형 스킨 “탕비수다 이마고”

소인배(小人輩).com|2019년 3월 20일

티스토리 반응형 스킨 “탕비수다 이마고” 예전에는 모바일과 PC 환경을 나누는 것이 일반적이었다고 한다면, 이제는 PC환경과 모바일 환경을 통합하는 것이 일반적이 되었습니다. 이는 모두 “스마트폰”이 출연한 이후, 생겨난 변화라고 할 수 있기도 한데요. 과거에 스마트폰이 없던 시절에 인터넷은 거의 대부분이 컴퓨터를 활용해서 접속했기에 “모바일”이라는 용어도 사실 생긴 지 그리 오래되지 않았습니다. 이렇게 스마트폰으로 접속하는 인터넷 환경에 반응하기 위해서 “모바일”이라는 용어가 생겨났는데, 이제는 “반응형”이라는 용어가 생겨나면서 온라인에 많은 변화가 생겨나기도 했습니다. “PC와 모바일 환경에 맞는 스킨을 따로 제작했던 과거” 이렇게 과거에는 홈페이지를 구축하면, PC 화면을 기준으로 삼고 작업을 했습니다. 그리고 스마트폰이 등장한 이후부터는 “모바일”이라는 용어를 사용하면서, 휴대폰 화면에 맞는 “모바일 전용” 스킨을 따로 만들어서 적용했습니다. 아무래도 컴퓨터보다 화면이 작은 스마트폰으로 컴퓨터 화면에 맞는 사이즈로 제작된 “홈페이지”를 이용하기에는 여러모로 불편한 점이 많았으니 말이죠. 그래서, 예전에는 이렇게 홈페이 스킨을 컴퓨터 접속 환경에 맞는 버전 따로, 모바일에 맞는 환경 따로 각각 제작하는 편이었습니다. 하지만, 이러한 점은 여러모로 불편한 점을 낳기도 했는데요. 아무래도 “모바일”에 맞는 화면을 제작하다 보니, 스킨을 두 단계로 따로 만들어야 했고, 모바일 화면의 경우에는 그리 세련되어 보이지 않는 것이 큰 문제이기도 했습니다. “반응형 웹사이트란 무엇인가?” 이러한 문제점을 보완하기 위해서 등장한 것이 바로 “반응형 웹”이라는 것이 있는데요. 여기에서 반응형이라고 하는 것은 사용자의 접속 환경에 맞게 알맞게 “홈페이지”가 반응해서 컴퓨터와 모바일 환경 모두에서 편하게 볼 수 있는 코드를 말합니다. 코드를 반응형으로 짜는 방식을 통해서, 컴퓨터에서 보는 화면과 모바일에서 보는 화면이 그리 크게 차이가 나지 않지만, 서로의 화면에서 최적화시키는 기술이 바로 “반응형 스킨”이라고 할 수 있지요. 물론, 이러한 반응형 코드를 짜는 것은 쉽지 않고, 항상 장점만 가지는 것은 아니지만, 이제는 거의 대부분의 홈페이지가 “반응형 코드”로 짜여있을 정도로 여러모로 많은 곳에서 사용된답니다. “티스토리 블로그의 반응형 스킨, 탕비수다 이마고” 이러한 “반응형 스킨”은 이제 어느 곳에서 쉽게 찾아볼 수 있는 스킨이 되었는데요. 티스토리 블로그 스킨 목록에서도 반응형 스킨을 쉽게 찾아볼 수 있습니다. 저는 그중에서 “탕비수다 이마고”라는 반응형 스킨을 사용하고 있는데요. 탕비수다 이마고라는 스킨은  “무료”로 사용할 수 있는 스킨은 아닙니다. “유료”로 돈을 주고 구매해서 사용해야 하는 스킨인데요. 스킨의 완성도에 비해서 가격이 그리 비싼 편은 아니라고 생각해서 투자라고 생각하고 이 스킨을 구매했답니다. 가격은 한 사이트당 20,000원으로 그리 비싼 편은 아니라고 할 수 있지요. “완성도가 높은 반응형 스킨” 탕비수다 이마고의 반응형 스킨은 제법 완성도가 높은 편입니다. 그래서 다른 무료 스킨에서 볼 수 있는 자잘한 버그를 거의 볼 수 없는 것이 특징이라고 할 수 있습니다. 그래서, 전문가적인 느낌이 나는 티스토리 블로그를 구축하고 싶다면, 한 번쯤 고려해볼 만한 스킨이라고 할 수 있지요. 지금 제가 사용하고 있는 “소인배닷컴”의 블로그 스킨 역시도 이 스킨이랍니다. 더 자세한 내용은 “탕비수다”라는 블로그에서 찾아볼 수 있는데요. 아래의 링크를 타고 들어가 보시면 “탕비수다 이마고”에 대한 스킨에 대한 정보를 얻으실 수 있을 것입니다. “탕비수다 이마고” 특징 : 티스토리 반응형 스킨 가격 : 20,000원 링크 : http://tangbisuda.tistory.com

유튜브 영상을 블로그에 올리는 방법

소인배(小人輩).com|2019년 3월 17일

유튜브 영상을 블로그에 올리는 방법블로그에서는 다양한 것들을 할 수 있습니다. 단순히 글을 쓰는 것에서부터, 사진을 첨부할 수도 있고, 여기에 “유튜브” 등에 올린 영상을 첨부할 수도 있습니다.꼭 유튜브뿐만 아니라, 우리나라의 포털 사이트인 “네이버”, “다음(카카오)” 등의 사이트에서 제공하는 영상도 그대로 첨부가 가능하답니다.이번에는 간단한 내용이지만, 우선 “유튜브”를 기준으로 영상을 블로그에 첨부하는 방법에 대해서 한 번 살펴보도록 하겠습니다.“유튜브의 영상을 내 블로그에 올리는 방법”유튜브는 세계 최대의 온라인 영상 사이트라고 할 수 있는데요. 그래서 유튜브에는 항상 많은 영상들이 올라오고 있습니다. 지금도 엄청나게 많은 영상들이 계속해서 올라오고 있다고 하지요.물론, 이 중에서 대중들의 마음을 사로잡는 영상은 그리 많지 않을 것입니다. 그럼에도 불구하고, 전 세계의 인구는 70억쯤 되니, 일부 사람들만 영상을 본다고 하더라도 엄청난 인구가 영상을 보게 되는 것이지요.아무튼, 서론이 길었습니다. 유튜브에서 영상을 “내 블로그”에 첨부하는 방법에 대해서 알아보도록 할 텐데요. 방법은 정말 간단합니다. 절차를 정리해보면 아래와 같이 정리해볼 수 있습니다.“유튜브 영상을 내 블로그에 올리는 방법 (티스토리 기준)”1. 유튜브 사이트에 접속한다.2. 내가 가지고 오고 싶은 영상을 클릭한다.3. 아래쪽에 “SHARE(공유)” 버튼을 누른다.4. 를 눌러서 코드를 확인 후, 복사한다.5. 블로그로 가서 로 전환 후, “붙여 넣기”한다.이렇게 정리를 해볼 수 있답니다. 단순하게 생각해보면, 유튜브에 접속해서, 공유 버튼을 눌러서 “소스 코드”를 복사 한 뒤에, 내가 붙여놓고자 하는 곳에 붙여 넣으면 됩니다.△ 일반적인 유튜브의 "공유 버튼"“위의 방법이 어렵다면, 더 쉽게 하는 방법”혹시나 위의 방법이 어렵다면, 더 쉽게 하는 방법이 있습니다. 아래와 같은 절차로 진행하는 것이지요.1. 내가 가져오고자 하는 영상을 클릭한다.2. “주소”를 복사한다.3. EMBEDRESPONSIVELY.COM 사이트에 가서 “주소”를 붙여 넣는다. ☞ http://embedresponsively.com4. 아래쪽에 나오는 소스코드를 복사한 후, 내가 붙여 놓고자 하는 곳에 로 붙여 넣는다.이렇게 정리를 해볼 수 있습니다. 위와 같은 방식을 거치면, 유튜브의 영상을 그대로 내 사이트에 첨부할 수 있답니다. 같은 방식으로 “네이버, 다음(카카오)”에 올라온 영상도 그대로 첨부할 수 있답니다.이 방법이 어렵다면, 나중에 시간을 내서 따로 한 번 다시 설명을 해보도록 하겠습니다. 도움이 되었으면 합니다.

유튜브 "영상 반응형으로 올리는 방법"

소인배(小人輩).com|2019년 3월 16일

유튜브 "영상 반응형으로 올리는 방법" 요즘에는 온라인 홈페이지나 블로그에 영상을 쉽게 첨부할 수 있습니다. 유튜브, 네이버, 카카오 등에서 영상 서비스를 제공하고 있어서, 여기에 올려놓은 영상을 “코드”만 삽입하면 내 블로그나 홈페이지에서 볼 수 있도록 올릴 수 있답니다. 그래서 단순히 글과 사진만으로 “글”을 쓸 필요는 없게 되었습니다. 글, 사진, 영상, 플래시 등 다양한 미디오를 한 곳에 조합할 수 있게 되었으니 상황에 맞게 적절히 잘 조합한다면, 재미있는 콘텐츠를 만들어 낼 수 있는 것이지요. “일반적인 영상 첨부의 경우” 이렇게, 일반적인 영상 첨부의 경우에는 대부분의 영상 제공 사이트, “유튜브, 네이버, 다음(카카오)” 등에서 바로 “퍼가기” 기능을 제공합니다. 그래서, 퍼가기 기능에서 나오는 코드를 복사해서 내가 붙여놓고자 하는 곳에 “붙여 넣기”를 하면 영상을 가져올 수 있습니다. 이렇게 기본적으로 영상을 가져오는 방법은 간단한데요. 하지만, 이 방법으로 영상을 가져오게 되면, 영상 크기를 “고정”해서 가져오게 되는 경우가 대부분입니다. 예를 들어서, “600 X 480”으로 영상을 가져오게 되면, 어떤 환경에서 보아도 화면 사이즈가 “600 X 480”으로 고정이 되게 되지요. 큰 화면에서 보아도 같은 사이즈, 휴대폰과 같은 작은 사이즈에서 보아도 같은 화면 크기로 보입니다. “큰 비율로 첨부된 영상을 휴대폰에서 볼 경우” 이렇게 어느 화면에서 보아도 차라리 같은 비율과 같은 사이즈로 나온다면 괜찮을 텐데, 아쉽게도, 위의 경우 “600 X 480”을 예로 들면, 가로 크기가 600보다 작은 기기에서 보게 되면, 예를 들어서 “300”짜리의 휴대폰에서 본다고 가정을 해본다면, 600 X 480”으로 나오는 것이 아니라, “300 X 480”과 같이 비율이 꺠져서 나오게 됩니다. 그래서, 이렇게 화면이 작은 기기로 영상을 보게 되면, 원하는 영상을 제대로 볼 수가 없는 현상이 발생합니다. “반응형으로 코드를 삽입하면, 이 문제를 해결하고 있다.” 이러한 문제는 사실, 모바일이라는 기기가 등장하면서 생긴 문제인데요. 요즘에는 이러한 문제의 해결책으로 “반응형”으로 코드를 짜서, 홈페이지나 블로그를 구축하는 경우가 많아지고 있습니다. 그래서 마찬가지로 이런 문제도 “반응형 코드”로 영상을 가져가는 것으로 해결할 수 있답니다. “EMBED 코드를 “반응형 박스” 안에 넣어주면 문제를 해결할 수 있다.” 그래서, 이러한 문제를 해결하는 가장 쉬운 방법으로는 반응형으로 일정한 비율을 유지하는 가상의 박스를 만들어주는 것으로 해결할 수 있습니다. 하지만, 이렇게 코드를 직접 짜라고 하면, 전공자나 전문가가 아니고서는 쉽지 않을 텐데요. 그래서, 이것을 쉽게 해주는 사이트가 있습니다. 바로 “EMBEDRESPONSIVELY.COM”이라는 사이트이지요. 이 사이트에서 “유튜브 영상”이나, “구글 지도”의 주소를 넣기만 하면, 그대로 반응형 소스로 만들어 준답니다. 그 원리는 간단합니다. 위에서 언급한 “반응형 박스”를 만들어서 그 안에 영상 코드를 삽입하는 형태인 것이지요. “네이버, 다음(카카오)에서 가져오는 영상의 경우” 해외에서 운영하는 사이트인지라, 주로 유튜브를 대상으로 작동하는 사이트인데, 우리나라의 “네이버”나 “다음”에서 가져온 영상을 그대로 응용할 수도 있습니다. 바로 이 사이트에서 공개하고 있는 코드를 이용하면 되지요. 요즘에는 보통 영상을 “IFRAME” 코드로 가져오는데요. 위의 박스에 있는 코드에서 “”에 해당하는 부분만 바꾸어서 넣어주면 반응형으로 작동하는 영상을 첨부할 수 있답니다. 깔끔한 웹사이트를 운영하는데 알아두면 도움이 되는 정보라고 할 수 있지요. 여기까지, “반응형으로 영상을 가져오는 법”에 대해서 한 번 살펴보았습니다. 도움이 되는 내용이었기를 바랍니다. “반응형으로 영상 첨부하는 방법” 소스 제공 사이트 : http://embedresponsively.com