듀비 라이프

지난 번에 글 작성했던 구글 머티리얼 아이콘처럼 XEIcon도 아이콘을 이미지 다운로드 없이 소스 상에서 사용가능한 아이콘 폰트이다. 개발할 때 구글 머티리얼 아이콘보다 더 자주 사용했던 것 같다. 실제로도 많은 개발자들이 프로젝트 진행 중 사용하고 있고, 구글 머티리얼 아이콘과 같이 사용하기도 한다. 두 아이콘 다 단순한 형태를 취하고 있기 때문에 잘 어울린다. XEIcon 소개 여러 icon을 폰트의 형태로 무료 사용이 가능하며, 영리적 이용도 가능하다. 아이콘의 색상과 크기 등을 CSS로 자유롭게 수정이 가능하다는 것도 큰 장점이다. XEIcon 사용 준비 XEIcon은 다른 웹폰트처럼 직접 파일을 다운로드 받아서 사용하거나, CDN의 형태로 사용할 수 있다. 아이콘을 적용할 개발 환경에 따라서 알..

Pretendard 폰트는 많은 홈페이지와 앱에서도 사용되는 무료 폰트이다. Apple의 시스템 폰트를 대체할 목적으로 만들어졌고, Apple 특유의 가독성이 좋은 폰트의 특성을 닮아있어 가장 많이 사용되는 무료 폰트 중 하나이다. Pretendard 폰트 홈페이지에서 소개하듯, Pretendard 폰트는 본고딕 글꼴을 Apple SD 산들고딕에 맞추는 과정을 거쳐서 개발되었다. Apple의 시스템 폰트를 닮아있기 때문에 iOS와 안드로이드의 폰트의 통일성을 맞추기 위해 많이 채택된다고도 한다. 현재 진행하고 있는 웹페이지 개발 프로젝트에서도 Pretendard 폰트를 사용하게 되었다. 폰트를 사용하기 위해서는 Pretendard 폰트 홈페이지에서 폰트 파일을 다운로드 받아야 한다. Pretendard ..

웹사이트를 개발하다보면 당연히 아이콘을 많이 사용하게 된다. 이미지로 예쁘게 따서 쓰기도 하지만, 간단하게 개발하고 싶을때는 아이콘 라이브러리를 가져다 사용하면 개발과 수정이 편해진다. 디자이너나 기획자의 특정한 요구사항이 없을 때마다 잘 사용해 온 Google Material Icons (Google Fonts Icons)에 대해 포스팅해보려고 한다. Google Materials Icons에서 원하는 아이콘 찾기 https://fonts.google.com/icons Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font fil..

웹페이지 개발을 하다보면, 홈페이지의 목적에 맞으면서 가독성을 높이는 폰트를 찾는 것은 은근 어려운 일이다. 나는 개발자니까 폰트에 대한 부분은 디자이너님이 대부분 정해주시긴 한다. 하지만 개인적으로 개발하는 프로젝트나 블로그를 커스텀할 때, 무료이면서도 예쁜 폰트를 찾아보게 되었다. 그 중 눈에 띄었던 것은 구글 폰트. 구글에서 배포하는 구글 폰트는 상업적인 사이트나 디자인에 무료로 이용할 수 있다. 물론 폰트 파일 자체를 돈 받고 파는 것은 안된다. 구글 폰트 종류 구글 폰트에서 제공하는 폰트는 여러 종류가 있다. 그 중 대표적으로 자주 사용되는 폰트만 몇 가지 소개하려고 한다. Noto Sans Korean 정말 많은 홈페이지에서 사용하고 있는 Noto 폰트. Noto Sans Japanese도 있..

javascript ) highcharts.js로 도넛 그래프 그리기 javascript ) 차트 라이브러리 추천 예전에나 지금이나 차트를 표시해줘야 할 때는 c3.js를 잘 이용하고 있다. 근데 사용하다보니 디자인이 좀 질려서.. 직접 커스텀 하기는 또 귀찮고 다른 차트 라이 vivacolor96.tistory.com 앞전에 하이차트 라이브러리를 사용해서 도넛 차트를 만들었다. 기본 스타일이 마음에 들지 않아서 하이차트 자체에서 지원하는 옵션으로 차트 섹션 간 공백, border-radius, 데이터라벨 위치 등 스타일의 수정에 공을 들였지만 여전히 마음에 차지 않는다. 가장 마음에 안 드는건 차트 섹션 마우스 오버 효과와 데이터라벨의 흰색 텍스트 스트로크. 그 외에도 차트의 섹션을 클릭했을 때 나오는..

