라벨이 icons8인 게시물 표시

iOS WebView Bottom Navigation Icon 적용

이미지
지난 포스트 에서 iOS Navigation Controller를 이용해서 WebView에  Bottom Navigation을 구현해보았다. 하지만 버튼이 사파리의 그것과 달리 텍스트로 보여지는데 텍스트 대신 아이콘으로 변경해보자. 우선 아이콘을 준비해야 하는데 Icons8 사이트에서 4 가지 버튼(Back, Forward, Reload, Home)에 맞는 아이콘을 다운받도록 하자. icons8.com에서 다운받는 방법은  https://icsdd.blogspot.com/2018/05/blog-post_24.html  참조. 필자가 다운받은 아이콘은 다음과 같다. 이제 Xcode를 실행하고 지난 포스트에서 만든 프로젝트를 열고 좌측 Project navigator의 Assets.xcassets를 선택한다. <사진 1>과 같은 모습이다. <사진 1> <사진 2> <사진 3> <사진 4> <사진 2>와 같이 다운로드한 아이콘들을 탐색기에서 끌어다가 Xcode의 Outline View로 놓으면 <사진 3>과 같은 모습이다. 우측 Set Viewer를 보면 추가한 아이콘들이 1x로 표시되는데 <사진 4>와 같이 아이콘을 Drag&Drop으로 2x 또는 3x로 이동할 수 있다. <사진 5> <사진 6> 이제 스토리보드를 열어서 각각의 버튼에 아이콘을 설정해보자. <사진 5>와 Back버튼을 선택하면 우측 Attribute inspector > Bar Item > Image 항목의 드롭다운 목록을 열어보면 이전에 추가한 아이콘들이 보인다. Back버튼으로 사용할 아이콘을 선택하고 나머지 Forward, Reload, Home버튼도 동일한 방법으로 아이콘을 설정해준다. 정상적으로 아이콘설정을 ...

무료 이미지/아이콘 다운로드

이미지
개발자가 디자이너 없이 혼자서 개발을 진행하면 가장 큰 애로사항 중 하나가 이미지나 아이콘이 필요할때이다. 예전에는 구글이나 네이버등 검색엔진에서 검색 후 가져다 썼지만 요즘은 디지털컨텐츠에 대한 저작권 문제로 고발을 당하거나 벌금을 내야 할수도 있기 때문에 주의를 해야 한다. 하지만 인터넷 검색을 잘 하면 무료로 사용할 수 있는 것들이 있는데 오늘은 Icon8( https://icons8.com/ )이라는 사이트의 무료 아이콘 사용법에 대해서 알아본다. <사진 1> <사진 1>이 icon8.com의 메인페이지인데 무려 68,600개의 무료 아이콘이 있다고 한다. 검색창에서 검색을 하거나 상단 메뉴의 Icons 메뉴를 누르면 <사진 2>의 화면을 볼수 있다. <사진 2> 좀 둘러보니 쓸만한 아이콘들이 제법 많고 이 곳에서 원하는 아이콘도 찾았다. 게다가 아이콘을 다운로드하기 전에 색상, 크기, 텍스트, 오버레이, 포맷 등 간단하게 편집까지해서 다운로드를 받을수 있다. 그럼 간단히 색상과 크기정도 편집해서 다운로드 받는 방법에 대해서 알아보자. 원하는 아이콘을 선택하면 <사진 3>과 같이 우측 상단에 아이콘이 표시된다. <사진 3> 기본적으로 iOS Fill 스타일이 적용되어 있는데 다른 스타일을 원하면 아이콘의 우측 목록에서 선택하면 적용된 모습을 볼 수 있다. 아이콘 바로 밑에 포맷과 크기를 선택할 수 있는데 "PNG 50 px"를 누르면 <사진 4>와 같이 포맷과 크기를 변경할 수 있는 모달창이 뜬다. "More sizes"를 누르고 원하는 크기를 입력한 후 우측 체크버튼을 클릭하면 설정이 끝나고 모달창이 닫힌다. <사진 4> <사진 5> <사진 6> <사진 6>은 편집이 끝난 화면이다...