2012년 3월 30일 금요일

IE 때문에 미쳐...

그간 ranktoy.com 을 IE로 접속했을 때에 CSS3를 제대로 표현 하지 못한 것을 빼고도 이 애는 왜 또 좌측정렬을 하지? 에 대한 불만이 가득했다. 오늘 조금 시간이 생겨 자세한 내용을 인터넷을 통해 조사한 결과.

width의 크기를 특별히 정한 div의 경우  margin: 0 auto; 으로 중앙정렬을 잘 못하는 경우가 있을 것을 알게 되었다. 이런 경우 전체를 둘러싸는 wrapper div를 만들어서 거기에  text-align: center; 을 한 방 적어주면 가볍게 중앙정렬을 할 수 있다는 것을 확인...

대신 그 바로 안쪽의 Div에다가  text-align: left; 하는 것도 잊지 말자...

제 페이지에서 중앙정렬을 위해 적은 body와 wrapper div 소스를 잠깐 적어놓습니다.


body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background-color:#eeeeee;
 margin: 0 auto;
 text-align: center;

}


#wrapper {
 margin: 0 auto;
 width: 980px;
 position: relative;
 text-align: left;
}

이렇게 해서 중앙정렬 드디어 가능..^^



-----------------------------
RankToy.com - Click and cast Your vote
Fairedu.com - Photo card book for your children

미디어쿼리 2탄.... IE를 지원하는 법

인터넷에 IE를 위한 미디어쿼리 지원법에 대해서 다양한 해법이라 해야 할지 꼼수라고 해야 할지 아무튼 여러가지 방법이 나와 있는 것을 확인했다. 이것은 오늘 아침의 일로 시작된다. 어제 새벽에 열심히 미디어쿼리를 시험 적용한 후에 즐거운 마음으로 회사에 가서 IE 8을 여는순가 CSS가 모두 사라진 웹페이지를 보고 필자는 정말 충격에 빠졌다.

하지만 인터넷의 모든 해법은 거의 인터넷에 있는 법. 이런 고민을 한 사람은 나뿐만이 아닌듯... 대략 요약하면.. IE 6,7,8 형제들은 CSS3를 지원하지 않기 때문에 나는 에러...

1. jQuery를 이용하는 법.
2. 자바스크립트를 이용하는 법
3. 기타 꼼수들...

을 통해 해법을 찾은 듯 하지만 필자는 좀 억울 한 생각과 꼭 이렇게 까지 해서 IE를 지원해 줘야 하는가? 하는 생각이 들어 다음과 같이 소스를 정리했다.


<link rel="stylesheet" media="screen and (max-width: 980px)" href="/ranktoy/narrow_css.css" />
980픽셀 미만의 가로 해상도를 가지고 있으면 narrow_css.css파일을 써라
<link rel="stylesheet" media="screen and (min-width: 981px)" href="/ranktoy/normal_css.css" />
981픽셀 이상의 가로 해상도를 가지고 있으면 normal_css.css파일을 써라
<!--[if IE]> <link href="/ranktoy/common_css.css" rel="stylesheet"/><![endif]-->
혹시 IE면 그냥 원래 하던대로 하자...
IE의 책임있는 행동이 필요한 때다...



-----------------------------
RankToy.com - Click and cast Your vote
Fairedu.com - Photo card book for your children

2012년 3월 29일 목요일

가로 사이즈에 반응하는 웹페이지...

최근에 여차저차 하여 미디어쿼리라는 이야기를 많이 듣게 되었는데...
CSS만으로도 브라우저, 해상도를 커버할 수 있는 반응형 웹사이트 라고 한다.
그래서 나도 한 번 해볼까? 하는 생각으로 코드를 봤는데...

기본적인 것은....
아!!!!! 쉽다...

기본적으로 일단 웹브라우저의 가로 사이즈에 따라 2단 변신을 통해 살짝 해상도 낮은 기기들을 지원 할 수 있는 버전을 제작해 봤다...

http://www.ranktoy.com/

1> 지원 대상 : IE 6,7,8을 뺀 나머지는 대충 되는 듯..
2> 테스트 방법 : 브라우저의 가로 크기가 850 pixel이하가 되면... 오른쪽 레이아웃이 아래로 뚝 떨어져 바닥에 붙는다.
3> 이를 통한 장점 : 모바일 사용자들도 대충 글씨를 읽을 수 있게 된다.
4> 미처 못한 것 : 650pixel 이하의 기기들의 호환규격도 맞춰주려 했으나 그러기에는 수정할 것이 많아서 그냥 대충 보시라... 버전으로 제작.

