www.frum.co.kr Rails 기반으로 웹사이트를 만들었습니다.

[hardcoredesign]

안녕하세요. 루비 사용자 모임을 구독하는 회원입니다. 

이번에 회사 웹사이트를 오픈했습니다. 

www.frum.co.kr 

레일즈로 두번째 버전을 만들었는데 첫번째 버전에서는 반응형웹으로 만들었다가 모바일에서 이미지의 용량 때문에 반응형웹으로 처리하기 어려워서 

두번째 버전에서는 모바일/데스크탑(아이패드포함)를 분리해서 제작했습니다. 

- 포트폴리오를 설명하는 비디오 기반 웹사이트이며 한/영 지원되도록 다국어 서비스로 제작되어 있습니다. 다국어 서비스는 예전에 다국어 서비스 기반 서비스를 한 경험을 녹여냈습니다. 

만약에 언어가 추가되더라도 계속 추가할 수 있도록 제작되어 있습니다. 

- 가장 큰 난재는 비디오를 효과적으로 보여주고 자막 같은 것들도 잘 지원될 수 있도록 하는 거였는데 미디어엘리먼트를 상당수 커스트마이징해서 사용했습니다. 

- 특히나 모바일 버전에 신경을 많이 써서 앱같은 경험을 줄 수 있도록 모바일 버전을 만들었습니다.

- 페이스북 연동도 신경을 많이 썼고 터치 환경에서도 100퍼센트 적용할 수 있는 UI/UX로 만들었습니다. 

- 웹접근성도 고려되어 있습니다.

최근에 기획자 혹은 개발자들이 써보고 싶어하는 기능을 전반적으로 수용했고 핵심 페이지들은 CMS로 컨트롤하게 되어 있습니다. 

혹시 이와 비슷한 기획을 하시는 분 혹은 기획하시는 분들과 저의 시행착오를 공유하고 싶습니다. 

버그 관련 부분이 있으면 알려주시면 감사하겠습니다. 

FRUM 

김 성경 드림. 

[이성훈]

안녕하세요 사이트도 멋지고 대기업과 연계한 비즈니스도 탄탄해 보여서 부럽습니다

저도 반응형웹 좋아했다가 자바스크립트 펑션이 점점 많아질수록 클릭/터치 이벤트나 overflow 등에서

모바일 디바이스별로 다르게 동작하는 파편화 때문에 고생을 하게 되서 결국 모바일과 PC웹을 분리할까 생각중입니다

경험 공유해주셔서 감사합니다.

다국어 서비스는 레일스 기본 i18n을 사용하셨는지, 아니면 혹시 더 편리한 라이브러리가 있는지

여쭤봐도 될까요? 혹시 노하우가 있으시면 공유해주시면 좋을 것 같습니다 :)

제 옛날 경험을 공유드리면, DHH가 공개했던 https://github.com/dhh/tolk 를 쓰곤 했는데

레일스 프로젝트에서 일반적으로 yml 파일 형태로 다국어를 입력하던 것을 데이터베이스에 싱크해서, 

yml 편집 없이도 기획자/번역가 등이 어드민에서 다국어 입력을 할 수 있던 인터페이스였습니다.

그런데 3년 간 업데이트 없는 걸 보니 요즘은 안 쓰이는 것 같네요 ㅎㅎ 

요즘은 좀 편리한 다른 라이브러리들이 있는가 해서 여쭤봤습니다.

감사합니다 

이성훈 드림 

2013년 5월 9일 오전 11:26, hardcoredesign <hardcor...@gmail.com>님의 말:

--
 
---
Google 그룹스 '한국 루비 사용자 모임' 그룹에 가입했으므로 본 메일이 전송되었습니다.
이 그룹에서 탈퇴하고 더 이상 이메일을 받지 않으려면 rubykr+un...@googlegroups.com에 이메일을 보내세요.
http://groups.google.com/group/rubykr?hl=ko에서 그룹을 방문하세요.
더 많은 옵션을 보려면 https://groups.google.com/groups/opt_out을(를) 방문하세요.
 
 

--

Service: http://itemme.com
Blog : http://flyingmate.net

Facebook: http://facebook.com/james.sunghoon.lee
Twitter : http://twitter.com/jamesshlee
iPhone : 010.2000.6522

[김성식]

디자인 멋지네요. 

그런데 상단 메뉴를 네비게이션할때 자동으로 focus가 되는 현상은 일부러 하신건가요? 

아래로 스크롤해도 다시 상단으로 끌려올라가는 현상이 일어나네요.

그리고 상단 메뉴 클릭시 jump to footer라는 텍스트가 살짝 보이다 사라지는 현상이 있네요. 

2013년 5월 9일 목요일 오전 11시 26분 49초 UTC+9, hardcoredesign 님의 말:

[김성식]

참고로 저는 맥 사용자이고 크롬으로 접속했습니다.

2013년 5월 13일 오후 2:06, 김성식 <kssm...@gmail.com>님의 말:

--
 