javascript ) 차트 라이브러리 추천 예전에나 지금이나 차트를 표시해줘야 할 때는 c3.js를 잘 이용하고 있다. 근데 사용하다보니 디자인이 좀 질려서.. 직접 커스텀 하기는 또 귀찮고 다른 차트 라이브러리는 어떤게 있는지 좀 찾아 vivacolor96.tistory.com 여러 차트 라이브러리 중 내가 주로 사용하던건 c3 차트 라이브러리였는데, highcharts 라이브러리를 사용해보게 되었다. 사용 방법은 c3.js와 별로 다르지 않았다. highcharts.js 사용하기 CDN으로 불러오기 1 cs 사이에 넣어준다. CSS를 따로 불러오지 않고, js만 cdn으로 불러와도 잘 작동했다. 아래는 하이차트의 깃허브 링크 GitHub - highcharts/highcharts: Highchart..

남들 다 하는 서버 세팅을 이제서야 느적느적 공부하고 있다. AWS에서 ec2 인스턴스를 만들고, 아파치를 깔았는데도 브라우저에서 ip로 접속했을 때 안 나온다. ssh에서 systemctl status httpd로 확인해봤을 때 서버는 active 상태였다. 그런데 브라우저 접속은 안 된다. 나는 왜 남들 다 하는 것도 이렇게 못하나 하고 자책하다가 가만 생각을 해본다. 당연히 안 되는 거였다. 80번 포트를 안 열어줬다. ec2를 생성하면 기본적으로 ssh 접속이 가능한 22번 포트만 열려있다. 브라우저에서 ip로 접속하려면 80번 포트를 열어줘야한다. 후에 ssl을 적용한다면 443번 포트도 열어준다. 그건 그때 가서 하도록 한다. EC2 포트 설정 AWS EC2로 들어가서 인스턴스 리스트를 확인한..

가비아에서 도메인 구입하기 도메인의 필요성 웹사이트 개발, 블로그 등 도메인이 사용되는 곳은 매우 많다. 브라우저로 웹사이트에 접속했을 때 나타나는 도메인 주소는 해당 사이트의 특징을 나타낸다 쇼핑몰이라면 무엇 vivacolor96.tistory.com AWS의 Route 53에서 도메인을 구매해도 되지만, 나는 가비아에서 도메인을 구매했다. 클라우드 서버는 AWS에 만들었으니, 서버에 도메인을 붙이려면 AWS에서의 작업이 필요하다. AWS Route 53 설정 검색창에 Route 53 검색하고 들어가서, 좌측의 호스팅 영역 메뉴로 들어간다. 호스팅 영역 페이지에서 호스팅 영역 생성 버튼 클릭. ec2 인스턴스에 연결할 도메인을 도메인 이름에 넣어주고, 설명은 필요하면 적는다. 호스팅 영역 생성 클릭 호..

ec2 인스턴스를 새로 하나 팠는데, 이전에 썼던 pem 키를 재활용하고 싶었다. 어차피 테스트 서버 용도로 사용하고 있는데 키만 많아지면 헷갈리고 관리하기 귀찮다. 새로 만들까 하다가 이전에 사용했던 pem키를 재사용하기로 한다. 키 페어 가져오기 AWS 콘솔 검색창에서 키 페어를 검색한다. 특징 아래 키 페어 클릭. 키 페어 페이지 우측 상단에 작업 버튼을 누른다. 키 페어 가져오기 클릭한다. 이름을 작성하고, 찾아보기 버튼 눌러서 pem키 파일의 경로에서 가져온다. 그리고 우측 하단 키 페어 가져오기 버튼 클릭. Value for parameter PublicKeyMaterial is invalid. Length exceeds maximum of 2048. 오류난다. 역시 쉽게 될리가 없지. 퍼블릭..

탄력적 ip를 설정하기 전, ec2 인스턴스를 생성한다. AWS에서 ec2 인스턴스 생성하는 방법은 아래 게시글 참고. AWS에서 무료 클라우드 서버 사용하기 간단하게 사용할 테스트 서버 셋팅을 위해 무료 클라우드 서버를 사용하기로 했다. OCI등 여러가지 클라우드 서버가 있지만, 역시 많이 쓰이는 AWS(Amazon Web Services)의 프리 티어를 사용하기로 한다 vivacolor96.tistory.com AWS에서 ec2를 생성했다면, 탄력적 ip를 적용하는 게 추천된다. 탄력적 IP를 사용하는 이유 ec2 인스턴스를 껐다 켤 때가 있는데, 이럴 때마다 ec2 ip가 바뀐다고 한다. 서버 셋팅 다 해놓고 도메인도 연결해놨는데 그러면 귀찮아진다. 이런 문제를 사전에 방지해 줄 수 있는게 탄력적 ..