서론

프론트엔드 챕터에서 디자인 시스템을 공부하면서 번들링이라는 개념을 알게 되었다. 하지만 iOS 공부를 하면서 번들링이라는 단어를 들어본 경험이 없었던 것 같아 궁금해져 공부를 하게 되었다. 번들링이라는 개념이 앱에서는 어떻게 사용되고, 생겨나게 됐는지에 대해 알아보고 번들링의 필요성에 대해 적으며 마무리를 할 예정이다.

Web

웹에서 말하는 번들링의 개념은 주로 자바스크립트와 관련된 파일들을 하나의 번들 파일로 묶어서 웹 애플리케이션의 성능을 향상 시키는 것을 목적으로 한다.
주로 웹팩(WebPack)과 같은 도구를 사용해 필요한 자바스크립트 파일을 번들 파일로 묶어준다. 이렇게 묶인 번들 파일은 웹 어플리케이션의 시작점에 로드 된다.

iOS

앱에서 말하는 번들의 개념은 앱의 실행을 위해 필요한 파일들을 하나의 묶음으로 만드는 것을 의미한다. iOS에서는 이런 번들의 개념을 "App Bundle"이라 부르고, 실행파일과 실행에 필요한 리소스 및 데이터 파일을 하나로 묶어서 구성된다. 이 앱 번들은 .app 확장자를 가진 디렉토리로 구성되어 있으며, iOS 운영체제는 앱 실행을 위해 번들 내부에서 필요한 파일들을 자동으로 로드한다.

앱에서 번들링 개념이 왜 나오게 됐을까?

앱에서 번들 개념이 등장하기 전에는 모바일 앱이나 데스크탑 앱을 개발할 때에는 각각의 파일들을 개별적으로 관리하고 배포해야했다. 예를 들어, 앱에서 사용되는 실행 파일, 이미지, 오디오, 비디오 등 모든 파일들이 개별적으로 다운로드되어야 했다.

이러한 방식으로 파일을 관리하게 되면, 파일을 관리하고 배포하는 것이 복잡해지며 앱의 용량이 커지는 문제가 있다. 또한, 사용자가 앱을 업데이트할 때마다 모든 파일을 다운로드해야 하기 때문에 업데이트 시간도 길어지게 된다.

그렇기 때문에 앱에서 번들 개념이 등장했다. 번들 개념은 앱의 모든 파일을 하나의 패키지로 묶어서 관리하며, 이 패키지를 앱 버전별로 구분하여 배포한다. 이렇게 번들로 묶인 파일은 사용자가 앱을 설치할 때 함께 설치되어 앱 실행 시 필요한 파일들을 빠르게 접근할 수 있다.

앱에서 번들 개념이 등장한 가장 큰 이유는 앱의 용량을 줄이고, 앱의 업데이트 속도를 빠르게 하기 위해서다. 또한, 앱 개발자는 번들 내부의 파일들을 쉽게 관리하고, 앱의 기능을 추가하거나 수정할 때 번들만 업데이트하면 되므로 앱 업데이트가 더욱 효율적으로 이루어진다.

웹과 앱에서 말하는 번들링 개념의 공통점

• 파일들을 하나의 묶음으로 만들어서 관리할 수 있다.
• 로딩 속도를 향상시킬 수 있다.

웹과 앱에서 말하는 번들링 개념의 차이점

웹과 앱에서 말하는 번들이라는 개념의 공통점은 파일들을 하나의 묶음으로 만드는 것이지만, 목적과 사용되는 컨텍스트가 다르기 때문에 차이점이 있다.

• 웹에서의 번들링은 자바스크립트 파일들을 묶는 것이 주목적이지만, 앱에서의 번들은 실행 파일과 리소스, 데이터 파일 등을 묶는 것이 주목적이다.
• 웹에서의 번들링은 브라우저에서 로딩할 때 사용되며, 앱에서의 번들은 앱 실행 시 사용된다.
• 웹에서의 번들링은 주로 자바스크립트 파일을 번들링하지만, 앱에서는 여러 종류의 파일을 번들링할 수 있다.
• 웹에서의 번들링은 주로 웹팩(Webpack)과 같은 도구를 사용하지만, 앱에서의 번들링은 Xcode나 Android Studio와 같은 개발 도구에서 지원된다.

번들링을 사용하게 되면 좋은 점

1. 성능 향상

   • 번들링을 사용하면 앱 실행 시 필요한 리소스들을 한 번에 로드할 수 있어서 성능이 향상된다. 번들에 포함된 리소스들은 한 번에 로드되기 때문에, 리소스를 불러오는 데 필요한 네트워크 트래픽과 로딩 시간이 줄어들어 사용자 경험을 개선할 수 있다.

   • 번들링을 사용하면 앱이 실행될 때 동적으로 리소스를 불러오지 않아도 된다. 앱에서 동적으로 리소스를 불러오는 경우, 사용자의 인터넷 연결 상태나 서버 응답 속도에 따라 로딩 시간이 달라질 수 있다. 하지만 번들링을 사용하면 이러한 상황에 대한 대처가 필요하지 않습니다.

   • 번들링을 사용하면 메모리 사용량이 줄어든다. 앱이 실행될 때 동적으로 리소스를 불러오는 경우, 메모리 사용량이 많아질 수 있다. 하지만 번들링을 사용하면 메모리 사용량이 줄어들기 때문에, 앱이 더 빠르고 안정적으로 동작할 수 있다.

