Strict Standards: Non-static method Soojung::addReferer() should not be called statically in /home/lifthrasiir/sites/sapzil.info/soojung/settings.php on line 79

Warning: Cannot modify header information - headers already sent by (output started at /home/lifthrasiir/sites/sapzil.info/soojung/settings.php:79) in /home/lifthrasiir/sites/sapzil.info/soojung/classes/Counter.class.php on line 63

Strict Standards: Non-static method Entry::getEntry() should not be called statically in /home/lifthrasiir/sites/sapzil.info/soojung/entry.php on line 51

Strict Standards: Non-static method Soojung::entryIdToFilename() should not be called statically in /home/lifthrasiir/sites/sapzil.info/soojung/classes/Entry.class.php on line 182

Strict Standards: Non-static method Soojung::queryFilenameMatch() should not be called statically in /home/lifthrasiir/sites/sapzil.info/soojung/classes/Soojung.class.php on line 55
TokigunStudio3 | 블로그: 내가 웹 페이지를 만드는 방법

내용으로 바로 넘어 가기


TokigunStudio3

228 / 3282   


더 이상 이 블로그는 운영되지 않습니다. 새 블로그로 가 주세요.

내가 웹 페이지를 만드는 방법

768/04/17 AM 11:05 | 개발/웹 표준과 접근성 | 20 comments | 1 trackbacks | AllBlog: vote, to pocket

나 같은 경우 다음과 같은 과정을 따른다. 아마 표준을 지키려 노력하시는 분이라면 비슷하게 나오겠지... :)

1. 어떤 컨텐츠를 넣을 지 생각한다: 모양 먼저 생각하면 안 된다. 모양 먼저 생각하면 나중에 컨텐츠 집어 넣을 때 귀찮거나 오류가 생기는 경우가 많다.
2. 컨텐츠를 집어 넣어서 기초적인 페이지를 만든다: 이 과정에서 약간의 css를 집어 넣는 경우도 있다. 아무튼 이 과정에서는 무조건 XHTML로 결과물이 나와야 한다. (개인적으로는 1.0 Strict나 1.1로 만들 것을 권한다) 다시 말하지만 절대로 이 과정에서 모양이 나오면 안 된다.
3. 모양을 구상한다: css로 웹 페이지를 많이 구성하게 되면 어느 부분이 수정되어야 할 지 대충 눈에 보이게 된다. 혹은 2번을 하면서 3번을 고려하는 경우도 있는데, 이러다가 또 낭패 본 적이 많아서 웬만하면 잘 안 하려 한다. -_-;
4. css/javascript를 집어 넣는다: 웬만하면 javascript는 넣지 않는 걸 권장하지만 꼭 필요하다면 MS DOM만은 쓰지 말자. css로 도저히 못 해 먹겠다 싶은 효과를 넣을 때만 사용하고 특히 a 태그 href 속성에다가 javascript:..로 주소 넣는 건 절대 금물이다.
4a. 기타 오브젝트들을 집어 넣는다: 여기서 말하는 오브젝트들은 플래시, 음악 파일, 동영상 파일 등등이다. 음악/동영상의 경우 미리 갖춰 놓은 코드들을 잘 사용해서 만들면 되고, 플래시는 절대로 꼭 필요하지 않은 곳에는 사용하지 않는다. 정 필요하다면 3번 과정에서 플래시 없는 버전과 플래시 버전을 둘 다 만들고 대체 텍스트 스타일로 넣는다.
5. 다른 브라우저에서 잘 돌아 가는 지 확인한다: 워낙에 가지각색의 브라우저가 있고, 그 브라우저들의 표준 지원이 각각 따로 놀기 때문에 확인해 봐야 한다. 나 같은 경우 익스플로러, 파이어폭스(사실상 모질라도 같이 확인하는 셈이다), 오페라에서 확인해 본다. cross browsing 관련 팁들은 인터넷에 널려 있으니 구글링으로도 충분히 고치는 게 가능하다. 필요하다면 아는 분들께 부탁해서 사파리도 확인해 보는 게 좋겠지만...
6. 만약 php 등의 서버사이드 스크립트를 통해서 동적으로 생성되는 페이지라면 모든 경우에 대한 페이지(부분적으로라도)를 만들어 놓고 5번까지 완전히 마친 후에 코드를 집어 넣는다. (나 같은 경우 3번과 6번을 같이 하는 편이지만)

