본문 바로가기

전체 글266

프로토타입핑 툴 adobe experience design CC 현재 다니고 있는 직장에서 프로토타입핑툴을 사용해야 하는 일이 생겼다.팀장님은 Axure을 추천했는데,흠.. 이전에 한번 사용해 본 사람으로써 러닝커브가 다소 높다는 생각이 들었다.물론 툴의 학습능력이 뛰어나면 뛰어날수록 정말 다양한 뷰를 선보일 수 있는 앱니다.하지만 나는 내 입장을 생각했을때 프로토타입에 쓰는 시간을 최대한으로 줄이고 오히려 개발에 집중해야 한다는 생각을 들었다.전문디자이너와 전문개발자 둘다가 되기에는 나에게는 많은 시간이 소요된다.그래서 이곳저곳 돌아다니면서 과연 어떤툴이 좋은지 사용해 보았다.그래서 내린 결론은 최고의 프로토타입툴은 바로 adobe Experience Design CC 이다.현재 베타버전이지만 이게 베타버전이 맞나 싶을정도로 뛰어난 인터페이스와 성능을 보였다.그리고.. 2017. 3. 9.
CSS 그리드 설계 웹앱을 만드는데 있어서 css를 통한 그리드 설계는 매우 중요한 요소이다.특히나 반응형 웹 시대가 도래하고 그 중요성은 매우 커졌다.나는 평소 boostrap을 이용하여 전체적인 그리드를 설계한다.아래는 boostrap의 그리드 시스템에 대하여 잘 정리해 놓은 링크이다. http://the3.tistory.com/41#recentTrackback 2017. 3. 9.
vue.js로 만든 예제 보는곳 js 프레임 워크로 뭘 사용할까 고민하던중 내 입장과 프레임워크의 스펙을 보고 vue.js가 좋겠다는 결론에 이르렀다.하지만 vue.js의 기초를 공부해 보아도 앞으로 복잡한 뷰를 어떻게 설계할지에 대한 고민은 가시지 않았다.아무래도 예제가 있으면 좋겠다라는 생각에 여러가지를 찾아보다가 vue.js 사이트에서 예제또한 제공해준다는 것을 알게 되었다. http://vuejsexamples.com/ codpen에 올려놓아 코드도 쉽게 볼 수 있다.(예~~)앞으로 더 분석해보고 여러가지로 직접 만들어야겠다. 2017. 3. 8.
emmet을 통한 html 빠르게 생성하기 atom 에디터의 매력중 하나는 유용한 패키지를 쉽게 붙여서 사용할 수 있다는 점이다.이러한 패키지중에 emmet이라는 패키지가 있는데,간단한 syntax 규칙을 통해서 DOM을 빠르게 생성시켜주는 혁신적인 패키지이다. 아래는 emmet 사이트이고 syntax를 잘 정리해놓았다. http://docs.emmet.io/abbreviations/syntax/ 2017. 3. 8.
atom 에디터에서 sass 간단히 사용하기 sass를 써보니 쓰면 쓸수록 편리한거 같다.하지만 불편한 점이 하나 있었는데,바로 컴파일이 필요하다는 점이었다.컴파일을 하려면 명령창에다 명령어를 쳐야 하는데,--watch 명령어를 쳐서 실시간 감지 가능하다고 해서 그렇게 해 보았다.하지만 안먹히고 계속해서 css 파일을 지우고 명령어를 다시 쳐 줘야만 했다.. sass는 편리하지만 이런 작업이 계속되면프론트엔드 개발자 입장에서는 많은 시간 미스가 나게 된다.그래서 방법을 찾던중에 atom 에디터에서 실시간으로 sass 파일을 css로 바꿔주는 패키지가 있다는 것을 알게 되었다. (정말 짱이다. ㅎㅎ) 아래는 Sass 설명 겸 atom에서 쓰는 패키지를 설명해주는 블로그이고,내용을 읽어보니 다른 에디터에서도 이미 패키지가 나온거 같다.사용해 보니 너무.. 2017. 3. 7.
카이스트에서 전문연구요원을 하게 되었다. 카이스트에서 전문연을 하게 되었다.전문연은 출퇴근 관리을 해야 하는데, 카이스트는 아래의 링크로 자신의 출결사항을 확인할 수 있다. https://krep.kaist.ac.kr 하루 8시간을 맞춰야 해서 반드시 전산에 기록되었는지 확인해야 한다. 2017. 3. 7.
jquery 확장 메소드 만들기 최근 js 라이브러리를 만들어보고 싶은 생각이 생겼다.뭐 뚜렷이 js 라이브러리를 어떤식으로 만들어야 된다는 강좌는 아직 국내에는 나와 있는것 같지 않고,해외에는 팁에 관련한 간단한 사항만 나왔었다. 그렇게 찾던중 jquery 확장 메소드 라는 것을 듣게 되었고,몇가지 간단한 방법으로 jquery 셀렉터를 구현할 수 있음을 알게 되었다. 아무래도 프론트엔트 작업을 하면서 jquery를 많이 사용하게 되니 알아두면 좋을거 같다.아래는 jquery 메소드를 만드는 방법을 쉽게 정리한 링크이다. http://annotations.tistory.com/89 2017. 3. 6.
github에 올려놓은 js 파일을 codepen에서 사용하기 최근 github에 js 코드를 올려놓고 codepen에서 사용하려는 시도를 했다.하지만 아래와 같은 오류에 부딫히고 말았다. because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. 하지만 다행이 해결책이 있었다.아래는 그 해결책을 정리해 놓은 블로그이다. http://ohgyun.com/598 2017. 2. 27.
SVG path 속성 SVG는 Scalable Vector Graphics의 약어로 확대나 축소시에도 그 그래픽이 깨지지 않는 벡터기반의 엔진이다.본 엔진을 통해 강력한 데이터시각화 라이브러리인 D3.js가 개발되었고 실질적으로 D3.js를 사용하는데 있어 SVG에 대한 기본 지식이 필요하다.특히 SVG에서 복잡한 path를 그리는데 있어 그 규칙을 아는 것이 중요한데, 아래 그 규칙에 대해 잘 정리해 놓은 블로그 링크를 걸어논다. http://ukking90.tistory.com/entry/SVG-Tutorial 2017. 2. 24.

티스토리툴바