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

전체 댓글

Blog 본문

공지사항

뮤직앱 Lab

다음 뮤직앱, 웹 접근성을 말하다 - 뮤직앱 개발팀 Mobile Lab Project, 중요도 정보성은 별5개, 중요도 실용성은 별5개, 중요도 오락성은 별4개,Active Date는 2013년2월22일,개발연구원은 다음모바일 생활연구소 개발자 최재성, 개발자 김도균, 개발자 이민재

안녕하세요! 저희는 다음 웹표준기술팀의 최재성, 미디어개발팀의 김도균, 웹표준개발팀의 이민재입니다. 다음 뮤직앱의 접근성 향상을 위한 개발 작업을 진행한 사람들이 바로 저희들이죠. 모든 사람들이 사용하기 편하게 만들어진 다음 뮤직앱, 그 개발 스토리 들어보실래요?

 

 

 

 

접근성, 모두가 편하게 쓸 수 있는 앱을 만들기 위해

웹에서나 모바일에서, 우리가 늘 컨텐츠나 앱을 이용하고 있으면서도 접근성이라는 개념에 대해서는 다들 잘 모르시지요. 접근성이란, 어린이에서 노인에 이르기까지 모든 사람들이, 눈이 잘 보이지 않거나 손이 불편하다거나 하는 등의 신체적 요인이나 다양한 기기에서 오는 환경적 요인에 상관없이 편하게 앱에 접근할 수 있도록 하는 개념을 뜻해요. 이러한 접근성을 전제로 해야 다양한 사용자들이 실질적으로 이용할 수 있는 서비스 개발이 가능해지죠.

 

 다음 뮤직앱을 사용하고 계시는 최재성님누구나 쉽게 이용할 수 있도록 하는 것, 그것이 바로 '접근성'이죠.

 

 

 국내 웹접근성, 더욱 개선되어야죠!

현재 국내 웹이나 앱의 접근성 정도는 아직 미비한 부분들이 많습니다. 장애인차별금지법이 4월부터 확대 시행될 예정이라 웹이나 앱의 개선이 더욱 시급해진 상황이기도 하고요. 다음 내부에서는 접근성 향상과 관련, 뮤직앱 iOS 개선 작업을 진행함으로써 이러한 개발 가이드를 구축해 둔 상태입니다. 이를 기반으로 다음의 다른 앱도 점진적으로 적용해 나갈 계획이고요. 특히 접근성 개선 과정에서 현재 저시력이신 웹표준개발팀의 이민재 님이 서비스 사전, 사후 단계의 전반적인 테스트를 해 주시는 등 실 사용자의 입장을 고려하려는 노력을 함께 하고 있습니다.

 

 좌측부터 개발자 김도균님, 개발자 최재성님, 개발자 이민재님뮤직앱 접근성 개선 작업, 저희가 진행했어요!

 

 

 시각장애인이 사용하기 편리하게 구현된 앱, 뮤직앱

뮤직앱은 듣는 서비스 위주의 컨텐츠가 많은 앱입니다. 시각장애인 분들께서 듣는 서비스임에도 불구하고 컨텐츠 메뉴에 접근하는 것이 어려우니, 컨텐츠 접근을 조금만 더 쉽게 할 수 있게 되면 컨텐츠 이용이 더욱 자유로워지는 것이죠. 그래서 비장애인이 앱을 이용하면서 접근할 수 있는 모든 컨텐츠에 장애인 분들도 무리 없이 접근할 수 있도록 하는 관점에서 작업을 하게 되었습니다.

우선 iOS에서는 보이스오버라는 기본 프로그램을 제공하고 있어요. 텍스트를 읽어주어서 음성으로 변화시켜주는 거죠그래서 보이스오버가 콘텐츠 정보를 제대로 전달할 수 있게 이미지, 버튼 등에 '대체 텍스트' 처리 먼저 강화했습니다. 그런 다음, 사용이 더욱 편리해질 수 있도록 중요한 것부터 먼저 읽어주는 포커스 이동기능을 개선했고요. 이런 개발 과정을 거쳐 현재는 장애인 분들도 무리 없이 뮤직앱을 사용할 수 있을 정도의 수준이 되었답니다.

 

  뮤직앱 메인화면누구나 편리하게 사용할 수 있도록 만들어진 뮤직앱입니다.

 

 

접근성을 통한 다음의 즐거운 변화, 그리고 '사람'

앞에서 말씀드렸던 것처럼 현재 국내의 웹이나 모바일의 접근성 정도는 아직 그 수준이 높은 편은 아닙니다. 하지만 많은 분들께서 접근성을 향상시키려는 노력을 하고 계시고, 저희 또한 다음 뮤직앱 iOS 개선 사례를 바탕으로 다음에서 제공하고 있는 iOS나 안드로이드의 모든 앱들의 접근성 향상을 위해서 계속 노력할 계획입니다. 세상을 즐겁게 변화시키는 기업이 되기 위한 노력중인 다음 커뮤니케이션의 비전처럼, 앞으로도 웹접근성 향상을 통해서 보다 더 많은 사람의 세상을 즐겁게 변화시키기 위해서 노력하겠습니다. 지켜봐 주세요!

 

누구나 쉽게 사용할 수 있도록 접근하는 앱, 다음이 만들고자 하는 앱입니다!

 

뮤직앱 다운로드 언제 어디서나, Music on Daum!

아이폰 버전 바로가기 go!