한 번 테스트 해보시라...

PS. 미디어 쿼리를 쓸 때에는 저해상도용 CSS 조건을 먼저 쓰는 것이 IE호환성을 위해 좋다고 하나 아직 회사에만 IE가 있어 테스트는 못함...


-----------------------------
RankToy.com - Click and cast Your vote
Fairedu.com - Photo card book for your children

2012년 3월 26일 월요일

애니메이션 랭킹 베스트 5

애니메이션 랭킹 베스트 5를 iframe으로 보여주는 페이지 제작완료...
기대하시라.



-----------------------------
RankToy.com - Click and cast Your vote
Fairedu.com - Photo card book for your children

2012년 3월 18일 일요일

3.1장 바이두 검색엔진 등록법

혹시 바이두에 검색을 원하시는 분들이 있으시다면 아래의 링크를 누르시고 사이트명을 등록하시면 됩니다.


혹시 어렵다고 생각하신다면 구글번역기 돌리면서 등록하셔도 됩니다. 
필요로 하는것은.. 사이트 명 그리고 인증번호 뿐...

한 번 시도해 보세요.



-----------------------------
RankToy.com - Click and cast Your vote
Fairedu.com - Photo card book for your children

2012년 3월 5일 월요일

3장. FTP? Editor? Terminal?

지난 줄거리 - 2장을 통해 서버를 구매했다
주저리 - 제가 프로그램을 짤 때의 마음가짐, 열심히 고민해서 만든 후 기도합시다.


1. 서버와의 대화가 필요해
서버를 사서 기쁘긴 한데 도대체 이 애랑 어떻게 대화를 할지 잘 모르는 사람들을 위해 서버와 대화하는 방법을 알려드립니다. 이 글을 보시는 사람들은 여러가지 컴퓨터를 사용하고 계시리라 생각합니다. OS별로 접속할 수 있는 프로그램이 다양하고 기능도 상이하기 때문에 편한 프로그램을 이용하시면 된다고 이야기드리고 싶구요. 단지 제약사항을 먼저 이야기드리려 합니다. 

2. SFTP로 접속합니다. 
FTP파일을 서버로 보내고 받기 위해 만들어진 규약입니다. 여기에 약간의 보안규칙이 추가된 규약이 SFTP입니다. SFTP는 22번 포트를 통해 통신합니다. 그냥 복잡하게 생각하지 마시고 22번길을 이용한다 라고만 생각하겠습니다. 이를 위해서 SFTP를 이용할 수 있는 Editor가 필요하겠습니다. 제 맥북에어에서는 Coda라는 에디터를 사용하고 있구요. IBM에서는 UltraEdit이라는 프로그램이 이 SFTP를 지원한다고 하는군요.

일반적으로 FTP프로그램은 파일을 옮길때에 사용하구요(보통 동영상 복사할때 사용해 보신 분들이 좀 있으시리라 생각됩니다). FTP가 지원되는 Editor는 서버에 있는 파일을 읽어서 바로 수정 후 서버에 적용할 수 있다고 생각하시면 되겠습니다. 

Editor를 이용해서 SFTP에 접근하기 위해서 
- 접근할 서버 
- 유저의 이름
- 비밀번호
- 포트
- 프로토콜
을 체워넣어야 하는데요.
쉽게 하나하나 설명드리겠습니다. 

- 접근할 서버 : xxxxx.cafe24.com
- 유저의 이름 : root
- 비밀번호 : 2장때에 서버구매할때에 임시 root 패스워드를 입력하라는 메시지가 있었을껀데요. 즉, ID : root 그리고 비밀번호는 그 때에 입력한 비밀번호가 되겠습니다.  
- 프로토콜/포트 : SFTP를 설정하시면 기본적으로 22번길을 열어줄겁니다. 그냥 그대로 사용하시면 되겠습니다. 

그 후에 접속을하시면 큰 문제없이 드디어 구매하신 서버에 접근할 수 있게 될 겁니다. 

리눅스에 익숙하신 분들은 터미널을 사용하실 수도 있고 자신의 컴퓨터에서 작업한것을 통째로 파일째 옮기시려는 분들은 그냥 FTP프로그램을 사용하셔도 됩니다. 방법은 모두 똑같으나 그 이후의 방법이 조금 다르므로 오늘은 접근을 하는 부분까지 성공하시면 마음편하게 일단 오늘도 하나의 허들을 뛰어넘었다 라고 생각해 주시기 바랍니다. 

