Posts

다양한 다른 화면 크기에서 웹사이트 테스트: 모니터 스크린 해상도별 기기별 테스트

Image
블로그나 웹사이트를 하다 보면, 모니터 크기에 따라 어떻게 보여지는가를 생각할 때가 있습니다.

관련업에 종사하는 전문가들은 그에 맞는 프로그램들을 사용하겠지만, 일반 블로거들은 그렇게 까지 하기는 어려울 것으로 보입니다.

각종 기기별로, 각종 스크린 사이즈별로, 온라인상에서 간단하게 테스트 해 볼 수 있는 곳이 몇  있는 것 같습니다. 그 가운데서, 쿼르크-툴즈(QuirkTools) 사이트의 스크린-플라이(Screenfly) 페이지가 간단하고 잘 되는 것 같습니다.

사용법은 간단하면서도 직관적입니다.
해당 사이트에서 테스트 하고자 하는 주소(URL)를 입력하고 실행[Go]하면 됩니다.

페이지 상단의 기기 모양 아이콘 위에 마우스를 올리면, 해당 기기에 따른 각종 모니터 스크린 크기 목록이 나열됩니다. 원하는 크기를 선택하면, 해당 크기에 맞추어 보여 줍니다.

쿼르크-툴즈(QuirkTools) 사이트의 스크린-플라이(Screenfly) 페이지
>> http://quirktools.com/screenfly/


모바일 기기들이 일상화 되어, 웹사이트나 블로그의 특성에 따라 차이가 있겠지만, 모바일 기기 접속이 데스크탑 접속을 넘어서는 곳도 있을 것으로 생각됩니다.

구글 애널리틱스(Analtyics) 등과 같은 접속 통계 및 분석 프로그램을 사용하면, 방문자의 기기종류와 스크린 사이즈별 접속비율을 볼 수 있습니다.  실제 접속 자료를 토대로 하여 웹페이지의 구조나 너비 등을 조절하는 데에 편리하게 활용할 수 있을 것 같습니다.

도움이 되기를 바랍니다.

블로그 웹페이지 본문(포스트)의 적당한 가로 너비 : 300 픽셀 ~ 400 픽셀

Image
블로그나 웹사이트에서 본문의 가로 너비는 어느 정도가 적당한가?
아래는 글을 읽다가 관련 부분을 번역하여 간략하게 요약한 것입니다. 블로그의 특성에 따라 절대적일 수는 없을 것이므로, 그냥 참고 정도로 하면 될 것 같습니다.

"
방문자의 글 읽는 편의성을 기준으로 하면, 폭이 좁은 것을 더 선호하는 것 같다.

글을 쉽게 읽고 잘 이해하도록 하려면 폭을 한 줄에 영문자 기준  40자 ~ 55자 정도가 되도록 하는 것이 적당하다. 이는, 글자 크기에 따라 차이가 있지만, 본문 가로폭이 250 픽셀 ~ 350 픽셀 정도가 됨을 뜻한다.

하지만, 블로그나 온라인 샾을 운영하는 사람이라면, 가로폭이 300 픽셀 ~ 400 픽셀이면 지나치게 좁다는 것을 알 것이다.
"

모니터가 데스크탑 쪽은 갈 수록 커지고, 다른 한편으로는 모바일화에 따라 작아집니다.
모바일 기기는 너비가 좁으므로 별다른 고민이 생기지 않지만, 데스크탑 모니터는 갈수록 커지고 있으니, 생각해 볼 여지가 생깁니다.

아래는 실제로 가독성이 어떤지 간단히 비교해 보고자, 동일한 내용을 가지고 가로폭을 몇 가지로 하여 본 것입니다.






[가로 너비 300 픽셀]
방문자의 글 읽는 편의성을 기준으로 하면, 폭이 좁은 것을 더 선호하는 것 같다.