---
Google 그룹스 '한국 루비 사용자 모임' 그룹의 주제에 가입했으므로 이 메시지를 받으셨습니다.
이 주제에서 탈퇴하려면 https://groups.google.com/d/topic/rubykr/Mgzcx_aplEw/unsubscribe?hl=ko을(를) 방문하세요.
이 그룹 및 그룹의 모든 주제에서 탈퇴하려면 rubykr+un...@googlegroups.com에 이메일을 보내세요.

[김성식]

죄송합니다. 제 맥에 보이스 오버가 켜져 있었네요!! 사이트 멋있습니다

2013년 5월 13일 오후 2:07, 김성식 <kssm...@gmail.com>님의 말:

[kim sung-kyung]

안녕하세요. 관심 가져줘서 감사합니다. 

-- 반응형웹 관련 -- 

최근에 많은 글로벌 사이트들이 예를들면 아마존닷컴같은 경우에는 반응형 초창기에 그 흐름을 반영해서 반응형으로 만들었다가 다시 모바일과 데스크탑으로 분리한 걸로 알고 있습니다. 반응형웹이 퀄러티를 추구하는 사이트에서는 상당히 걸림돌이 될 수 있다고 생각합니다. 특히나 css, 자바스크립트의 복잡도가 높아져서 쓸데없이 기능이 많아져서 무거워지기도 합니다. 어차피 모바일로 접근하면 데스크탑에 있는 기능 중에서 많은 기능을 쓸 수 없기 때문에 결국 버려야 하는 기능이 되기 때문에 결국 퀄러티를 중점을 두면 모바일과 데스크탑으로 나눌 수 밖에 없다고 생각합니다. 결국 계속 운영을 하기 때문에 운영이슈도 점점 커집니다. 

많은 회사에서 반응형웹을 버리고 데스크탑에서 아이패드까지 지원할 수 있도록 하고 모바일을 따로 가는 추세입니다. 저 같은 경우에는 데스크탑을 아이패드로 접속하면 over가 되는 부분들은 숨겨지지 않고 바로 보이게 되어 있고 hoverable/touchable 같은 플러그인을 써서 터치 상태에서 over가 될 수 있도록 처리했습니다. 이 부분은 벤츠닷컴을 참고했습니다(www.mercedes-benz.com). 

-- 다국어 관련  --

다국어 플렛폼 자체가 사실 단순 플랫폼적인 면부터 DB적인 면까지 상당히 애매한 부분이 많다고 생각합니다. 특히 한국어와 다른 언어와의 차이점이 상당히 많고 라틴계열의 언어들은 그나마 낫지만 한국어의 특성상 디자인부터 DB 자체도 다른 특성이 있어서 저는 처음부터 그걸 염두에 두었습니다. 

i18n을 기본으로 사용했고 거의 모든 object의 공통적인 것과 언어적으로 달라지는 것들을 다 분리해서 DB를 구성했습니다. 그래서 간단한 쿼리도 상당히 복잡했습니다. 예를 들면 이미지도 alt text 같은 경우에는 각 언어마다 다르게 적용되게 되어 있습니다. 그런데 초기에 생각을 많이해서 구성해도 나중되니까 완전히 언어적인 면을 분리하기는 어렵더라고요. 

css 같은 경우에는 기본이 영어로 구성되어 있고 그 기본에 한글로 바뀌면 css만 한글에 해당하는 css로 override 할수 있도록 했습니다. 

그다지 페이지가 많지 않더라도 다국어가 들어가니까 쿼리를 하는 양이 많아서 대부분 presenter을 써서 view 안에 query가 들어가지 않도록 노력했습니다. 제가 디자이너도 같이 하기 때문에 완전히 view와 business logic을 분리하려고 했는데 그게 쉽지는 않더라고요. 저의 기본 원칙은 순수 view와 모듈과 같은 형태로 만들길 바랬는데 나중에는 좀 어려워졌습니다. 

scss같은 경우에는 이제 앞으로는 더욱더 중요해질 것 같습니다. 이번에 작업하면서 css로는 돌아갈 수 없는 느낌이 들만큼 scss의 강력함을 느꼈습니다. 반복되는 코드와 반복되는 기능들을 mixin으로 처리해서 그나마 시스템적으로 css을 관리할 수 있게 됐습니다. 

상훈님 블로그에서 보니까 운영 효율적인 부분에 많은 지식을 가지고 있시신데 memcached나 기본 레일즈에서 제공하는 cache을 활용해서 사이트의 속도를 높일 수 있는 방법을 알고 싶습니다. 도와주십시요!!

FRUM

김 성경 드림. 

[kim sung-kyung]

웹접근성이 고려되어 있어서 포커스나 skip link 같은 것이 적용되어 있어서 그럴 수 있습니다. 

Google 그룹스 '한국 루비 사용자 모임' 그룹에 가입했으므로 본 메일이 전송되었습니다.

이 그룹에서 탈퇴하고 더 이상 이메일을 받지 않으려면 rubykr+un...@googlegroups.com에 이메일을 보내세요.