숙제
서버 접근에 성공하시면 수 많은 디렉토리(폴더)들이 보이게 됩니다. 그 안에서 열심히 검색을 하셔서 html이라는 폴더가 어디 있는지 찾아보세요. 4장에서는 이에 대한 이야기가 시작될 겁니다.


-----------------------------
RankToy.com - Click and cast Your vote
Fairedu.com - Photo card book for your children

2.5장. 근데 왜 웹 서비스지?

그런데 왜 웹서비스이지? 이왕 가르쳐줄꺼면 쉽게 앱 만드는 법이나 가르쳐 줄 것이지. 이런 분들을 위해 잠시 제가 왜 웹서비스에 관심을 갖게 되었는지 설명을 드리려고 합니다. 웹서비스의 장점은 다음과 같습니다.

1. 수정을 밥먹듯이 할 수 있다
제가 웹서비스를 만들게 된 계기는 스트레스 해소때문이었습니다. 큰 회사의 프로젝트별 개발은 많은 증빙서류와 미팅과 우선순위의 조정이 뒤따르게 됩니다. 이에 따른 스트레스 해소를 위해 웹서비스르 개발을 시작했습니다.

가령 애플 모바일 기기들을 위한 앱을 개발하기 위해서는 다음과 같은 과정을 거치게 됩니다.
- 개발자 계정에 가입한다(119$/년씩 내야 한다)
- 앱을 개발한다.
- 테스트 후 애플에 제출한다
- 1~2주간의 심사기간을 거친다
- 애플에서 승인을 해준다(가끔은 원인도 모르는체 왜 거절되는 경우도 있습니다)
- 수정이 필요할 때에는 또 그짓을 반복한다

하지만 웹서비스의 장점은 인터넷이 연결되어 있다면 아이폰에서도 갤럭시에서도 PC에서도 맥에서도 쉽게 서비스에 웹 소스에 접근해서 수정할 수 있습니다.

2. 그나마 쉽다.
일반적인 프로그램들은 원천소스를 만들어서 그걸 compile(실행화일 만들기)을 합니다. 하지만 웹서비스는 기본적으로 문서구조입니다. 그리고 많은 기술적 발전을 가져왔습니다. 이에  언어만 살짝 이해할 수 있으면 문서 짜듯이 웹서비스를 만들 수 있게 됩니다. 물론 그 안에 들어가는 언어도 여러가지이긴 하지만 뭐 하나씩 돌파해나가면 되니까요.

3. 어디서든 쓸 수 있다
제가 생각하는 가장 좋은 시장은 넓고 다양한 요구를 가진 사람을 만날 수 있는 시장입니다. 웹서비스는 PC에서도 폰에서도, 패드에서도 점차 진화하고 있는 TV에서도 볼 수 있습니다. 또 이런 웹서비스르 앱으로 만들어주는 서비스도 있습니다. 여러분은 애플의 정책에 따라 이리저리 움직이시겠습니까? 아니면 모든 서비스에 모두 적용할 수 있는 그런 표준 서비스를 준비하시겠습니까?

주저리
요즘 저에게 앱개발을 하려고 하니 그에 따른 도움을 요청하시는 분들이 가끔 있습니다. 개발자 비쌉니다. 기획자도 비쌉니다. 앱을 개발한다는 것은 새롭게 커가는 시장을 바라보는 좋은 시도이긴 합니다만 먼 미래를 보고 움직이길 원하신다면 막 투자하기 보다는 일단 insight를 넓히기시를 당부드리고 싶습니다.


-----------------------------
RankToy.com - Click and cast Your vote
Fairedu.com - Photo card book for your children

2장. 일단 서버를 저지르자....

주저리...
제가 이렇게 저지를 수 있게 만들어주신 웃대총장님에게 감사를. 당신이 지르게 해주셔서 이젠 제가 이러고 있답니다.

1. 나만의 스케치북을 갖자
IT산업의 기반은 컴퓨터의 발전과 함께 했습니다. 우리는 항상 켜져있어서 여러 사람이 접근할 수 있는 컴퓨터를 서버라 부릅니다. 그리고 인터넷 산업이 발전하면서 아주 싼 가격으로 서버를 사서 운영할 수 있게 되었습니다. 이건 동네에 커피샵을 내는 것과 아주 유사합니다. 임대료를 내고 인테리어를 하고 커피등의 재료를 준비하고 전단지를 돌려 홍보하고 예쁜 종업원을 앞에 세우는 것 처럼 인터넷 서비스를 이용 하려면 여러가지 준비가 필요합니다. 그 중에 제일 먼저 하려는 일은 먼저 서버를 사는 것 입니다. 서버를 사야 뭐라도 담아둘 수가 있게 되죠...