글을 쉽게 읽고 잘 이해하도록 하려면 폭을 한 줄에 영문자 기준 40자 ~ 55자 정도가 되도록 하는 것이 적당하다. 이는, 글자 크기에 따라 차이가 있지만, 본문 가로폭이 250 픽셀 ~ 350 픽셀 정도가 됨을 뜻한다.

하지만, 블로그나 온라인 샾을 운영하는 사람이라면, 가로폭이 300 픽셀 ~ 400 픽셀이면 지나치게 좁다는 것을 알 것이다.





[가로 너비 450 픽셀]
방문자의 글 읽는 편의성을 기준으로 하면, 폭이 좁은 것을 더 선호하는 것 같다.

글을 쉽게 읽고 잘 이해하도록 하려면 폭을 한 줄에 영문자 기준 40자 ~ 55자 정도가 되도록 하는 것이 적당하다. 이는, 글자 크기에 따라 차이가 있지만, 본문 가로폭이 250 픽셀 ~ 350 …

구글 드라이브 사용법: MP3 오디오 파일을 웹페이지 블로그에 올리는 방법과 꾸미기 (오디오 재생기)

Image
구글 드라이브에 올려 놓은 오디오 파일을 <audio>태그를 사용하여 블로그나 웹페이지에서 재생하는 방법입니다.

기본적으로는 <audio> 태그 사용법과 같습니다.
구글 드라이브의 오디오 파일을 공유로 설정한 뒤에, 오디오 파일의 고유 아이디(ID)를 가져와서, <audio>태그의 소스 주소(URL)를 만들어 주면 됩니다.




[HTML 오디오 플레이어 태그 기본 모양]
<audio controls>
  <source src="beautful-day.mp3" type="audio/mpeg">
</audio>

[구글 드라이브 오디오 파일 재생을 위한 태그 모양]
<audio controls >
 <source src="https://docs.google.com/uc?export=open&id=오디오파일 고유 아이디" type='audio/mp3' />
</audio> ※  파랑색으로 표시한 https://docs.google.com/uc?export=open&id= 부분은 구글 드라이브에 있는 오디오 파일 주소를 만들기 위한 것입니다.



1. 오디오 파일 고유 아이디로 태그 만들기

구글 드라이브에 올려 놓은 오디오 파일의 주소(URL)에서, 파일의 고유 아이디(ID) 부분만 떼어 내어, 소스 주소를 아래와 같이 만듭니다.

[구글 드라이브에서 가져온 파일 공유 주소(URL) 모습]
https://drive.google.com/file/d/1dZpSWeYGSqmaCXZyvzqcRP8vuFCAdJh/view?usp=sharing

[오디오 파일 고유 아이디 부분]
https://drive.google.com/file/d/1dZpSWeYGSqmaCXZyvzqcRP8vuFCAdJh/view?usp=sharing ※  ~d/ 와  /view~ 사이에 있는 암호 같이 보이는 부분이 고유 아이디 부분입니…

구글 맞춤 검색 엔진 (커스텀 서치) 꾸미는 방법 : 스타일 설정 - 여백 색상 테두리 폰트 이미지 URL 밑줄 입력창 버튼 검색결과 ...

Image
블로그나 웹사이트의 자체 검색기 성능이 좋아짐에 따라 구글 맞춤검색기 사용이 줄어들고 있는 듯한 감이 있지만, 여전히 유용한 점이 많은 것 같습니다. 관련 정보가 있는 블로그나 웹사이트들을 한 데 묶어 개인화 또는 특화된 검색을 하기에는 안성맞춤이라 할 수 있겠습니다.

구글 맞춤검색기는 검색기 생성/설정 페이지에서 다양하게 제어를 할 수 있는 기능이 제공되고 있으므로, 웬만한 경우라면 그대로 웹페이지나 블로그에 적용할 수 있을 것입니다. 웹페이지의 특성상 좀더 세밀하게 조절 내지 꾸밈이 필요할 경우에는 아래와 같이 스타일 속성을 설정하여 보다 잘 어울리고 편리하게 만들 수 있습니다.



