Blog 본문

공지사항

다룸 제작기

공지사항|입력 2013. 3. 11. 09:17

기획부터 디자인, 마크업, 개발까지 모든 과정을 팀원들이 분담하여 틈틈이 진행하다 보니 어느새 3개월이라는 긴 시간이 걸렸네요. 


생각지도 못했던 이슈들에 제작 초반 예상했던 시간보다 훌쩍 넘겨 완료 되었지만~ ㅎㅎ

힘들었던 제작 과정이었지만, 각 팀원에게 피가 되고 살이 되는 시간이었기에 그 과정을 함께 나누고 싶어 기록해 보았습니다.



제작 과정 스크린샷



기획이 먼저? 개발이 먼저?


언제나 기획자님이 주시는 기획안을 받아보기만 하던 웹표준개발팀인지라 기획이 이렇게 어렵고 추상적인 작업인지 새삼 깨닫게 되는 계기가 되었습니다. (기획자분들 대단하십니다-ㅁ -) 

GOOD BOY!

개발자가 진행하는 기획의 최대 장점은 앞으로 진행될 개발단계에서의 이슈 사항을 최소화 할 수 있었고 어떠한 부분들이 작업에 큰 리소스를 소모하게 될 지 잘 알고 있다는 점이었습니다. 

반면 이 점이 자꾸 개발에 맞춰 기획을 하게 되는 딜레마에 빠져 기획은 산으로.. 가게 되기도 하였네요. 한참 헤매었습니다 ㅎㅎ


기획은 산으로...



접근성, 반응형 시작은 디자인에서부터~!


우선은 웹표준개발팀에서 디자인을 한다는 것 자체가 힘든 일이었습니다. ㅋㅋ 

첫 시작부터 반응형 웹과 접근성을 고려하여 작업을 진행했어야 했는데, 일정 상 마크업 진행은 해야겠고 급한 마음에 우선 pc 1벌부터 뽑아보자! 했던 시작이 추후에 수정 사항을 많이 만들게 되었네요.


ㅠㅠ



접근성의 경우, 이 사이트의 목적(?)이기도 하기에 기획단계에서부터 가장 신경써서 반영하려고 했던 부분이었습니다. 그래서 디자인 작업을 하며 이러한 부분을 최대화 하려고 하다 보니 접근성에 대해서도 많은 공부가 되었습니다.


Ps. 디자인을 팀 내에서 자체적으로 제작 하다 보니 아무래도 전문가의 코칭이 필요 했습니다. 검수에 조언주신 디자인팀 정말 감사합니다^^



마음껏 써라 HTML5, CSS3!!


이번 사이트 제작을 통해 html5와 css3 의 흥미로운 속성/요소들을 많이 사용해 볼 수 있어서 좋은 기회가 되었습니다. 기존에 스크립트로 처리했던 페이지의 동적인 부분들을 마음껏 html5와 css3로 구현해 놓고 나니 참 뿌듯합니다.



dough UI Framework 스크린샷


특히 컨텐츠 제작에 Dough UI Framework를 사용해서 컨텐츠의 마크업 시간이 많이 단축되고 한결 수월했습니다. 덕분에 svg 나 캔버스 애니메이션 등등의 구현에 더 매진할 수 도 있었네요.


그리고 반응형 웹을 제작하면서 배운 점이 굉장히 많은데요. pc, pad, mobile 3벌이 아닌 정말 말 그대로 N스크린! 요즘 갤럭시 노트, 아이패드 미니 등등 스크린 사이즈가 다양하잖아요~ 어떤 사이즈에도 아름답게 랜더링 될 수 있도록! PC부터 작업을 시작해 놓고 보니 아 .. 왜 모바일 작업을 먼저 하는 것이 수월한지 해보니까 알겠네요 ㅎㅎ


fat-free php 컨트롤러와 템플릿의 분리


다룸을 개발하기에 앞서 고민되었던 부분이 서버사이드의 고민이었습니다. 레퍼런스 사이트이다 보니.. 정적인 페이지가 주이고.. 거기에 db에서 원하는 데이터만 끄집어내서 보여주는 게 전부여서 처음엔 프레임워크를 사용하지 않고 그냥 전달받은 마크업 베이스에 필요한 부분만 하나하나 넣을까.. 그치만 php를 사용하면서 제일 불만이었던 게 소스 가독성이었습니다.. ^^; 별도의 템플릿 엔진을 사용하지 않고 코딩을 하다 보면 마크업 코드와 php코드가 섞여 뒤죽박죽이 되어버리는.. 

그래서 생각한 게 최소한 템플릿과 컨트롤러 정도는 구분을 해주자.. 그럼 기왕에 구분하는 거 적당한 프레임워크를 사용해보자.


php 프레임워크는 많은 프레임워크들이 나와있습니다. cake php나 code ignighter 와 같은 이름만 들어도 아~ 할만한 프레임워크들이죠. 물론 제공하는 기능들도 화려합니다. 하지만 다룸에서 생각하는 프레임워크는 크고 쓰기 편한 프레임워크가 아닌 컨트롤러와 템플릿을 분리해주는 역할만 해주면 제 역할이 끝나는 그러한 프레임워크였습니다.


그래서 도입한 게 fat-free php (https://github.com/bcosca/fatfree) 란 경량프레임워크(micro-framework) 였습니다. fat-free는 웹서비스를 빠르게 구현하도록 도와줄 수 있는 좋은 프레임워크로 괜찮은 routing engine과 template engine을 제공합니다. 덕분에 서버사이드 로직과 템플릿 로직을 분리하여 다룸을 개발할 수 있게 되었습니다 ^^


다룸을 개발하면서 블로그는 어떻게 하지? 라는 생각이 들었습니다. 이것(블로그)도 따로 자체 개발을 할까.. 그러면 어떤 기능을 가져야 할까..  한참을 고민하던중 다음에서 서비스하는 ‘티스토리’ 생각이 번뜩 났습니다. 블로그 사용자가 html와 css를 수정하여 스킨을 맘대로 수정이 가능한 서비스.. 그리고 다룸의 UI를 티스토리 스킨화 하여 입혀봤습니다. 꼭 맞는 옷을 블로그에 입혀줬더니 큰 공수 없이 잘 만들어진 서비스를 다룸에 사용할 수 있게 되었습니다. ^^ (사랑합니다 티스토리~)


여러가지 우여곡절이 많았지만, 드디어 이렇게 오픈하게 되네요!

고생하며 제작한 다룸이니 부족한 점이 많더라도 많이 사랑해주세요 :)






Posted by darum

전체 댓글