블로그, 홈페이지 등 웹페이지 작성시 테이블보다는 이미지로 처리하라.

지난 20여 년 동안 인터넷의 사용 환경 변화는 놀랍다고 밖에는 말할 수 없다.

 

'10년이면 강산도 변한다'는 말은 이 바닥에서는 통하지 않는다. 왜냐면 10년이면 강산이 몇 번 변할지 모를 정도로 빠르게 달라지니까...

 

그중 하나의 예가 바로 모바일 인터넷 분야다.

이제는 누구나 적어도 하나 정도의 모바일 인터넷이 가능한 휴대폰, 태블릿 PC 등을 가지고 다닌다.

 

그런 이유에서인지... 블로그에 접속하는 기기를 살펴보면 60~70% 이상이 모바일 환경이다.

 

 

따라서 홈페이지나 블로그도 이제는 PC 기반만 가지고는 대응을 할 수 없다. 그리고 저마다 다양한 화면 크기의 디스플레이를 가지고 있는 지라... 예전처럼 몇 가지 크기에 적용될 수 있는 홈페이지의 레이아웃이 아닌... 접속자의 해상도에 따라 화면 크기가 조절되는 반응형 홈페이지가 대세가 되었다. 

 

그리고 적어도 모바일 환경에서 원활하게 홈페이지의 내용을 볼 수 있도록 홈페이지나 블로그를 만들고, 관리를 해야 한다.

 

[이미지로 처리된 테이블]

 

 

그런 변화로 인해서 위기를 맞은 것 중에 하나가 한 때 대세였던 Flash다. 이 부분과 관련해서는 몇 차례 언급을 했었던 터라, 여기서는 넘어가기로 한다.

 

 

2018/03/10 - [홈페이지,블로그] - 홈페이지 이전을 준비하며...

 

2018/09/16 - [홈페이지,블로그] - 방치되어 있던 홈페이지를 다시 살리다. 간단한 XE 홈페이지 만들기

 

 

 

오늘은 테이블에 대해서 이야기를 해 보려 한다.

 

테이블은 일반 문서에서와 마찬가지로, html로 만들어진 웹 페이지에서도 내용을 깔끔하게 정리하는데 많은 도움이 되었다.

심지어 예전에는 메뉴나 큰 이미지를 테이블로 처리하기로 했으니까...

 

 

그런데, 최근에 테이블이 모바일에서 골치거리가 되어 버렸다는 사실을 깨닫게 되었다.

 

어떤 이야기냐면... 이미지와 글자의 경우에는 PC환경과 모바일 환경에서 자동적으로 크기가 조절이 되어 사용자가 보기 적당하게 조절이 되고... 필요시 확대를 해서 볼 수 있는데... 테이블의 경우에는 모바일 환경에서도 설정한 크기를 유지하기 때문에 페이지를 깨뜨리고, 이미지보다 더 보기 힘들게 만드는 것이다.

 

 

위의 이미지는 테이블을 화면 캡쳐해서 png 형태로 이미지 파일화 한 것이고, 아래는 일반 테이블 그대로다.

 

PC 환경에서는 둘이 별 차이 없이 보일 것이다. 그런데, 만약 모바일로 보게 된다면...

그때는 위에서 언급한 내용이 무슨 의미인지를 알게 된다.

 

 

따라서, 이제는 블로그나 홈페이지를 작성할 때... 일반 테이블을 사용하는 것을 지양해야 한다는 말이다.

 

 

그리고 이와 비슷한 문제를 예방하기 위해서는, 기존에 계속했던 방식이 아닌 다른 방식으로 웹페이지를 작성했을 경우에는 모바일에서 어떻게 보이는지를 확인해 볼 필요가 있다.  

 

 

월	일	도시	주     요     일     정
3	1	Osaka	김포공항 출발(11:55) 방콕행 전일항공(ANA) →나리타공항 경유 →방콕 돈무앙 국제공항 도착(18:35)
	2	Bangkok	왕궁, 왕궁사원(Wat Phrakeo), 카오산 거리(Khaosan RD)
	3		시내 구경, 남부터미널 Phuket 출발 (18:00 Bus)
	4	Phuket	푸켓도착(7시경), Karon Beach
	5		독서, 시내 구경(시장, 쇼핑)
	6		독서, Phuket Town 구경
	7	Pangnga	Pangnga Bay Tour 참가(제임스 본드 섬)
	8	Phuket	신변 정리, 일정 조정, 방콕행 출발
	9	Bangkok	회람퐁역(치앙마이행 기차표예매), 시내 구경, 야시장
	10		타마삿 대학 방문, 치앙마이행기차(18:40 침대차)
	11	Chiang Mai	치앙마이 도착(9:00), Night Bazzar 구경
	12		Rhajat Institute(대학) 방문, Wat chiang Man, 舊 시가지 구경, Wat Chedi Luang
	13		독서, 현지 대학생들과 어울림
	14		신시가 구경
	15		독서, 중간 정리, 구상
	16		Wat Maharam, Wat Bupparam
	17		Wat Prathat Doi Suthep, Orchid & Jade Factory 견학
	18		Wat Suandok
	19		Night Bazzar, Night Gallery
	20		Wat Ku Tao, Wat Papao
	21		독서, 신변 정리, 정보 수집
	22	Sukho Thai	Chiangmai Arcade(10:15) 출발 →Sukho Thai(16:10) 도착
	3		수코타이 역사공원(Old City)
	24	Phisannul	Phisannulok - Wat Yai, TAT 방문
	25	Sukho Thai	수영, 수코타이 시내 관광, 일몰 감상
	26		해맞이 실패, 수영, 컴퓨터학원 방문
	27		수영, 시내 관광, 독서
	28		영화 관람, 컴퓨터 학원 방문, 방콕행(22:45 Bus)
	29	Bangkok	방콕 북버스 터미널 도착(6:30), Chatuchak Weekend Market,비만멕 박물관, 적십자 바자회, Dosit Zoo
	30	Ayuthaya	야유타야 관광
	31	Bangkok	Wat Poh, Wat Arun, 야시장 구경, 쇼핑
4	1		신변 정리, 쇼핑, 방콕 출발(22:20) →오사카 경유
	2	Osaka	나리타 공항(9;25) →김포공항 도착(11:05)

[일반 테이블]