저번에 학교 홈페이지 만들 때는 3/4번과 1/2번이 완전히 거꾸로 되어서 수정에 엄청난 어려움을 겪었다. (처음부터 테이블 안 쓰고 만들 수 있었는데 디자인 한 모 군이 테이블로 줘 버려서...) 절대로 다시는 그러지 말자-_-라는 다짐을 하는 김에 작업 방법을 정리해 보았다.

TrackBack URL: http://sapzil.info/soojung/trackback.php?blogid=301

Trackback: 오리대마왕님 집 (1720/04/17 AM 11:05)

Comment: hey (2005/01/12 PM 07:58)

우와 유용해요. !!

Comment: Daybreaker (2005/01/12 PM 08:39)

네가 설명한 방법이 좋긴 한데 말이지(나도 동의함), 학교 홈페이지 만들 때 미리 이걸 이야기 해 주지 그랬어?? 서로 기본 방법에 대한 의견 합의가 안 된 상태에서 진행했으니 그 꼴이 날 수 밖에... (쩝.. 너나 나나 마찬가지다) -_-;;

(참고로 제가 '디자인 한 모 군'입니다 -_-)

Comment: 토끼군 (2005/01/12 PM 09:15)

hey: 흐흐흐... 아마 한국 모질라 커뮤니티에 비슷한 글이 있을 겁니다.
Daybreaker: 워낙 정신 없고 맛이 간 상태에서 그걸 설명해 주는 건 무리였음 -_-;;;;;;;;;;;; 이래 저래 미안하군 그래.

Comment: 인클루드 (2005/01/12 PM 10:08)

전 디자인은 전혀 신경을 안(못) 쓰는지라... OTL

ps: 리눅스용 웹 브라우저인 컹커러가 사파리랑 똑같은 KHTML 엔진을 쓰니까, 컹커러에서 조사해 보시면 사파리에서도 어떻게 나올지 대강 짐작해 보실 수 있습니다... ^^
ps2: 개인적으론 KHTML 엔진이 display: none; 되어 있는 엘리멘트들을 완전 무시(JavaScript 로 접근이 안되요)하는것이 정말 맘에 안듭니다... -.-;

Comment: 토끼군 (2005/01/12 PM 10:51)

인클루드: 아 그렇지요. 엔진이 같으면 출력 결과가 얼추 같을 테니... :)

Comment: kingori (2005/01/13 AM 10:06)

그런데, <a href="javascript:blah..."> 를 절대 쓰지 말아야 하는 이유가 무엇이지요? 대략, <a href="#" onclick=""> 으로 구현하는 것은 알지만 @_@

Comment: 토끼군 (2005/01/13 AM 11:08)

kingori: 이유는 간단합니다. 자바스크립트 안 되는 브라우저에서는 절대로 접근할 수 없는 링크가 되어 버리거든요 @_@ <a href="#" onclick="window.open('blah');"> 대신에 <a href="blah" onclick="window.open('blah'); return false;"> 같이 쓰는 게 좋습니다. (물론 표준에서 javascript:로 시작하는 URL 자체가 a href="..."에 쓸 수 없는 URL이기도 하지만... ;;;)

Comment: kingori (2005/01/13 AM 11:27)

