IT & Art

사람이나 일이나 인상이 참 중요한데요, 개발도 마찬가지인 것 같아요. 간단한 프로토타이핑이라도 결과물의 비쥬얼이 허접하면 기술도 평가절하될 수 있습니다. 그렇다고 개발자가 디자인 전문가도 아닌데, UI까지 만들기도 쉽지 않고... 바로 이럴 때, HTML 템플릿을 활용합니다! HTML 템플릿이란, 컨텐츠만 살짝 바꿔서 즉시 사용할 수 있는 코드 집합으로, 좋은 퀄리티의 템플릿 하나 정도 포장용으로 갖고 있으면 여러 모로 유용합니다. 요즘 웹 프로그래밍은 기본적으로 HTML, CSS, Javascript 등으로 잘 나누어져 있기 때문에, 보통 HTML 텍스트 정도만 바꿔서 사용할 수 있습니다. Where? 그럼 어디에서 이런 템플릿을 구할 수 있을까요? 인터넷 검색에 'html template'으로 찾아보..

웹앱 UI를 만들다 보면 예쁜 아이콘을 사용해야 할 때가 많은데, 그럴 때마다 일일이 그리거나 이미지를 다운받아 쓰는 것은 너무 번거로운 일입니다. 또한 라이선스가 걸려있는 아이콘 이미지를 함부로 사용할 경우에는 법적 문제가 따를 수 있지요. 따라서 항상 라이선스를 잘 살피고 사용해야 합니다. 아이콘 HTML 웹 프로그래밍에 있어서는 Font Awesome이라는 굉장히 유명한 오픈 소스 프로젝트가 있습니다. Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 가장 중요한 라이선스 문제는 사이트에 공지된 내..

웹 프로그래밍의 큰 장점 중의 하나는 UI 디자인이 분리되어 전문 디자이너와 독립적으로 개발할 수 있다는 사실입니다. 즉 일반적인 웹 프로그래밍은 3가지 섹션(HTML, CSS & Javascript)으로 나뉘는데, HTML은 컨텐츠, CSS는 디자인, Javascript는 상태 변화를 담당한다고 보시면 됩니다. &nbsp&nbspSample Code CSS 이때 CSS는 보통 .css 파일로 HTML 헤더에서 링크되곤 하는데요, 아주 유명한 Bootstrap의 경우, 아래와 같이 HTML 파일의 Hello, world! 자세히 보시면 태그에서 href 속성에 외부 URL 값이 있는데요, 이렇게 외부로부터 링크(브라우저로 다운로드)하는 것을 CDN(Content Delivery Network)이라고 부릅..

HTML HTML(HyperText Markup Language)은 웹페이지를 위한 언어인데요, 웹페이지를 구성하는 HTML, CSS 및 Javascript에 대한 훌륭한 튜토리얼은 엄청나게 많아요. 당장 구글에 'html '만 쳐봐도 쉽고 빠르게 배울 수 있는 링크들이 쏟아져내립니다. 그 중 단언컨대 가장 좋은 튜토리얼은 w3schools.com/ 입니다. HTML Tutorial HTML Tutorial HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn - You will enjoy it! Start learning HTML now » Easy..

주의! 폰트는 라이선스에 항상 유의해야 합니다. 오늘 소개할 Art Deco Font는 독특하고 재미있는 폰트가 아주 많습니다. 제목 그대로 예술적인 폰트가 많아 저는 개인적으로 앨범 커버와 같은 예술 작품을 제작할 때 사용하는데요, 폰트마다 라이선스가 다르기 때문에 꼼꼼히 살펴야 합니다. 그럼에도 거의 조건 없는 무료 폰트가 많기 때문에 아주 유용합니다. 259 Free Art Deco Fonts · 1001 Fonts × An error has occured. Please try again later. www.1001fonts.com 상단 검색창에서 원하는 키워드(e.g. horror)로 검색하고 녹색 태그만 필터링하면, Gypsy Curse 폰트 옆에 녹색 태그가 라이선스 정보인데요, 유료인 경우에..

React 3D 웹앱 Basic 시리즈입니다. React 3D 웹앱 - 1. 개요 React 3D 웹앱 - 2. Three.js React 3D 웹앱 - 3. 3D 모델 React 3D 웹앱 - 4. 3D 뷰어 Github 이전 시간엔 React 개발 환경과 React 앱 구조에 대해 알아봤습니다. 이번 시간에는 3D를 그려봅니다. 3D 기술을 단번에 이해하기는 쉽지 않아요. 그렇다고 이론만 깊게 들여다 보면 질려버리죠. 매일 조금씩 꾸준히 공부하다 보면 질리지 않고 어느새 3D에 익숙해진 당신을 보게 될 겁니다. 저의 미흡한 시리즈를 보면서 따라하는 것도 좋은 방법이겠네요! 예제 코드(full version) Three.js 오늘의 재료는 three.js 라는 자바스크립트 라이브러리인데요, 웹에서 3D..

React 3D 웹앱 Basic 시리즈입니다. React 3D 웹앱 - 1. 개요 React 3D 웹앱 - 2. Three.js React 3D 웹앱 - 3. 3D 모델 React 3D 웹앱 - 4. 3D 뷰어 Github 빠르고 간결하게 React 기반 3D 웹앱을 만들어 봅시다. 먼저 개발환경을 설정합니다. Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 페이지에서 최신 LTS 설치하시면 됩니다. (v14.60.0, 2021년 3월 기준) Tip> Node.js는 자바스크립트를 실행 가능한 소프트웨어 플랫폼입니다. React는 자바스크립트 라이브러리로 알려져 있지..