본문 바로가기

Works

Fill Clock 이미지 없이 소프트웨어 랜더링으로만 구성된 위젯입니다. 소스는 제가 쓴게 아니고 컨버전 + 자잘한 수정만 했습니다. 웹폰트에서 시스템 폰트로 교체/ 색상 변경 원본 소스& 저작자 - http://codepen.io/laksamanakeris/pen/Drdvi 더보기
스킨 구조 플로우 차트 심심해서 현재 사용중인 Life is a Journey v.2의 구조를 플로우 차트로 만들어 보았습니다. SVG이미지 이기 때문에 구형 브라우저에서는 보이지 않습니다. 구현방식이 꽤 삽질을 해서 알아낸 방식이라 그렇지 실제로는 정말 별거 아닙니다. 스크립트가 브라우저와 카테고리를 구분 시켜주고, 그에 맞게 CSS만 넣어주면 알아서 됩니다. 웹 언어 처음 배울때는 ‘도대체 이런걸 어떻게 하는 거지’ 했는데 점점 비슷한걸 만들어가고 있습니다. ㅎㅎ 더보기
스킨 V.2 업데이트 후기 + 디자인 사설 디자인과 속도. 웹 페이지를 만들 때 항상 충돌하게 되는 요소 입니다. 디자인에 신경을 쓰다 보면 웹 페이지 속도가 서서히 감소하는 것이 눈에 보일 것이고, 속도에 신경을 쓰다보면 정말 흰화면에 글자와 사진만 몇 개 떠다니는 수준이 되어버릴 수도 있습니다. 보통 스킨을 제작하게 되면 항상 고민하는 것이 바로 속도와 디자인 입니다. 늘 좀 더 새롭고 좋은 모습을 추구하면서도, 바라는 대로 무턱대고 만들어버리면 속도에 치명적인 영향을 미쳐버리고 맙니다. 그래서 스킨을 처음 만들 때 부터 지금까지도, 좋은 디자인을 가지면서 속도가 빠를 수는 없을까 라는 생각을 늘 상 하곤 했습니다. 이런 고민을 항상 하면서 스킨을 제작하다 보니 이전에는 단순한 구조임에도 속도가 한심할 정도로 느렸지만 지금은 숙련도가 쌓였는지.. 더보기
Ultimate Sense 2 hTC Sense 4.0 덤프 파일을 이용해서 만든 위젯입니다. - 플립 애니메이션 - 네이티브 웨더 적용으로 iOS7 시스템에서 날씨데이터를 바로 끌어옴 (지역 설정 x ,GPS 날씨 사용 가능) - 레티나 디스플레이 최적화 (대형 택스쳐를 4분의 1로 축소) iWidget과 libweather가 반드시 설치되어 있어야 합니다. 더보기
Simple Analog Widget 이미지 없이 소프트웨어 랜더링으로만 구성된 위젯입니다. 소스는 제가 쓴게 아니고 컨버전만 했습니다. 원본 소스& 저작자 - http://codepen.io/martingrand/pen/aAldc 더보기
게임 카테고리 스킨 추가 압축 버전을 끝으로 '추가 스킨 제작은 끝~!' 이라고 선언했지만 사이트 몇 군데 돌아다니다가 본 마음에 드는 스타일 몇가지와, 헤더를 세로로 만들어보고 싶어 후딱 작업했습니다. 미디어 쿼리는 이론상으로 세로 해상도도 적용되는 걸로 알고 있어서 시험 삼아 적용 해보았는데, 실제로 세로 해상도 768px 이하로는 헤더가 사라집니다. 더보기
스킨 압축 완료 했습니다. 기나긴 개발 기간 끝에 드디어 압축한 버전의 스킨을 적용하였습니다. css 파일을 하나로 합치고, 스크립트도 하나로 압축, html 파일도 압축했습니다. 평균 페이지 로드시간은 연결상황에 따라 다르지만 약 4초 정도 소요 됩니다. 압축이 스킨 제작에서 제일 마지막 과정인데, 더 이상 손댈게 없다(면 좋겠지만)라는 것을 가정하에 하는 작업입니다. 나름 열심히 계획을 짜서 만들어서, 더 이상은 손댈 일이 많이 없으면 좋겠내요 ㅎㅎ 패이지 스피드는 94점이 나옵니다. 이전 스킨이 91점대였는데 3점올랐네요 킥킥 더보기
Zen Theme for iOS7 미니멀리즘 하고 타이포그래피가 가미된 테마 입니다. 아이콘의 폰트는 Myriad Pro 입니다. 애플 사의 제품 광고에 쓰이는 바로 그 폰트 입니다. 위젯과 락 스크린이 모두 제공되는 풀 테마로서 그루비락 테마와 5종의 iWidget이 제공됩니다. 위젯 순서대로 아날로그 시계/ 디지털시계 / 네이티브 웨더위젯 / 프로필 위젯 / 오늘 날짜 위젯 프로필 위젯은 위젯 옵션에서 이름과 전화번호 그리고 인용구나 할 말을 직접 입력해서 적을 수 있습니다. 한 가지 주의 하셔야 할 점은 한글 입력시에 마지막 칸을 한 칸 띄워야 합니다. 그렇지 않으면 이렇게 글자가 깨집니다. 프로필 위젯의 프로필 사진은 해당 위젯폴더 안에 있는 profile.png 파일을 교채 해주면 됩니다. 이미지는 가로 세로 200px이상 정사.. 더보기
카테고리 별 스킨 2종 추가 리뷰용 스킨 - 오른쪽 사이드바가 있는 2단 레이아웃 이며, 위에 목차가 따라서 내려오게 되어있습니다. 목차의 제목을 눌리면 글의 해당 부분으로 바로 이동하게 되어있습니다. 해외 IT 매체 사이트에 가보면 볼 수 있는 것인데 한번 구현해봤습니다. 음악 스킨 - 이전게 마음에 안들어서 또 갈아 엎었습니다. 이번에는 좀 차분하고 범용적으로 사용 할 수 있는 모습으로 디자인 했습니다. 더보기
현재 스킨 작업의 주안점들 - 다운로드 링크/ CCL/ 주석 벌써 적용한지 2주가 지났지만 여전히 압축을 하지 않고 세부수정을 가하고 있습니다. -_-;;대부분 남은 소소한 작업 때문인데요, 주로 "티스토리의 냄새"를 없애기 위한 작업이라고 보시면 됩니다. 특히 이번에 공들여서 변경한것이 다운로드 아이콘과 CCL아이콘 입니다. 다운로드 아이콘은 이전의 쪼그만한 아이콘에 이게 다운로드링크인지 뭔지 구분도 안 가던 것에서 이제는 한눈에 확 띄게 바뀌었습니다. 사실 모바일 배려 측면도 없지 않아 있습니다. 운영체제의 고도화로 안드로이드나 아이폰에서도 파일을 다운로드 받고 수정이 가능하죠. 하지만 이전의 작디작은 링크 버튼으로는 터치기기 사용 하실때 몸에 사리가 생기실거라 생각되어 큼직큼직하게 만들었습니다. CCL아이콘도 변경을 했는데요, CSS 스프라이트로 이미지를 구.. 더보기

티스토리툴바