'웹코딩'에 해당되는 글 1건

  1. 2009.06.29 포털사이트 개발시 디자이너이 코딩영역은 어디까지
2009. 6. 29. 10:41

[질문]

포털사이트는 한번도 않만들어본 디자이너인데요
홈페이지도 간단한것만 만들어 봤어요
그런데, 어떤 다른 경로로 포털싸이트 의뢰가 들어왔어요
저한테는 그냥 인터페이스구성하고 html코딩까지만 해주면 나머지는 웹프로그래머들이 알아서 한다는데
그 html코딩이라는게 왠지 그냥 제가 만들어본 간단한 기업홈페이지랑 좀 다른것 같아서요
드림위버나 이런데 숨어있는 색다른 이상한 기능들도 써줘야 하는건가 싶기도 하고
css니 뭐니 이런것들도 있는것 같던데
혹시 유경험자이신분은 조언좀 부탁드려요 
제가 어디까지 알아서 해줘야 싫은소리 않듣고 할 수 있는것인지...
부탁드립니다. 


[답변]

안녕하세요. IT전문 컨설턴트입니다.

포털사이트 제작에서 디자이너의 영역은 정하기 나름입니다.
어떻게 계약이 되셨느냐 하는 부분도 중요하겠죠.

일반적으로 포털사이트를 제작하기 위해서는 전문적인 코더가 투입되고, 디자이너의 경우에는 PDS만 작업하는 경우가 많습니다. 계약상에 코딩 부분이 포함되어 진행하는 경우라면 작업을 해야겠죠....^^

지금 상황이라면 아마도, 코딩까지 진행을 하셔야 할듯 합니다.
포털사이트는 많은 유저들이 접속을 하는 사이트입니다.

화려한 디자인 보다는 반복적인 요소와 시선의 흐름, UI등을 고려하셔서 디자인을 해야합니다.
코딩 부분에서는 이미지를 가능하면 적게 사용할 수 있도록 코딩이 되어야 하며, 한국형웹표준화 지침에 따라서 표준화 Web 코딩을 진행하셔야 합니다. 몇몇의 스크립트는 웹브라우저의 특성상 보여지지 않을수도 있습니다.

코딩 완료후에는 크로스 브라우징 테스트를 하여, Explorer 뿐만아니라 사파리계열, 모질라, 크롬 등의 브라우저에서도 서비스에 문제가 없도록 진행해야 합니다. 
이미지를 잘라서 테이블을 코딩하는 방법 또한, 효율적인 운영이 가능하도록 코딩이 되어야 합니다.

아래와 같은 영역을 코딩해야 한다면,

 아래와 같은 방법으로 분할된 코딩을 해야합니다.

     
     
     

일반적인 홈페이지에서 위의 경우에는 BG이미지를 하나 넣거나 각 모서리별로 이미지를 잘라서 사용을 하지만, 포털사이트의 경우에는 재사용될수 있도록 코딩하는 것이 좋습니다.

그런 이유에서 CSS를 활용해서 Class값을 지정한 방법으로 거의 대부분의 포털사이트에서 코딩을 하고 있습니다. CSS를 쓰더라도 표준적인 CSS를 사용하여 웹표준에 맞게 작업을 해야겠죠..

일반 홈페이지와 분명 포털사이트는 다를수 밖에 없습니다.
비슷하다고 생각하신다면, 동시접속자 1만명 미만의 사이트만 제작해 보신분일듯 합니다.
네이버 정도의 규모가 아니더라도 동시 접속자를 많이 수용하기 위해서는 최적인 디자인과 코딩, 개발이 답이죠.. 

포털사이트 컨설팅을 진행해 보면, 가장 문제가 되는 부분이 동시접속자가 많아졌을때, 사이트가 급속도로 늦어져서 서비스에 대한 유저들의 불만이 많다는 점입니다. 이런 문제점은 개발당시 표준적 개발방법론에 따라 개발하지 못하고, 이미지를 비 효율적으로 작업해서 운영하는 경우가 대부분입니다.

하드웨어 장비의 강화로 해결하면 되지 않을까 생각하시는 분도 있겠지만.. 장비의 추가 및 관리 비용과 포털에 맞는 개발방법론으로 만든 사이트의 효율성은 차이가 날수 밖에 없습니다. 그 부분이 포털의 기술력이겠죠.

코딩 이후에 메인페이지 전체 용량, 즉 이미지,플래쉬를 포함한 용량을 구해보세요.
네이버도 디자인 기술이 없어서 택스트 위주의 사이트를 구성한 것이 아닙니다..^^

로딩 용량이 1M인 사이트와 로딩용량이 200KB인 사이트는 숫자로는 5배 차이가 나지만, 실제적으로 접속자가 몰릴경우 수십배 이상의 차이가 날수도 있습니다. 

이런 부분때문에 포털사이트 코딩을 할때는 드림위버와 같은 툴로 코딩하는 소프트코딩 방식보다, 메모장이나 에디터플러스 등으로 코딩하는 하드코딩을 많이 사용하고 있습니다. 소프트코딩만 해보신 경우라면, 작업이후에 필요없는 코드는 지워야겠죠..

표준화와 관련된 코딩 부분은 네이버에서 운영하는 http://html.nhndesign.com/
사이트를 참고해 보시면 도움이 되실듯 합니다.


Posted by ToTb