스터디를 준비하며(3)
스터디 완료할 시 나올 페이지들
스터디 처음 시간에 설명할 부분으로 스터디 완료 기간에 나올 결과물들에 대한 이야기를 해야겠다. 공부를 하는데 목표가 있어야 길을 잃지 않기 때문에 적합한 목표물을 시작 때 미리 말해야 서로 맞는 목적을 향해 달릴 수 있기 때문이다.
1. 유동레이아웃
요즘 잘 쓰지않는 단어인데 liquid width layout이라고 이야기 한다. 보통 모니터의 화면과 모바일의 화면을 대응하려고 하는 문제에서 나왔는데 두가지 방법이 있다. 컨텐츠를 세로로 늘여서 스크롤로 보도록 할 것인지 컨텐츠 자체의 크기를 조정할 것인지 두가지 방법이다. 여기서 공부할 부분은 전자의 방법이며 가로 화면의 크기에 따라 재조정 하여 스크롤로 볼 수 있도록 제작하겠다. 부트스트랩과 같은 툴에 의지하지 않고 직접 만들도록 한다. 아래의 링크와 같은 부분을 만드는 것으로 한다. (파워포인트로 그릴려고 했으나 조잡해보여 링크로 대체한다.)
2. 햄버거 버튼 + 오프캔버스 메뉴
JavaScript 가 들어가는 부분인데 되도록이면 간단하게 하고 넘어가도록 하겠다. 그러나 이 부분은 꼭 필요한 부분이라는 생각에서 스터디에 도입하기로 했다. 시간 여건 상 이 부분은 기존 소스를 이용해서 작업에 추가 하는 부분일지도 모르지만 구현은 완료하도록 해야 한다.
3. 덤으로 할 부분 : 카멜레온 스크롤
그냥 위의 두개만 하면 별로 재미없을것 같으니 요즘 트렌디한 뮤직앱이나 모바일 서비스들이 도입하고 있는 카멜레온 스크롤도 한번 구현해 보는게 어떨까 한다. 영어명칭은 cameleon status bar로 사용자 경험 이야기 하기는 싫지만, 색상으로 알려줄 수 있기 때문에 명시성을 강조할 수 있는 방식이다. 크롬 브라우저 대응이지만 간단하게 구현할 수 있고 구현에 비해 큰 효과를 줄 수 있다는 생각이다.
4.시간이 되면 Scrollable tabs도 구현해 보도록한다.
포탈사이트만 해당 기능을 사용하는게 아니라 의외로 다양한 곳에서 사용할 수 있을것 같다. 외국에서도 수많은 메뉴를 줄이지는 못하는것 같아서 나온 고육지책이 아닐까 싶다.
이상 4가지를 목표로 스터디를 진행해 보고자 한다. 쉽지는 않겠지만 10주의 시간동안 구현이 가능할 것 같다. 또한 관심있는 사람에 따라 예전에 스터디한 노트 내용을 기반으로 웹접근성 기초또한 전달하고자 한다. 나도 최근에 회사에서 웹접근성 프로젝트 테스터로 참여했다가 해당 노트를 투입 종료 후 찾아보고 다시 리마인드 하는 시간을 가져야겠다는 생각을 했다. 스터디 이후 관련없는(아니 웹접근성을 무시하는) 회사에 다녀서 관심이 떨어졌었지만 해당 회사에 퇴사하였기 때문에 다시 머리속에 집어넣어야 하지 않나 고민하고 있다.