옙.확실히 spec 에서 href= 뒤에는 URI 만 오도록 명시하고 있네요. 그럼 왜 애초에 <a href="javascript:blah">가 먹게 만든 것인지 모르겠군요. 그런데 실제 작업하면서 똑같은 동작을 a href 으로도, onclick 으로도 먹게 만들려면 머리가 터지겠군요. 저라면 거기서 GG 를 치겠습니다만. 뭐, 애시당초 저보고 사이트 기획부터 하라고 한다면야 javascript 안쓰고 만들겠지만 ^^; @그건 그렇고, spec 문서를 따라가면서 왜 a href="javascript" 가 표준이 아닌가를 알아보는것도 그리 쉽지만은 않네요. 결국 RFC 스펙을 다 읽어보지 않는이상 ( 그럴리는 없지만 RFC에 javascript: 도 멀쩡한 URI 라고 해버리면 표준이니.. ) 알 수가 없을테니까요. 아 힘드네요^^

Comment: 토끼군 (2005/01/13 AM 11:47)

kingori: 흐흐흐... 원래는 extension 정도로 들어 갔던 게 요즘은 표준처럼 사용되고 있는 셈이지요. (MS DOM처럼 :S) 대부분의 팝업 페이지는 저런 방법으로 href에도 함께 명시해 둬도 충분히 접근성을 유지할 수 있습니다. (팝업 광고는... 안 뜨는 게 역시 -_-;;;)
덤) javascript:는 멀쩡한 URI가 아닙니다. 일단 well-defined scheme가 아니고, 공식적으로 인정되는 scheme는 IANA가 관리하는데 IANA에서 인정을 안 해 주고 있죠. http://www.iana.org/assignments/uri-schemes를 참고하세요.

Comment: kingori (2005/01/13 AM 11:56)

아. 결국 제가 원하던 것은 IANA 의 scheme 이네요. ^^; 고맙습니다. 팝업창 띄우기 정도야 문제가 아니겠지만, 다른 복잡한 문제( 중요한 validation 등등?)까지 얽힌 부분까지 비 javascript 지원을 하라고 하면 역시나 힘이 들것 같긴 합니다. 고맙습니다 :)

Comment: 토끼군 (2005/01/13 PM 12:00)

kingori: 넵. :)

Comment: 디토 (2005/01/13 PM 02:03)

사파리에서 KHTML을 고치면 그 내용이 컹커러에도 반영된다고 합니다. 역시 그 반대도 마찬가지고요.

Comment: 토끼군 (2005/01/13 PM 02:11)

디토: 엔진을 서로 공유한다는 건가요? 정확한 의미를 잘 모르겠습니다.

Comment: 디토 (2005/01/13 PM 06:12)

토끼군: 사파리에서 KHTML을 거의 그대로 사용하고, 사파리 개발자가 KHTML 개발을 한다는 얘깁니다. :)

Comment: litconan (2005/01/13 PM 07:36)

100% <s>감동</s> 동감!
디자인(???) 하기 전에 만든 화면은 '페이지형식→형식없음'에 있는 것과 거의 같은 모습으로 꾸민 뒤 슬금슬금 형식을 넣으면 호환성을 고려한 페이지 구성이 완성~~~~~~~~~~~~~~
자바스크립트는 아예 모르니 사용할 일이 없네요 :)

Comment: 토끼군 (2005/01/13 PM 08:37)

litconan: 태그 안 먹혀요 ~_~ 디자인 과정과 컨텐츠 채우는 과정을 분리하는 게 핵심입니다.

Comment: 디토 (2005/01/13 PM 11:02)

토끼군: 그 두 가지를 동시에 할 수도 있습니다. -_-; 물론 두 명이서 해야겠지만요.

Comment: 토끼군 (2005/01/14 AM 12:05)

디토: 저번에 그랬다가 피 봤습니다. ~_~ 두 명 모두 충분한 지식과 경험이 필요해요.

Comment: Daybreaker (2005/01/14 AM 01:15)

저도 같이 피봤습니다. @.@.. 하지만 디자인과 프로그래밍, 그리고 컨텐츠가 완전히 분리되려면 동시에 서로가 서로를 이해할 수 있어야 합니다.

Comment: 디토 (2005/01/14 AM 08:23)

토끼군, Daybreaker: 위키 같은게 그 대안이 될 수 있죠.

Copyright (c) 1995-2005, Kang Seonghoon (Tokigun).