안드로이드 버전 바로가기 go!

QR코드 더욱 빠르게 뮤직앱 만나요!

 

 

Posted by darum

전체 댓글

Blog 본문

공지사항

뮤직앱 Lab 

웹 접근성을 생각하다 - 웹표준개발팀 이민재님 Mobile Lab Project 중요도 정보성은 별5개,중요도 실용성은 별5개, 중요도 오락성은 별4개, Active Date는 2013년2월18일, 개발연구원은 다음모바일 생활연구소 개발자 이민재

안녕하세요, 다음 웹표준개발팀에서 일하고 있는 이민재라고 합니다. 저는 저시력자입니다. 작년 5월 다음에 입사했고, 다음에서 제공하는 모든 서비스를 대상으로 접근성 업무를 진행하고 있습니다. 오늘은 여러분들께 시각장애인을 위한 웹접근성에 관한 이야기를 해볼까 합니다.

 

 

 

 

웹접근성, 장애인에게 꼭 필요한 이유

2011년도에 장애인 직업학교에 가게 됐는데, 거기서 처음으로 웹접근성에 대해 알게 됐어요. 장애인들이 웹 정보를 인식하는데 많은 어려움을 겪고 있다는 걸 깨달았죠. 웹접근성이 어렵다는 것 때문에 비장애인과 장애인의 정보 격차가 심화되는 것이 아쉬웠어요. 요즘은 대부분 스마트폰으로 많은 정보도 볼 수 있고 앱 사용을 해야 할 경우도 많은데, 그런 풍부한 컨텐츠를 장애인들이 제대로 사용하지 못하는 게 늘 아쉬웠죠.

현재 국내 앱의 접근성은 아직 발전이 많이 필요합니다. 10개 정도의 앱이 있다면 2~3개는 편하게 사용 가능하지만 나머지는 아직 편하게 접근하기가 쉽지 않죠. 최근에는 모바일 접근성 개념이 좀 대중화되어가고 있어서 그래도 어느 정도의 접근은 가능해졌지만, 앱의 모든 기능을 편하게 사용할 수 있는 측면에서는 아직 조금 부족해요.

 

 웹표준개발팀 이민재님웹이나 모바일의 접근성은 장애인들에게 특히 더욱 중요하답니다.

 

 

함께 개발하는 앱, 더욱 친근하죠

저는 현재 다음 웹표준개발팀에서 웹접근성 업무를 담당하고 있어요. 기본적으로 비장애인 개발자들은 다음에서 제공하는 모든 서비스에 대한 웹표준 개발, 디자인 가이드에 대한 업무를 진행하고 있고, 저는 저시력이기 때문에 공학기기를 통한 다음 서비스 접근성 테스트와 활용 업무를 맡고 있죠. 그리고 현재 다음의 여러 앱 중에서도 시각장애인들이 사용하기에 가장 편리하게 구현된 앱인 iOS 뮤직앱의 보이스오버 대응과 테스트 과정을 거치기도 했습니다. 개발자 입장이면서 동시에 실제 사용자 입장에서 개발에 참여하니 좀 더 색다른 기분이었지요. 

 

다음 뮤직앱 사용 모습제가 직접 테스트해 개발된 뮤직앱, 편리하게 사용할 수 있답니다.

 

 

모두에게 편한 뮤직앱, 전 이렇게 사용해요

저는 평소에 뮤직앱을 출퇴근하면서 자주 이용하는데, 특히 음악감상 컨텐츠를 좋아합니다. 그 중에서도 실시간 차트나 최신 앨범 리스트을 자주 이용하면서 요즘 유행하는 따끈따끈한 음악을 많이 들어요. 이렇게 이용하다 보면, 뮤직앱에서 주로 사용하는 기능인 음성 검색이나 음악 검색 같은 컨텐츠는 정말 이용하기 편하게 기술적으로 구현이 되어 있어요. 그 외에도 이미 검색한 노래 목록을 즐겨찾기에 추가해서 언제든 들을 수 있게 하는 기능도 사용하시기에 더욱 편하실 거고요. 음악 공유 기능도 빼놓을 수 없죠. 이런 기능들을 잘 활용하시면 뮤직앱은 모든 분들이 음악을 편하게 들으실 수 있을 거예요 

 

뮤직앱을 사용하고 계신 이민재님언제 어디서든 편하게 이용할 수 있는 뮤직앱!

 

 

다음의 모든 앱을 편리하게 이용하도록 노력하겠습니다!

다음 뮤직앱의 경우에는 장애인이 사용하기에 아주 편리하게 개발된, 참 모범적인 앱이라고 생각해요. 장애인이 실제로 사용하면서 어려움을 느끼지 않고 곳곳에 편리한 기능이 잘 적용되어 있으니까요. 뮤직앱의 이런 점을 많이 참고하고 모범 사례로 삼아서. 다음의 다른 앱들도 더욱 개발이 됐으면 좋겠어요. 저도 개발자의 입장에서 더욱 노력할 거고요. 모든 사람이 다음의 모든 앱을 편리하게 사용하는 그 날, 머지 않았습니다!

 

 저와 함께 더욱 발전할 다음 뮤직앱, 기대해 주세요!

 

 

뮤직앱 다운로드 언제어디서나 Music on Daum!

아이폰버전 바로가기 go!

안드로이드버전버전 바로가기 go!

QR코드 더욱빠르게 뮤직앱 만나요!

 

 

 

Posted by darum

전체 댓글