1. 검색기를 꾸미는 코드 삽입하는 방법

아래에서 보는 것처럼, 구글 맞춤검색엔진 코드 바로 위에 스타일을 지정하는 코드를 넣어 주면 됩니다.

<style type="text/css">
.cse .gsc-control-cse, .gsc-control-cse {padding:0px;}
input.gsc-input, .gsc-input-box {border-color: #d9d9d9;}
</style>
----- 구글 맞춤 검색 엔진 코드 -----


2. 각 항목별 제어 코드 목록과 예

맞춤검색엔진을 꾸미고자 하는 바에 따라 필요한 항목만 골라 적절한 속성을 주면 됩니다.


맞춤 검색기 영역 제어
.cse
.gsc-control-cse

예) 검색기 영역의 여백을 없애고자 할 경우
.cse .gsc-control-cse, .gsc-control-cse {padding:0px;}


검색어 입력창 제어
input.gsc-input
.gsc-input-box
.gsc-input-box-hover
.gsc-input-box-focus
.gsc-search-box .gsc-input>input:focus
.gsc-search-box .gsc-input>input:hover

예) 검색기 입력창 색상을 꾸미고자 할 경우
input.gsc-input, .g…

구글 블로그 사용법: 엠포리오 (Emporio) 반응형 테마 포스트 (아이템) 페이지 헤더 이미지 안보이게 설정/삭제하는 방법

Image
구글 블로그의 반응형 테마 가운데서 엠포리오(Emporio) 템플릿은 개별 글 (포스트) 페이지에서는 본문의 첫 그림을 확대하여 헤드 이미지로 사용하므로, 본문에 큰 사이즈의 사진이나 그림 이미지가 들어 있는 경우에는 멋진 모습을 보여 줍니다.

반면에, 작은 그림이 들어 있는 경우에는 모양새가 좀 어수선해 보이기도 합니다. 이럴 경우에, 헤드 이미지를 보이지 않도록 해당 코드 부분을 삭제하는 것도 하나의 방법이 될 것 같습니다.

[ 엠포리오 테마 헤드 이미지가 있는 경우와 없는 모양새 비교]



1. 개별 글 페이지의 헤더 이미지 기능 코드 찾아 가기

==> 블로그 대시보드 > 테마(Theme) > HTML편집(Edit HTML)을 클릭하여, HTML 편집창을 연다
==> 코드가 있는 본문의 아무곳에나 마우스로 한 번 클릭하여 창을 활성화 한다

==> 키보드의 [컨트롤(Ctrl) + F]키를 쳐서, 아래 그림의 오른쪽 위와 같은 검색기를 열고, 아래의 코드를 복사하여 붙여 넣고 > [엔터/Enter] 키를 친다. 그러면, 해당 코드가 있는 부분으로 이동되어, 노랑색으로 표시된다.

[찾아 갈 코드 부분 : 검색기에 붙여 넣고, 엔터키를 침]
data:widgets.Blog.first.posts.first.featuredImage


2. 해당 코드 부분 삭제 하기

글 페이지 헤더 이미지 기능을 하는 코드 부분은 아래와 같습니다.
아래의 코드 부분을 삭제하고, 편집창 맨 위의 [저장하기 / Save Theme] 버튼을 누르면, 변경사항이 저장됩니다.

실제로 저장을 해 보면, 시간이 한 참 걸리기도 하고, 저장이 되지 않았다는 오류 메시지가 뜨기도 합니다. 그러나, 저장은 별 탈없이 잘 되니 걱정하지 않아도 되겠습니다.

[ 삭제할 코드 부분]
<b:if cond='data:view.isSingleItem'>
  <b:if cond='data:widgets.Blog.first.posts.first.fea…

구글 검색결과에서 도메인 서브도메인 웹페이지 삭제 요청하는 방법 - 구글 웹마스터 도구 (서치 콘솔) 사용법