서버를 사 두는 것은 아주 중요합니다. 이건 스케치북을 사서 그림을 그리고 싶어!와 이 스케치북에 이제 뭘 그리지?의 차이일듯 합니다. 뭔가 할 수 있는 환경이 있다는 것이 그 이후의 긴 길을 가게 하는 원동력이 됩니다.

커피숍을 임대하는 일도 크기와 장소에 따라 아주 가격이 천차만별이겠지만 서버도 마찬가지로 아주 여러가지가 있습니다. 그걸 다 설명하면 또 포기하시는 분들이 일단 미친척 따라와주시기로 하는 것이 맞을 듯 합니다. 그래서 제가 2대 임대해서 사용하고 있는 서버를 기반으로 이후의 제작을 진행하는 것으로 하겠습니다.

2. 카페24로 가자
카페24는 커피숍은 아니구요. 한국에 있는 호스팅 업체입니다.
도메인 : http://www.cafe24.com
먼저 회원가입을 해 주시기 바랍니다.
아주 일반적인 절차니까 이걸 못하신다면 이후의 절차 따라가기는 진짜로 힘든겁니다.

3.가상서버 호스팅

비교적 상당히저렴한 비용으로 서버를 운영하면서 발전시켜나갈 수 있는 서버 입니다.
클릭하시면 나오는 리스트 중에 제가 추천 드릴 것은 리눅스 가상서버 호스팅 일반형 입니다. 이유는 뭐 다른 건 없구요. 값이 싸서 입니다. 가격은 초기 설치비(1회)가 22,000원, 그 이후에는 한달에 5,000원이 소요되게 됩니다. 확실히 커피숍 임대료보다는 싸죠? 담배값 커피값 절약해서 나만의 서버를 갖게 되는 것 입니다.

4. 자 결제하세요.
신청하기 버튼을 눌러서 서버를 신청하시면 됩니다. 도메인은. xxxxx.cafe24.com으로 일단두셔도 되구요. 나중에 나만의 도메인을 사자 편에서 도메인을 사신 후 부터는 나만의 도메인을 사용하실 수 있구요. 그 전에는 xxxxx.cafe24.com으로 웹서비스를 운영하실 수 있게 됩니다. 미리 도메인을 꼭 사실 필요는 없습니다. 그냥 작은 프렌차이즈로 일단 시작하셔도 되구요. 나중에 나만의 브랜드로 변경할때에 위약금 같은게 없다는 의미 입니다. 서버 설치하는 데 시간이 좀 걸리니까요. 기다리신 후에 해당 도메인으로 잘 가는지 확인해 보시면 됩니다.

5.오늘은 여기서 끝.
드디어 여기서 멈추면 대국민 사기극이 될 수 밖에 없는 블로그 글쓰기가 되어 버렸습니다. 아직 가야 할 길이 아주아주 많기 때문에 저는 조금씩 조금씩 함께 전진하는 방법을 쓰려합니다. 중간에 어려운 것이 있으신 분은 덧글을 달아주세요. 그럼 제가 최대한 열심히 설명해 드릴께요. 그리고 진짜로 이 글을 보시고 서버를 사신 분들도 아래에 덧글을 달아주세요. 그럼 끝.


-----------------------------
RankToy.com - Click and cast Your vote
Fairedu.com - Photo card book for your children

1장. 나만의 서비스를 갖고 싶어하는 당신께...

포털서비스에서 기획이라는 것을 한지도 어언 8년이 되었고, 그냥 기획이라는 것은 그것보다 훨씬 더 오래된 지금의 마당에 갑자기 무언가 써 보기로 한 것은 마치 운명처럼 몇가지 계기가 있던 던 것 같습니다.

1. 이제 나만의 것이 갖고 싶다
직장인이라는 시스템은 계약(Contract)을 통해 이루어집니다. 기획자는 자신의 스스로는 불가능한 제품을 회사의 시스템과 계약함으로써 성공으로 이끌 수 있습니다. 회사는 이를 통해 성공으로의 길로 갈 수 있고 나는 그 안에서 스스로 만족감과 새로운 insight 를 가질 수 있게 됩니다. 그리고 회사는 이에 대한 댓가로 월급을 주죠. 내가 1년간 회사에 벌어다 주는 금액이 1억이든 10억이든 100억이든 결구 제가 받게 되는 금액은 월급 + 약간의 상여금이 될 겁니다. 

