본문 바로가기

2016 두번째 프로젝트를 마치고.. IT 인프라가 넉넉치 않은 지방으로 이주한 이후로는 본업을 부업처럼 하고 있는데.. 그 만큼 주머니는 가볍지만 상대적인 시간을 얻고 있으니 적당히 만족하는 자위가 필요합니다. 현재까지 경험으론 마크업, UI, 퍼블리셔는 보통 2~3개월 단기 투입이 많은데 더우기 기간이 겹쳐 다른 플젝을 놓치기 일수라 1년에 길~~면 6개월 정도 참여가 가능한 것 같습니다. 물론 아직 6개월을 채워본 경험은 없군요. 요즘은 오픈 전에 UI 관련 마크업을 최대한 당기고 일찍 철수시키는 추세인 것 같습니다. 3월 플젝의 시작은 좀 삐걱거렸지만 적응 타이밍도 오고 소수의 플젝 팀과 정이 쌓일만 하니 철수. 7월 플젝은 업체를 끼고 들어간 관공서 플젝으로 참여. 인원도 많고 시작 역시 삐걱거리긴 했지만 가능한 한 사람들과 웃는 .. 더보기
안드로이드 웹뷰 FontAwesome 이슈 처리 며칠 전 앱개발자의 피드백 모바일 마크업을 안드로이드 웹뷰에 적용하면서 FontAwesome 폰트가 제대로 표현되지 않는 문제가 있더군요. 관련 이슈를 찾아 해결책은 찾았지만 원인은.. 추측만 할 뿐입니다. 트러블슈팅 안드로이드 개발단 or 마크업에서 각각의 해결 방법을 제공하는데 여기서는 마크업 부분만 기록합니다. 관련자료 : https://blogs.msdn.microsoft.com/wsdevsol/2012/10/23/about-webview-and-fonts/ 간단히 요약하면 웹폰트 파일을 base64로 인코딩한 외계문자들을 CSS 내부에 직접 작성합니다. 1. ttf, woff 등의 폰트 파일을 base64 로 인코딩 (온라인 웹폰트 변환 서비스 : https://www.fontsquirrel.c.. 더보기
CSS transition 완료 후 이벤트 처리 움직이는 UI 동작에는 jQuery 에서 제공하는 animate()와 같은 메소드를 자주 쓰게 되지만 웹,모바일을 막론하고 퍼포먼스 측면에선 CSS 애니메니션 속성이 조금 더 유리할 수 밖에 없습니다. 그래서 디바이스,브라우저 호환성을 고려한 CSS의 transition과 같은 애니메니션 속성을 선호하는데 여기서 CSS transition 애니메이션의 종료 시점(콜백)에 이벤트가 실행되어야 할 경우, 구글링해보면 벤더별로 지원 가능한 jQuery 함수를 만날 수 있습니다. transition 속성의 종료 시점을 체크해 콜백하는 함수입니다. https://gist.github.com/ifthenelse/5433230 // addClass CSS 트랜지션 효과 후 실행 함수 function whichTran.. 더보기
placeholder 색상 변경 스타일 Input placeholder 색상 변경 스타일::-webkit-input-placeholder{color: #ddd;} :-moz-placeholder{color:#ddd;/* For Firefox 18- */} ::-moz-placeholder{color:#ddd;/* For Firefox 19+ */} :-ms-input-placeholder{color:#ddd;} 더보기
iOS checkbox 스위치 UI 마크업 하이브리드앱 웹뷰 마크업 진행 중 iOS UI 형태의 Checkbox on,off 스위치가 필요해 찾아 보니 Pure CSS 형태 또는 JS 스위치 동작이 목표 디바이스에서 만족스럽지 못해 직접 마크업 해봅니다. 미리보기 마크업 방향 - 모바일 환경 최적화를 위해 가능한 모든 효과는 CSS를 사용- JS는 addClass(), removeClass() 정도만 사용- click, touch 이벤트 (접근성 저하요인 밀기 동작은 제외)- 아이폰 4,5,6 과 안드로이드 4.x 버전 이상 디바이스 지원 시작padding, margin 에 영향을 받지 않도록 box-sizing 속성을 지정합니다.-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-.. 더보기