이미지 (3)

플러터에서 이미지를 해상도에 따라 자동으로 지정하는 방법 우리가 만든 앱은 모바일 뿐만 아니라 태블릿, 데스크탑에서도 사용자가 이용할 수 있습니다. 그러다 보니 모바일에만 초점을 맞춰서 디자인을 하게 되면, 태블릿에서는 상당한 여백이 생겨서 우리가 의도한 디자인과 멀어지게 되고, 가독성 마저 떨어질 수 있습니다. 예를 들어, 모바일에서 사용되는 이미지 크기가 너무 작다면, 태블릿에서는 당연히 더 작아 보이겠죠? 그렇다고 크기가 큰 이미지를 사용하기에는 오히려 모바일에서 낭비인 것 같고요. 이런 경우에는 사용자가 이용 중인 기기의 해상도에 맞춰서 이미지를 변경해주는 방법이 있습니다. 그럼 플러터에서 어떻게 기기, 해상도에 따라서 자동으로 이미지를 불러오도록 설정하는지 알아보겠습니다. 해상도 폴더 생성하기 ..

플러터에서 로컬, 네트워크 이미지 사용하는 방법 우리는 앱에 적절한 이미지를 추가하여 사용자가 앱을 이해하기 쉽게 유도하거나, 앱의 분위기와 느낌(?)을 만들 수 있습니다. 이때 사용되는 이미지는 주로 로컬 저장소나 서버 요청으로 불러오는데요. 플러터에서는 Image() 위젯을 이용하면 간단하게 처리할 수 있습니다. 그럼 어떻게 이미지를 불러와서 화면에 나타내는지 알아보도록 하겠습니다. 로컬 이미지 우선 로컬에 저장된 이미지를 불러오려면 실제로 저장된 이미지가 있어야겠죠? 프로젝트의 최상위 위치에 assets 폴더를 생성합니다. 참고로 폴더 이름은 자유롭게 사용하시면 됩니다. 그리고 해당 폴더에 우리가 사용할 이미지를 추가합니다. 위젯에서 로컬 이미지를 표시하기 위해서는 pubspec.yaml 파일에 사..

플러터 cached_network_image 패키지로 이미지 캐시 처리 이미지가 많은 앱 페이지를 실행하면 이미지를 불러오고, 정상적으로 출력하기까지 아주 잠깐이지만 시간이 소요됩니다. 이때 사용자는 빈 공간의 이미지 영역이 채워지는 과정에서 깜빡이는 현상을 경험할 수 있습니다. 또 사용자가 인터넷이 연결되지 않은 오프라인 상태에서 앱을 실행하면, 이미지를 다운로드 받지 못해 앱을 이용하는데 큰 불편을 느낄 수 있습니다. 개인적으로 이런 사소한 부분이 앱의 완성도와 사용자 경험을 높인다고 생각합니다. 플러터에서는 cached_network_image 패키지를 사용하면 이런 이슈를 해결할 수 있습니다. 이 패키지는 일정 기간 동안 다운로드 받은 이미지를 캐시 저장소에 저장하여, 오프라인에서도 캐시 저장소에..