2. 관리 용이성

   • 번들링을 사용하면 모든 앱 리소스를 한 곳에서 관리할 수 있다. 이렇게 되면, 개발자는 모든 파일을 일일이 찾아서 관리하지 않아도 되고, 프로젝트 파일들이 더 깔끔하게 유지된다. 예를 들어, 앱의 이미지 파일들이 모두 "Images" 폴더에 저장되어 있으면, 개발자는 이미지 파일들을 사용할 때 "Images/이미지파일이름.png"와 같이 경로를 지정해주면 된다. 따라서 개발자는 모든 파일을 일일이 찾지 않아도 되기 때문에 코드를 작성하는 데 드는 시간이 줄어들고, 프로젝트 관리가 훨씬 수월해진다.

   • 번들링을 사용하면 리소스 파일들이 중복해서 저장되지 않도록 관리할 수 있다. 예를 들어, 앱의 여러 부분에서 사용되는 이미지 파일이 있다면, 번들링을 사용하여 해당 이미지 파일을 한 번만 저장하면 된다. 즉, 앱의 크기를 줄일 수 있고, 중복된 파일을 관리하는 데 드는 시간과 노력도 줄일 수 있다.

3. 유지 보수 용이성

   • 번들링을 사용하면 개발자가 앱 리소스를 수정하거나 추가할 때 마다, 앱 전체의 모든 코드를 업데이트할 필요가 없다. 리소스 파일만 수정하면 되기 때문에, 유지 보수가 훨씬 쉬워진다.

   • 즉, 개발자가 앱을 더욱 빠르고 쉽게 수정할 수 있도록 도와준다. 예를 들어, 앱에 새로운 이미지나 아이콘을 추가할 때, 번들링을 사용하면 해당 리소스 파일만 업데이트하면 된다. 그러면 빌드 시간을 단축할 수 있고, 수정 사항을 바로 적용하여 테스트하고 배포할 수 있다.

   • 앱의 코드와 리소스를 분리함으로써, 개발자는 코드와 디자인을 더욱 독립적으로 관리할 수 있다. 그렇게 되면 디자이너와 개발자 간의 협업이 더욱 수월해지며, 디자인 변경 사항을 더 쉽게 반영할 수 있다.

4. 배포 용이성

   • 일반적으로 앱을 배포할 때, 다양한 파일들을 포함하는 압축 파일로 만들어서 배포한다. 이렇게 되면, 사용자가 압축 파일을 다운로드하고 압축을 해제해야만 앱을 설치할 수 있다. 그러나 번들링을 사용하면, 사용자가 앱을 다운로드할 때 하나의 파일만 다운로드하면 되기 때문에 설치 과정이 더욱 간편하다.

   • 앱의 업데이트 과정도 번들링을 사용하면 더욱 간단해진다. 번들링을 사용하면, 앱의 업데이트가 필요한 경우, 수정된 파일만 번들에 추가하면 된다. 이렇게 되면, 사용자는 수정된 파일만 다운로드하면 되기 때문에 앱 업데이트 과정이 빠르고 간단해진다. 또한, 앱의 크기가 줄어들어 저장 공간을 절약할 수도 있다.

5. 모듈화

   • 번들링을 통해 모듈화를 구현하면, 앱을 작은 단위로 쪼개서 개발할 수 있다. 개발자는 각 모듈을 독립적으로 개발하고, 테스트할 수 있으며, 각 모듈의 로직을 파악하고 유지 보수할 수 있다.

   • 앱에서는 모듈화를 통해 코드의 재사용성을 높일 수 있다. 모듈화를 통해 개발된 코드는 다른 모듈에서도 사용할 수 있으므로, 중복코드를 줄이고 코드의 효율성을 높일 수 있다.

   • 모듈화를 통해 앱의 구조가 더욱 명확해지므로, 개발자들 간의 협업이 더욱 원활해진다. 각 모듈은 독립적으로 개발될 수 있으므로, 여러 개발자들이 동시에 작업할 수 있고, 코드 충돌 문제를 예방할 수 있다.

웹에서 번들링을 사용하게 되면 좋은 점

웹에서 번들링을 사용하게 되면 좋은 점으로는 위에 작성한 앱에서의 좋은 점과 거의 유사하지만, 추가적인 부분이 있기 때문에 따로 빼서 적어보았다.

+) 크로스 브라우징

• 웹에서는 다양한 브라우저에서 동작하는 것이 중요한데, 각 브라우저마다 자바스크립트의 모듈 시스템을 지원하는 방식이 다르다. 이러한 차이 때문에, 모듈을 로드하는 데 생기는 문제를 해결하기 위해 번들링이 필요하다. 따라서 번들러는 모든 자바스크립트 파일을 하나의 파일로 묶어주기 때문에, 브라우저가 해당 파일을 로드할 때 모든 모듈이 함께 로드된다. 즉, 모듈 로드와 관련된 문제를 해결할 수 있다.
• 또한, 번들링을 통해 브라우저 캐싱을 효과적으로 이용할 수 있다. 번들링된 파일은 브라우저에서 한 번 다운로드하면 캐시에 저장된다. 그리고 다음에 해당 파일이 필요할 때는 캐시에서 로드되기 때문에, 네트워크 트래픽을 줄일 수 있다. 이를 통해, 웹 페이지의 로딩 속도를 높일 수 있다.

결론

번들링은 빌드 프로세스를 자동화하고, 코드를 최적화하고, 라이브러리 및 모듈 관리를 단순화하는 등 장점이 많은 기술이다. 번들링은 웹과 앱 모두 중요한 개념인 것을 알게되었고, 각 플랫폼의 성격에 맞춰 조금 다른 부분이 있지만 전체적인 개념은 비슷하다고 느껴진다.
키워드 하나를 공부하면서 더 알아가면서, 공부해야 할 것들이 많다고 생각된다. 차근 차근 공부해야겠다.