10년 넘는 기간을 기획자로 일하면서 언제부턴가 제가 갖게 된 목표는 언젠가 나 스스로도 인정할만한 100% 재미있는 무언가를 만들자 였습니다. 내가 100% 인정할 재미있는 것을 만든다면 100% 성공할 것이라고 믿었으니까요. 그리고 그 과정에서 나오는 모든 좋은 아이디어는 회사로, 100% 성공할 아이템이 나오는 바로 그때 창업을 하리라 하리라. 이것이 제 다짐이었습니다. 

하지만 결혼을 하고, 예쁜 아이를 갖고, 그들을 위한 새로운 삶을 위해 나의 시간을 쪼개는 일은 여전히 쉽지 않습니다. 하지만 나의 가족의 미래를 위해, 나의 꿈을 위해 100% 재미있는 것을 찾는 나의 여정은 아직 멈추지 않았고 솔직히 아직 못찾았지만 여전히 찾고 있습니다. 

2. 언어의 장벽
언제부턴가 제 manager는 외국인 이었구요. 언어는 저에게 녹록치 않은 장벽이었습니다. 다행스럽게도 말하기 좋아하는 성격탓에 communication은 그리 어렵지는 않습니다. 하지만 언어라는 것은 미묘한 차이가 있어서 조금만 틀리더라도 큰 오해로 이어질 수 있다는 것도 알게 되었습니다. 

저는 이 글을 읽으시는 분들의 수준이 "이전에 html 조금 해 본적 있구요. 나머지는 잘... html5뭐 이런건 전혀 모르죠...." 이런 사람이었으면 합니다. 솔직히 모르는 것 많을 수록 더 힘든것은 사실이지만... 이건 제가 가지고 있는 언어라는 것의 장벽을 낮출 수 있는 방법이 마련되어 있기 때문입니다. 

언어는 상호간에 약속입니다. 웹사이트를 만들기 위해 많은 언어를 사용해야 하는 독자분들에게 해드리고 싶은 말은 우리는 완전히 신세상에 온 외국인이니 굳이 아주 말을 잘 하려고 하지 말자는 겁니다. 우리는 그 때 그 때 필요한 언어들을 그자리에서 배워서 사용하는 방법을 사용할 겁니다. 다행스럽게도 제작에 필요한 거의 모든 기술은 인터넷에 모두 공개되어 있더군요. 우리는 빠르지 않더라도 철저히 찾아가면서 사이트를 구축해 가는 과정을 진행할 겁니다. 대신, 전체적으로 우리가 어떤 나라로 가고 있는지에 대한 부분은 명확히 짚어드리도록 하겠습니다. 저와 함께 하실 분들은 절대 아주 이해하기 어려운 두꺼운 책들을 끝까지 읽으려다 중간에 포기하는 짓을 하지 말아주시기 바랍니다.  

3. 업무량의 장벽
모든 IT일들이 그러합니다만.. 웹사이트를 제작하기 위해서는 상당히 많은 전문가 들이 필요합니다. 그리고 생각보다 해야 할 일들도 많습니다. 개인적으로는 이러한 수 많은 시간들이 IT 제품을 소유한 사람이 되게 하는데 장벽이 된다고 생각합니다. 이는 어느정도 경력이 쌓인 전문가들에게도 마찬가지일것이라는 생각입니다(그렇지 않다면 왠만한 개발자들은 모두 CEO가 되어 있겠지요).

저는 이번 개발방법론을 설정함에 있어 커다란 집을 목적으로 지어지는 과정으로 만들지 않을 계획입니다. 그것을 위해 만들어진 개발방법론 중에 scrum을 이용할 겁니다(어려운 용어는 잊어버리세요. 그냥 따라오다 보면 스스로 몸에 체득할 수 있는 좋은 개발방법론이고 언젠가 이 방법론을 사용하는 이유에 대해서 좀 더 구체적으로 설명할 기회가 되면 여담처럼 이야기를 해 드리도록 하겠습니다. 

숙제
각자 나는 무슨 서비스를 만들것인가 고민해 주세요.
이후로 가기 위한 50% 전진이 지금 시작되고 있는 것입니다.


-----------------------------
RankToy.com - Click and cast Your vote
Fairedu.com - Photo card book for your children