Image
홈페이지나 블로그에 글이나 그림 등을 올리게 되면, 검색엔진들이 등록을 하게 되고, 검색엔진에 등록이 되면 방문자들이 늘어나게 되므로 좋다고 할 수 있을 것입니다.

그러나, 나중에 특정한 도메인, 서브도메인, 웹페이지 등을 삭제하는 등과 같이 검색결과에 더 이상 노출 되지 않도록 할 필요가 있을 수 있습니다. 온라인상에는 헤아릴 수도 없을 만큼 많은 검색엔진들이 돌아다니고 있으니, 모든 검색엔진에게 해당 내용을 삭제 하도록 요청하기는 사실상 불가능하다 할 수 있겠습니다.

아래는 대표적인 검색엔진 가운데 하나인 구글의 검색결과에서 특정한 도메인이나 서브도메인과 그에 포함된 모든 내용 또는 특정한 페이지만을 삭제하도록 요청하는 방법입니다.


1.
아래 구글 웹마스터도구 (구글 서치콘솔)의 삭제 요청 페이지로 갑니다.
https://www.google.com/webmasters/tools/removals

2.
아래 그림에서와 같이, 입력상자에 삭제하고자 하는 도메인, 서브도메인 또는 웹페이지 주소를 입력하고, [삭제요청 Request Removal] 버튼을 클릭합니다. 페이지 아래쪽에 요청한 목록과 처리 상황이 표시됩니다.

입력하는 주소(URL) 형식은,
1) 도메인과 그에 포함된 모든 내용을 삭제하고자 할 때: http://abcd.com  
2) 특정한 서브 도메인과 내용을 삭제하고자 할 때: http://xyz.abcd.com  
3) 특정한 웹페이지를 삭제하고자 할 때: http://abcd.com/123456789.html
4) 특정한 이미지를 삭제하고자 할 때: http://abcd.com/fghijklmn.jpg
... 와 같이 하면 됩니다.

도움이 되기를 바랍니다.

구글 블로그 사용법: 애드센스 최대 허용/노출 개수 설정 방법 maxNumAds : 반응형 테마 - 콘템포, 엠포리오, 소호, 노터블

Image
구글의 새로운 반응형 테마인 콘템포 Contempo, 소호 Soho, 엠포리오 Emporio, 노터블 Notable 스킨에서는 애드센스 광고단위의 최대 노출 개수를 조절할 수 있습니다.

기본적으로는 한 페이지에 노출 되는 애드센스 광고 단위는 3개로 설정되어 있습니다.  템플릿의 구조, 광고 배치, 목록 페이지에서 광고 노출 간격 등에 따라 알맞게 조절하면 좋을 것 같습니다.

설정 방법은

=>블로그 대시보드 > 테마(Theme) > HTML편집(Edit HTML) 버튼을 눌러, 아래 그림처럼 HTML 편집창을 엽니다.
=> 코드가 있는 본문 영역을 아무곳이나 한 번 클릭하여, 창을 활성화 한 다음 => 키보드의 [컨트롤 Ctrl + F]키를 쳐서 검색입력 창을 엽니다.

=> 검색어 입력창에 maxNumAds를 입력하거나 복사하여 붙여 넣고  [엔터]키를 칩니다. 그러면 해당 코드 위치로 이동되어 노랑색으로 표시됩니다.
=> 수자 3을 원하는 수자로 변경합니다.

=> 편집창 맨 위의 [테마 저장 / Save Theme] 버튼을 눌러 저장을 하고, [Back] 버튼을 눌러 편집창을 닫습니다. 
[테마 저장 / Save Theme] 버튼을 누르면, 경우에 따라서는 시간이 한 참 걸리는 경우도 있고, 저장이 되지 않았다는 오류 메시지가 뜰 때도 있지만, 저장은 오류 없이 잘 되는 것 같습니다.

maxNumAds

참고: 예컨데, 최대 개수를 5로 변경하면, 검색결과 페이지나 목록 페이지 등에서 광고가 5개 까지 노출 됩니다.

도움이 되기를 바랍니다.