안드로이드 Android 디자인 참고 아이콘 Material design icon 다운받아 사용하기

안드로이드 Android 디자인 참고 아이콘 Material design icon 다운받아 사용하기

 

환경: Eclipse Mars, Android 4.2.2

 

안드로이드 개발할 때 참고할 만한 유용한 아이콘들을 구글에서 제공하고 있습니다. 이 폰트들은 웹 폰트입니다. 그러니까 아이콘을 텍스트 방식으로 만든 것들이죠. 요즘은 무거운 이미지 보다 가볍고 사용하기 쉬운 웹 폰트를 많이 이용합니다. 안드로이드에서 제공하는 웹 폰트는 앱 개발뿐만 아니라 웹 사이트, iOS 개발 프로젝트에서도 많이 이용합니다. 오늘은 이클립스에서 안드로이드 개발할 때 사용하기 위해 Git 을 이용해서 모든 아이콘을 전부 다운로드 해 보겠습니다.

 

▼ 먼저 구글에서 제공하는 폰트 사이트로 가 보겠습니다. 아래 링크 주소를 클릭하시면 폰트 서버로 접속하게 됩니다. 서버에는 알파벳 순으로 수백 개의 아이콘을 보여 줍니다. 지금도 계속해서 추가되고 있기 때문에 개발할 때 아이콘을 직접 만들거나 다른 곳에서 다운받지 않아도 충분히 해결할 수 있을 겁니다.

https://design.google.com/icons/

 

▼ 검색을 통해 마음에 드는 아이콘을 발견했다면 해당 아이콘만 다운 받을 수 있습니다. 아이콘을 클릭하면 해상도와 파일 확장자, 웹에서 참고할 수 있는 html 소스까지 알려 줍니다. 

 

▼ 그럼 이클립스에서 폰트 전체를 다운 받기 위한 작업을 해 볼까요? Icon Font 란에 보시면 developer guide 라는 개발 가이드 링크가 있습니다. 클릭해서 해당 페이지로 이동합니다. 

 

▼ 개발 가이드 페이지에는 안드로이드 앱 개발에 참고할 만한 내용뿐만 아니라 웹, iSO 개발 시 필요한 내용도 들어가 있습니다. 이클립스를 이용해서 아이콘 전체를 다운 받기 위해 Icons for Android 란으로 갑니다. 그리고 material design icons git repository 링크를 클릭합니다. 연결된 웹 사이트는 아이콘을 다운 받을 수 있는 서버를 가리킵니다.  

 

▼ 이클립스에서 Git 플러그인을 이용해 파일을 다운 받으려면 아이콘이 저장된 서버의 URI 주소를 알아야 합니다. 파일 목록 상단에 보시면 HTTPS 란에 있는데, 그 주소가 URI 입니다. 

 

◎ 이클립스 다운로드 하기

 

▼ 일단 이클립스에 Git 플러그인이 깔려 있다는 전제하에서 작업을 하겠습니다. 현재 사용하는 버전이 Mars 이면 기본적으로 깔려 있습니다. 아이콘이 저장되어 있는 GitHub 서버의 URI 주소를 알아 왔다면 그것을 이용해서 전체 파일을 받을 것입니다. 이클립스에서 오른 마우스를 눌러 Import 메뉴를 선택합니다. 

 

▼ Import 목록에서 Git > Projects from Git 메뉴를 선택합니다. Git 클라이언트 프로젝트를 만들어서 서버 주소에 해당하는 파일을 전부 내려 받기 위해서 입니다.

 

▼ 두 번째 단계에서는 로컬 PC 에 받아 놓은 파일이냐? 아니면 URI 주소를 통해 받을 것이냐를 결정하게 됩니다. [Clone URI] 를 선택하고 Next 버튼을 눌러 줍니다. 

 

▼ 세 번째 단계에서는 Github 에서 다운받을 파일의 주소를 복사한 후 팝업창 URI 란에 넣어 줘야 합니다. 그럼 나머지 Host 와 Repository path 는 자동으로 들어갑니다. 만약 접속이 안 된다면 Connection 의 Protocol 이 틀렸을 수도 있습니다. HTTPS 인지 다시 한번 확인해 보세요. 

 

▼ 서버에 제대로 접속했다면 파일들이 버전 별로 나타납니다. 처음에는 어떤 것인지 모르기 때문에 모두 체크하고 받습니다. 

 

▼ 다음은 서버에서 받은 파일을 저장할 공간에 대한 설정입니다. 프로젝트가 모여 있는 곳이 관리하기 편하겠죠. Browse 버튼을 눌러 다운받을 곳을 지정한 후 다음으로 넘어 갑니다. 

 

▼ 마지막으로 기존에 존재하는 프로젝트에 포함할 것인지 아니면 새로 만들 것인지 묻는 단계가 나옵니다. 제일 아래에 있는 Import as general project 를 선택해서 새로 추가합니다. 

 

▼ 단계가 끝나면 프로젝트가 생성되고 서버에서 파일을 다운받게 됩니다. 아래 그림은 다운로드를 완성한 후의 모습입니다. 이렇게 받은 아이콘은 안드로이드 개발할 때 링크를 걸거나 복사해서 사용하면 되겠죠.