2009. 7. 15. 12:28 추가.
2009. 7. 15. 12:36 추가.
2009. 7. 15. 16:04 추가. 이 글에서까댄 지적한 부분에 대해서 이글루스 운영진 측의 답을 받았습니다. 원문은 공개하지 않고 제 첨언만 글로 남깁니다.
보기(이하 떼쓰는 투로 쓴 원글)
-----
하하 성질이 뻗쳐서 정말 네비바 사용안함 옵션 추가 외에 트랙백 보냅니다. 그리고 제목은 욕한 게 아니고 지난회 무한도전 패러디라고 생각해 주시길...
오늘 기존 스킨1.0 환경에서 자작한 스타일을 유지하려고 거의 하루종일 스킨 2.0를 만졌습니다. 정직하게 말하면 제 솜씨가 구려서 오늘 하루로는 원래 어림도 없고 전체 투자한 시간이 한 30시간은 넘을 것 같네요. 근데 저는 지금 무척 화가 나 있어요.
그 까닭은 제 구린 html+css 코드 이해력 때문도 아니고 병신같은 IE7이나 IE6의 무개념 렌더링 때문도 아녜요. 어차피 그런 건 이미 스킨 1.0 때css 핵을 덕지덕지 처넣어 다 극복했지요.
얘기했듯이 스킨 틈틈이 고치는 데 누적 30시간쯤 걸렸을 겁니다. 오늘만 여섯시간은 투자했을 거예요. 그리고 오늘 여섯 시간 중에 네 시간을 다음 스샷에 나온 문제를 고치는 데 투자했지요.
뭐가 다른지 보이시나요?
예, 익스 8과 파이어폭스3 에서는 정상적으로 아무런 여백도 나타나지 않는데, 익스 6과 7에서는 아무런 마크업도 없이 여백을 렌더링합니다. 구체적으로 어떤 버그인지는 모르겠으나, 사실 같은 문제는 스킨 1.0에서도 있었어요. 그리고 스킨 1.0에서는 대충 해결했어요.
그런데 2.0에서는 그게 안 됩니다. 뭐랄까... 저는 코드에 문제가 생겼는데 통 모르겠다 싶으면 블럭단위로 뜯어서 하나씩 On-Off 테스트 합니다. 사람 환장하는 쌩 노가다지요. 뭐 저로서는 다른 요령도 없으니 가장 확실한 방법이라서 이렇게 합니다.
우선 HTML 부분에 문제가 있나 보려고 약 2시간 정도 CSS와 HTML을 오가면서 조금씩 고쳐댔습니다. 안 잡히더군요... 틀림없이 코드는 멀쩡한데 실제 적용된 화면만 구립니다. 병신이에요. 더 웃기는 점은, 익스 6하고 7에서만 이상하게 보인다고 했잖아요, 근데 익스 6하고 7에서도 "지금 적용하기" 말고 "미리보기"에서는 제대로 나온다는 거죠. 하!
이쯤 되니 슬슬 열이 오르기 시작해서, 아예 스킨 2.0의 오리지널 2단 템플릿을 베껴서 제 스킨에 덮었습니다. 만일 문제가 유지된다면 ① CSS 가 병신이거나 ② 이글루스에서 제공한 오리지널 템플릿이 병신인거죠. 이때까지도 저는 이글루스 개발팀에 무한한 신뢰를 보내고 있었으므로 ②의 확률을 제로에 가까울 것으로 보고 이때부터 ①의 관점에 입각해 CSS를 블럭단위로 뜯어 테스트하기 시작했습니다.
그리고 저는 마침내 알아버린 것이지요 금단의 비밀을...
보시다시피, 유저가 편집가능한 CSS에 아무 내용이 없는데 문제는 그대로입니다. 익스6 과 익스7에서 저 정체불명의 공백이 유지되고 있었어요. 이걸 깨달은 시점이 즉 스킨2.0을 편집하는 데 오늘 투자시간 6시간 남짓 그리고 누적투자시간 30시간 걸린 때였습니다.
스킨 1.0 에서는 태그를 다 못 건드려도 접근할 수 있는 CSS 클래스나 ID로 어느정도 극복이 됐어요. 그런데 이번에 나온 스킨 2.0은 자유도가 심하게 제약됩니다. 자동 템플릿으로 처리하다보니까 그런 거지요. 그건 이해하겠는데 그럼 템플릿들은 최소한 내놓기 전에 브라우저별로 다 테스트를 해 봤어야 되잖아요? 스킨 1.0 에선 스타일로 저 흰 부분을 그냥 흰 바탕이 아니라 투명 블럭요소로 만들 수 있어서, 배경으로 처리할 수 있었지요. 근데 2.0 에선 배경 바탕을 지정해도 브라우저 버그인지, 스크롤을 움직이면 처음엔 배경그림이 나오다가도 다시 올렸다 내리면 흰 여백이 나와버리는 지랄같은 렌더링이 됩니다.
문제를 알아도 고칠 수 없는 버그를 내놓고 어쩌라는 거지요. 이 문제는 이글루스에서 BODY 태그를 못 건드리게 한 것이 근본 원인입니다. BODY 내부에 DIV 블럭요소를 잔뜩 쳐넣어 놓고 그걸 켜고 끄는 방식으로 템플릿 바리에이션을 만들었는데요. 지금 제가 스샷 찍어 놓은 부분은, 아무 내용이 없는 부분이에요. 무슨 잘못 들어간 태그가 있어서 생긴 공백이 아니라, 문자 그대로 null, 아무 것도 없는 것을 렌더링하는 버그라고요. 이걸 고치려면 지금 사용자가 편집 가능한 범위를 벗어난 상위 블럭요소에 접근해야 되는데, 안 되니까 돌아버리는 거지요.
저는 성인군자가 아닙니다. 그냥 스킨 커스터마이징에 강박적인 취미가 있는 넷찌질이란 말예요. 사실 이틀 전에 전혀 다른 문제로 - 지난번에 스킨 개편하면 사용자 스킨 웹표준 향상시킨다고 했는데, Validation 돌려보니 좀 속은 것 같아서 - 고객센터 메일을 보내긴 했지만 이정도까지 열받지는 않았어요. 하지만 스킨 2.0 베타에 대해서 몇 가지를 쓸 때도 좀 짜증스러웠지만 애써 다른 분들하고 좋게 봐 주려는 쪽이었죠.
그런데 이제 생각해보니 아무래도 지금 수준은 베타를 달고 시작했지만 알파 이하인 것 같아요. 클로즈 베타도 이거보단 낫겠습니다. 몇 달 전에 티스토리 스킨 다 만들어놓고도 오히려 저는 쓸 일 없기를 바랐는데, 진짜 배신당한 기분이에요. 이렇게 궁시렁대봤자 이글루스 - 어차피 별 대답도 없겠지 뭐. 이런 마이너한 블로그야 사실 은근히 무시받든 내놓고 무시받든 무시받는 건 똑같기도 하고요.
아무리 대세는 까고 싶을 때마다 까고 기분 안 좋으면 광역으로 까고 쿨타임 돌아오면 귀찮아도 까는 거라지만 저는 이글루스는 안 까려고 했는데 업데이트때마다 이렇게 대차게 까이려고 작정한 듯 보이면 어쩌자는 건가요.
메일문의 회신 기다리겠습니다 ^-')r~
---------
덧.
egloos_skin_2.0_structure.rtf
첨부파일은 제가 스킨 고치는 동안 일일이 수작업으로 확인한 CSS코드 용도 분석 내용입니다. (워드패드 파일) 스킨2.0 내놓은 지가 언젠데 아직도 스킨 만들기 도움말이 없어... 짜증나서 만들었습니다.
제가 쓴 게 2단 템플릿이라 다른 거랑 좀 다를 수도 있고요.
클래스가 적용되는 HTML 태그 블럭 깊이별로 탭을 지정했습니다만 ... 닫기태그 안 써서 알아보기 힘들 수도 있겠네요.
html 편집모드하고 실제 적용화면의 소스보기를 같이 참고한 거라서, 태그 구조가 완전히 일치하지 않을수도 있겠네요.
기본적으로 태그.클래스명 이거나 태그#아이디명.클래스명 입니다.
가끔 이중 클래스로 f_clear 하나 더 붙어있는 것은 그냥 탭한번 더 하고 적었고요.
사실 저 혼자 보려고 만든거라 하나도 안 다듬었으니 알아볼 이글루스 유저분이 계실지는 모르겠네요. 뭐 이따위 거야 이미 다 문서화는 해뒀겠지만 운영진은 이거 보면 스킨2.0 도움말부터 만들라고 하고 싶군요... 이상입니다.
2009. 7. 15. 12:36 추가.
2009. 7. 15. 16:04 추가. 이 글에서
보기(이하 떼쓰는 투로 쓴 원글)
-----
오늘 기존 스킨1.0 환경에서 자작한 스타일을 유지하려고 거의 하루종일 스킨 2.0를 만졌습니다. 정직하게 말하면 제 솜씨가 구려서 오늘 하루로는 원래 어림도 없고 전체 투자한 시간이 한 30시간은 넘을 것 같네요. 근데 저는 지금 무척 화가 나 있어요.
그 까닭은 제 구린 html+css 코드 이해력 때문도 아니고 병신같은 IE7이나 IE6의 무개념 렌더링 때문도 아녜요. 어차피 그런 건 이미 스킨 1.0 때
얘기했듯이 스킨 틈틈이 고치는 데 누적 30시간쯤 걸렸을 겁니다. 오늘만 여섯시간은 투자했을 거예요. 그리고 오늘 여섯 시간 중에 네 시간을 다음 스샷에 나온 문제를 고치는 데 투자했지요.
▲ 이 블로그 스크롤바를 끝까지 내린 상태(파이어폭스3.5)
▲ 이 블로그 스크롤바를 끝까지 내린 상태(스샷은 익스플로러7, 익스 6도 마찬가지)
뭐가 다른지 보이시나요?
예, 익스 8과 파이어폭스3 에서는 정상적으로 아무런 여백도 나타나지 않는데, 익스 6과 7에서는 아무런 마크업도 없이 여백을 렌더링합니다. 구체적으로 어떤 버그인지는 모르겠으나, 사실 같은 문제는 스킨 1.0에서도 있었어요. 그리고 스킨 1.0에서는 대충 해결했어요.
그런데 2.0에서는 그게 안 됩니다. 뭐랄까... 저는 코드에 문제가 생겼는데 통 모르겠다 싶으면 블럭단위로 뜯어서 하나씩 On-Off 테스트 합니다. 사람 환장하는 쌩 노가다지요. 뭐 저로서는 다른 요령도 없으니 가장 확실한 방법이라서 이렇게 합니다.
우선 HTML 부분에 문제가 있나 보려고 약 2시간 정도 CSS와 HTML을 오가면서 조금씩 고쳐댔습니다. 안 잡히더군요... 틀림없이 코드는 멀쩡한데 실제 적용된 화면만 구립니다. 병신이에요. 더 웃기는 점은, 익스 6하고 7에서만 이상하게 보인다고 했잖아요, 근데 익스 6하고 7에서도 "지금 적용하기" 말고 "미리보기"에서는 제대로 나온다는 거죠. 하!
이쯤 되니 슬슬 열이 오르기 시작해서, 아예 스킨 2.0의 오리지널 2단 템플릿을 베껴서 제 스킨에 덮었습니다. 만일 문제가 유지된다면 ① CSS 가 병신이거나 ② 이글루스에서 제공한 오리지널 템플릿이 병신인거죠. 이때까지도 저는 이글루스 개발팀에 무한한 신뢰를 보내고 있었으므로 ②의 확률을 제로에 가까울 것으로 보고 이때부터 ①의 관점에 입각해 CSS를 블럭단위로 뜯어 테스트하기 시작했습니다.
그리고 저는 마침내 알아버린 것이지요 금단의 비밀을...
▲ 빈 CSS 적용하고 스크롤바를 끝까지 내린 상태(파이어폭스3.5)
▲ 빈 CSS 적용하고 스크롤바를 끝까지 내린 상태(스샷은 익스플로러7, 익스 6도 마찬가지)
보시다시피, 유저가 편집가능한 CSS에 아무 내용이 없는데 문제는 그대로입니다. 익스6 과 익스7에서 저 정체불명의 공백이 유지되고 있었어요. 이걸 깨달은 시점이 즉 스킨2.0을 편집하는 데 오늘 투자시간 6시간 남짓 그리고 누적투자시간 30시간 걸린 때였습니다.
스킨 1.0 에서는 태그를 다 못 건드려도 접근할 수 있는 CSS 클래스나 ID로 어느정도 극복이 됐어요. 그런데 이번에 나온 스킨 2.0은 자유도가 심하게 제약됩니다. 자동 템플릿으로 처리하다보니까 그런 거지요. 그건 이해하겠는데 그럼 템플릿들은 최소한 내놓기 전에 브라우저별로 다 테스트를 해 봤어야 되잖아요? 스킨 1.0 에선 스타일로 저 흰 부분을 그냥 흰 바탕이 아니라 투명 블럭요소로 만들 수 있어서, 배경으로 처리할 수 있었지요. 근데 2.0 에선 배경 바탕을 지정해도 브라우저 버그인지, 스크롤을 움직이면 처음엔 배경그림이 나오다가도 다시 올렸다 내리면 흰 여백이 나와버리는 지랄같은 렌더링이 됩니다.
문제를 알아도 고칠 수 없는 버그를 내놓고 어쩌라는 거지요. 이 문제는 이글루스에서 BODY 태그를 못 건드리게 한 것이 근본 원인입니다. BODY 내부에 DIV 블럭요소를 잔뜩 쳐넣어 놓고 그걸 켜고 끄는 방식으로 템플릿 바리에이션을 만들었는데요. 지금 제가 스샷 찍어 놓은 부분은, 아무 내용이 없는 부분이에요. 무슨 잘못 들어간 태그가 있어서 생긴 공백이 아니라, 문자 그대로 null, 아무 것도 없는 것을 렌더링하는 버그라고요. 이걸 고치려면 지금 사용자가 편집 가능한 범위를 벗어난 상위 블럭요소에 접근해야 되는데, 안 되니까 돌아버리는 거지요.
저는 성인군자가 아닙니다. 그냥 스킨 커스터마이징에 강박적인 취미가 있는 넷찌질이란 말예요. 사실 이틀 전에 전혀 다른 문제로 - 지난번에 스킨 개편하면 사용자 스킨 웹표준 향상시킨다고 했는데, Validation 돌려보니 좀 속은 것 같아서 - 고객센터 메일을 보내긴 했지만 이정도까지 열받지는 않았어요. 하지만 스킨 2.0 베타에 대해서 몇 가지를 쓸 때도 좀 짜증스러웠지만 애써 다른 분들하고 좋게 봐 주려는 쪽이었죠.
그런데 이제 생각해보니 아무래도 지금 수준은 베타를 달고 시작했지만 알파 이하인 것 같아요. 클로즈 베타도 이거보단 낫겠습니다. 몇 달 전에 티스토리 스킨 다 만들어놓고도 오히려 저는 쓸 일 없기를 바랐는데, 진짜 배신당한 기분이에요. 이렇게 궁시렁대봤자 이글루스 - 어차피 별 대답도 없겠지 뭐. 이런 마이너한 블로그야 사실 은근히 무시받든 내놓고 무시받든 무시받는 건 똑같기도 하고요.
아무리 대세는 까고 싶을 때마다 까고 기분 안 좋으면 광역으로 까고 쿨타임 돌아오면 귀찮아도 까는 거라지만 저는 이글루스는 안 까려고 했는데 업데이트때마다 이렇게 대차게 까이려고 작정한 듯 보이면 어쩌자는 건가요.
메일문의 회신 기다리겠습니다 ^-')r~
---------
덧.
egloos_skin_2.0_structure.rtf
첨부파일은 제가 스킨 고치는 동안 일일이 수작업으로 확인한 CSS코드 용도 분석 내용입니다. (워드패드 파일) 스킨2.0 내놓은 지가 언젠데 아직도 스킨 만들기 도움말이 없어... 짜증나서 만들었습니다.
제가 쓴 게 2단 템플릿이라 다른 거랑 좀 다를 수도 있고요.
클래스가 적용되는 HTML 태그 블럭 깊이별로 탭을 지정했습니다만 ... 닫기태그 안 써서 알아보기 힘들 수도 있겠네요.
html 편집모드하고 실제 적용화면의 소스보기를 같이 참고한 거라서, 태그 구조가 완전히 일치하지 않을수도 있겠네요.
기본적으로 태그.클래스명 이거나 태그#아이디명.클래스명 입니다.
가끔 이중 클래스로 f_clear 하나 더 붙어있는 것은 그냥 탭한번 더 하고 적었고요.
사실 저 혼자 보려고 만든거라 하나도 안 다듬었으니 알아볼 이글루스 유저분이 계실지는 모르겠네요. 뭐 이따위 거야 이미 다 문서화는 해뒀겠지만 운영진은 이거 보면 스킨2.0 도움말부터 만들라고 하고 싶군요... 이상입니다.
덧글
네비바 수정공지 뜨고 나서도 1.0스킨에 적용이 어설프게 되어서 순간 짝났었는데;;
곧 다시 수정 됐더라구요..
제가 잘 모르는 분야라 imc84 님과의 대화가 이루어지질 않군요.. orz.
뻘플도 환영한다시길래 남겨 봅니다.. ^ㅡ^;;
대체 무슨 생각인지 모르겠습니다. 말씀하신 익스 호환문제 좀 겁나니 테스트 해 봐야 겠네요...
특히 매뉴얼 부분에서 강하게 공감하고 있어요. 야이...
아무튼 매뉴얼은 필요하지요.
지금 스킨보니가 고치셨네요!!?!?