<div id="readability-page-1" class="page"><div id="main">
                
      
  
  
  

  
  
    
    <div><p data-ke-size="size16">웹뷰를 감싸는 Flutter 앱을 만들면서 여러가지 이슈를 겪었다. 기억에 남는 이슈를 여기에 <span>(두서없이ㅎ)</span> 남겨보겠다. 참고로 나의 상황은 아래와 같다.</p>
<ul data-ke-list-type="disc">
<li>크로스&nbsp;플랫폼으로&nbsp;앱을&nbsp;개발해보는&nbsp;것은&nbsp;처음이었다.&nbsp;안드로이드&nbsp;개발만&nbsp;했던&nbsp;나에게는&nbsp;다른&nbsp;진영의&nbsp;개발은&nbsp;상당히&nbsp;생소했다.</li>
<li>물론 Xcode도 처음 사용해보았다. 뿐만아니라 iOS 개발 및 배포와 관련된 경험이 모두 처음이었다.</li>
<li>Flutter를 다루는 것도 처음이었다</li>
</ul>


<figure data-ke-mobilestyle="widthOrigin" data-origin-width="530" data-origin-height="300"><span data-url="https://blog.kakaocdn.net/dn/y2eMP/btsqCrqmvmz/SadPN2KI9MiuN7kgyqZCK0/img.jpg" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/y2eMP/btsqCrqmvmz/SadPN2KI9MiuN7kgyqZCK0/img.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="530" data-origin-height="300"></span></figure>

<h2 data-ke-size="size26">Xcode 빌드 Fail이 될 때</h2>
<p data-ke-size="size16">Flutter로 개발하더라도 안드로이드와 iOS는 개별로 빌드를 해야한다. iOS는 Xcode로 빌드를 했는데... 처음부터 잘 될리가 없다. 안드로이드의 clean and build와 같은 방법이 있을 것으로 예상했고 예상대로 그런 방법이 있었다. 빌드 혹은 Run이 잘 안된다 싶으면 일단 아래부터 수행해보자.</p>
<ol data-ke-list-type="decimal">
<li>Delete <b>podfile.lock</b> (Do NOT delete PodFile)</li>
<li>Delete <b>.symlinks folder</b></li>
<li>Delete <b>pods folder</b></li>
<li>Navigate to ios directory in terminal and run <b>pod install</b></li>
<li>Open the <b>xcworkspace</b> file in xcode</li>
<li>Select product -&gt; <b>clean build folder</b></li>
<li><b>Run&nbsp;the&nbsp;project</b>&nbsp;from&nbsp;xcode&nbsp;once.&nbsp;All&nbsp;subsequent&nbsp;builds&nbsp;should&nbsp;work&nbsp;in&nbsp;your&nbsp;ide</li>
</ol>

<p data-ke-size="size16">만약 해당 이슈가 iOS보다 플러터 이슈에 가깝다면 아래 방법을 시도해보자.</p>
<ol data-ke-list-type="decimal">
<li>run <b>flutter clean</b></li>
<li>Delete the following files in the <b>ios</b> folder: <b>Podfile</b> and&nbsp;&nbsp;<b>Podfile.lock</b> and the folder Pods</li>
<li>run <b>flutter pub get</b></li>
<li>go to the 'ios' folder using <b>cd ios</b></li>
<li>run <b>pod install --repo-update</b> (to install the pods again, and if u face any problem try without <b>--repo-update</b>)</li>
<li>Run&nbsp;your&nbsp;app,&nbsp;from&nbsp;command&nbsp;line&nbsp;using&nbsp;'flutter&nbsp;run'&nbsp;which&nbsp;will&nbsp;take&nbsp;a&nbsp;little&nbsp;bit&nbsp;longer</li>
</ol>

<blockquote data-ke-style="style2">참고자료<br>- No podspec found for <a href="https://stackoverflow.com/questions/75117926/no-podspec-found-for-flutter-user-agentx-in-symlinks-plugins-flutter-user-ag" target="_blank" rel="noopener">`flutter_user_agentx`</a> in `.symlinks/plugins/flutter_user_agentx/ios`<br>- Build Failed <a href="https://stackoverflow.com/questions/73312754/build-failed-for-flutter-project-in-xcode" target="_blank" rel="noopener">for flutter project</a> in Xcode</blockquote>



<figure data-ke-mobilestyle="widthOrigin" data-origin-width="2400" data-origin-height="960"><span data-url="https://blog.kakaocdn.net/dn/SNk43/btsquBO7IsB/pF2FZeiZr6dmKKdxSuDP2K/img.jpg" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/SNk43/btsquBO7IsB/pF2FZeiZr6dmKKdxSuDP2K/img.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="2400" data-origin-height="960"></span></figure>


<h2 data-ke-size="size26">'Flutter/Flutter.h'&nbsp;file&nbsp;not&nbsp;found&nbsp;</h2>
<p data-ke-size="size16">위에서 언급한 방식으로도 해결안되는 에러가 있었다. "'Flutter/Flutter.h' file not found"는 분명 플러터 이슈일텐데 Xcode에서 에러를 계속 출력했다. 한 개발자는 결국 iOS 폴더를 재생성하는 방법을 선택했다. 나 역시 이를 따라해보았고 이후에 이런 이슈는 없었다. 해당 컨텐츠가 상당히 잘 정리했기에 솔루션을 여기 남기지 않고 링크만 공유한다.</p>
<ul data-ke-list-type="disc">
<li>Taek-In Jeong님 블로그 : 'Flutter/Flutter.h' file not found <a href="https://velog.io/@jungti1234/Flutter-iOS-xcode-FlutterFlutter.h-file-not-found-%ED%95%B4%EA%B2%B0%EB%B0%A9%EC%95%88" target="_blank" rel="noopener">해결방안</a></li>
</ul>


<h2 data-ke-size="size26">Command&nbsp;PhaseScriptExecution&nbsp;failed&nbsp;with&nbsp;a&nbsp;nonzero&nbsp;exit&nbsp;code</h2>
<p data-ke-size="size16">역시 Xcode에서 확인한 에러이다. (ㅂㄷㅂㄷ) 이 역시도 가장 처음에 소개한 방식으로는 해결할 수 없었다. 하지만 누군가는 답을 찾을 것이다. 개발을 완료하고 Archive하는 과정에서 이 에러를 확인할 수 있다. Cocoapods에서 생긴 이슈로 해결법은 아래와 같다.</p>
<ul data-ke-list-type="disc">
<li>아래 경로에서 Pods-Runner-frameworks.sh를 찾는다
<ul data-ke-list-type="disc">
<li>(프로젝트명)/ios/Pods/Target Support Files/Pods-Runner/Pods-Runner-frameworks.sh</li>
</ul>
</li>
<li>readlink에 -f 옵션을 추가한다</li>
</ul>
<pre id="code_1691475413154" data-ke-language="bash" data-ke-type="codeblock"><code>if [ -L "${source}" ]; then
  echo "Symlinked..."
  source="$(readlink -f "${source}")"
fi</code></pre>

<blockquote data-ke-style="style2">참고자료<br>- <a href="https://velog.io/@1000zoo/Flutter-Xcode-%EC%97%90%EB%9F%AC-Command-PhaseScriptExecution-failed-with-a-nonzero-exit-code" target="_blank" rel="noopener">Xcode 에러</a>: Command PhaseScriptExecution failed with a nonzero exit code</blockquote>

<figure data-ke-mobilestyle="widthOrigin" data-origin-width="540" data-origin-height="321"><span data-url="https://blog.kakaocdn.net/dn/xzQ50/btslRIE6AY4/buDEbCoSKG8WYXt0ObJUK0/img.jpg" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/xzQ50/btslRIE6AY4/buDEbCoSKG8WYXt0ObJUK0/img.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="540" data-origin-height="321"></span></figure>



<h2 data-ke-size="size26">webview_flutter와 flutter_inappwebview</h2>
<p data-ke-size="size16">플러터에서 웹뷰를 구현하고 싶을 때 가장 많이 사용하는 webview_flutter를 사용한다. 하지만 경우에 따라서는 웹뷰에 많은 기능을 요구할 때가 있다. 자바스크립트를 실행시키고 싶다거나 웹 로컬 스토리지에 특정 데이터를 저장하고 싶다거나 웹뷰를 생성할 때 특정 로직을 실행시키고 싶다거나 등등. 그런 과정에서 webview_flutter로는 한계를 느낄 때가 있다.</p>

<p data-ke-size="size16">그런 경우에는 <a href="https://pub.dev/packages/flutter_inappwebview" target="_blank" rel="noopener">flutter_inappwebview</a>를 사용해보자. version 5는 22년 12월, version 6는 23년 6월에 업데이트되면서 꾸준히 관리되는 웹뷰 플러그인이다. 이용편의성도 높고 iOS/안드로이드 모두 문제없이 커버된다. webview_flutter에서 제한적이었던 부분도 flutter_inappwebview에서는 쉽게 해결될 수 있다. <span>(그런게 있었는데 기억이 나질 않는다.)</span> 그러니 웹뷰를 추가할 때 2가지를 모두 고려해보자.</p>

<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-08-08 오후 4.03.29.png" data-origin-width="720" data-origin-height="629"><span data-url="https://blog.kakaocdn.net/dn/wUeNq/btsqvj8wRP3/raLaLRA8BPQNzdmtek8j81/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/wUeNq/btsqvj8wRP3/raLaLRA8BPQNzdmtek8j81/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-08-08 오후 4.03.29.png" data-origin-width="720" data-origin-height="629"></span></figure>





<blockquote data-ke-style="style2"><b>그 외 내가 참고했던 자료들 (2023년 7월 시점까지 유효한 자료)</b><br>- TestFlight에 <a href="https://velog.io/@cm961115/iOS-TestFlight%EC%97%90-%EC%88%98%EB%8F%99-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0" target="_blank" rel="noopener">수동 배포</a>하기<br>- Flutter aab 파일, 디버그 기호가 업로드되지 않았다는 <a href="https://dev.tozau.io/entry/Flutter-aab-%ED%8C%8C%EC%9D%BC-%EB%94%94%EB%B2%84%EA%B7%B8-%EA%B8%B0%ED%98%B8%EA%B0%80-%EC%97%85%EB%A1%9C%EB%93%9C%EB%90%98%EC%A7%80-%EC%95%8A%EC%95%98%EB%8B%A4%EB%8A%94-%EA%B2%BD%EA%B3%A0" target="_blank" rel="noopener">경고</a><br>- 열심히 만든 어플을 <a href="https://velog.io/@anna_developer/%EC%97%B4%EC%8B%AC%ED%9E%88-%EB%A7%8C%EB%93%A0-%EC%96%B4%ED%94%8C%EC%9D%84-%EA%B5%AC%EA%B8%80-%ED%94%8C%EB%A0%88%EC%9D%B4-%EC%8A%A4%ED%86%A0%EC%96%B4%EC%97%90-%EB%B0%B0%ED%8F%AC-%ED%95%B4-%EB%B3%B4%EC%9E%90" target="_blank" rel="noopener">구글 플레이 스토어에 배포</a> 해 보자<br>- webview_flutter에서 <a href="https://dev-yakuza.posstree.com/ko/flutter/webview_flutter/cookie/" target="_blank" rel="noopener">쿠키</a> 사용하기<br>- <a href="https://velog.io/@jhkim0122/flutterinappwebview%EB%A1%9C-hybrid-app-%EB%A7%8C%EB%93%A4%EA%B8%B0" target="_blank" rel="noopener">flutter_inappwebview</a>로 hybrid app 만들기<br>- googleutilities framework failed no such file or directory react <a href="https://jaeyung1001.tistory.com/entry/Flutter-googleutilities-framework-failed-no-such-file-or-directory-react-%EB%AC%B8%EC%A0%9C%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95" target="_blank" rel="noopener">문제해결</a> 방법<br>- 웹뷰뿌시기(webview) 자주 쓰는 <a href="https://www.blueswt.com/117" target="_blank" rel="noopener">10가지</a> 셋팅</blockquote>

<p data-ke-size="size16">.</p></div>

    
    
    
    
    
      <div>
        
          <p><img src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcmM3KJ%2FbtsqtV1i1bx%2FlIgyg9SE9ukeboMdtNsKv1%2Fimg.jpg" alt="thumbnail image">
          </p>
        
        
      </div>
    
    
    
    
    
  
  

      
  
            </div></div>

개발자입니까?

웹뷰를 감싸는 Flutter 앱을 만들면서 여러가지 이슈를 겪었다. 기억에 남는 이슈를 여기에 (두서없이ㅎ) 남겨보겠다. 참고로 나의 상황은 아래와 같다.
크로스 플랫폼으로 앱을 개발해보는 것은 처음이었다. 안드로이드 개발만 했던 나에게는 다른 진영의 개발은 상당히 생소했다.
물론 Xcode도 처음 사용해보았다. 뿐만아니라 iOS 개발 및 배포와 관련된 경험이 모두 처음이었다.
Flutter를 다루는 것도 처음이었다
 
 
Xcode 빌드 Fail이 될 때
Flutter로 개발하더라도 안드로이드와 iOS는 개별로 빌드를 해야한다. iOS는 Xcode로 빌드를 했는데... 처음부터 잘 될리가 없다. 안드로이드의 clean and build와 같은 방법이 있을 것으로 예상했고 예상대로 그런 방법이 있었다. 빌드 혹은 Run이 잘 안된다 싶으면 일단 아래부터 수행해보자.
Delete podfile.lock (Do NOT delete PodFile)
Delete .symlinks folder
Delete pods folder
Navigate to ios directory in terminal and run pod install
Open the xcworkspace file in xcode
Select product -> clean build folder
Run the project from xcode once. All subsequent builds should work in your ide
 
만약 해당 이슈가 iOS보다 플러터 이슈에 가깝다면 아래 방법을 시도해보자.
run flutter clean
Delete the following files in the ios folder: Podfile and  Podfile.lock and the folder Pods
run flutter pub get
go to the 'ios' folder using cd ios
run pod install --repo-update (to install the pods again, and if u face any problem try without --repo-update)
Run your app, from command line using 'flutter run' which will take a little bit longer
 
참고자료
- No podspec found for `flutter_user_agentx` in `.symlinks/plugins/flutter_user_agentx/ios`
- Build Failed for flutter project in Xcode
 
 
 
 
'Flutter/Flutter.h' file not found 
위에서 언급한 방식으로도 해결안되는 에러가 있었다. "'Flutter/Flutter.h' file not found"는 분명 플러터 이슈일텐데 Xcode에서 에러를 계속 출력했다. 한 개발자는 결국 iOS 폴더를 재생성하는 방법을 선택했다. 나 역시 이를 따라해보았고 이후에 이런 이슈는 없었다. 해당 컨텐츠가 상당히 잘 정리했기에 솔루션을 여기 남기지 않고 링크만 공유한다.
Taek-In Jeong님 블로그 : 'Flutter/Flutter.h' file not found 해결방안
 
 
Command PhaseScriptExecution failed with a nonzero exit code
역시 Xcode에서 확인한 에러이다. (ㅂㄷㅂㄷ) 이 역시도 가장 처음에 소개한 방식으로는 해결할 수 없었다. 하지만 누군가는 답을 찾을 것이다. 개발을 완료하고 Archive하는 과정에서 이 에러를 확인할 수 있다. Cocoapods에서 생긴 이슈로 해결법은 아래와 같다.
아래 경로에서 Pods-Runner-frameworks.sh를 찾는다
(프로젝트명)/ios/Pods/Target Support Files/Pods-Runner/Pods-Runner-frameworks.sh
readlink에 -f 옵션을 추가한다
if [ -L "${source}" ]; then
  echo "Symlinked..."
  source="$(readlink -f "${source}")"
fi
 
참고자료
- Xcode 에러: Command PhaseScriptExecution failed with a nonzero exit code
 
 
 
webview_flutter와 flutter_inappwebview
플러터에서 웹뷰를 구현하고 싶을 때 가장 많이 사용하는 webview_flutter를 사용한다. 하지만 경우에 따라서는 웹뷰에 많은 기능을 요구할 때가 있다. 자바스크립트를 실행시키고 싶다거나 웹 로컬 스토리지에 특정 데이터를 저장하고 싶다거나 웹뷰를 생성할 때 특정 로직을 실행시키고 싶다거나 등등. 그런 과정에서 webview_flutter로는 한계를 느낄 때가 있다.
 
그런 경우에는 flutter_inappwebview를 사용해보자. version 5는 22년 12월, version 6는 23년 6월에 업데이트되면서 꾸준히 관리되는 웹뷰 플러그인이다. 이용편의성도 높고 iOS/안드로이드 모두 문제없이 커버된다. webview_flutter에서 제한적이었던 부분도 flutter_inappwebview에서는 쉽게 해결될 수 있다. (그런게 있었는데 기억이 나질 않는다.) 그러니 웹뷰를 추가할 때 2가지를 모두 고려해보자.
 
 
 
 
 
그 외 내가 참고했던 자료들 (2023년 7월 시점까지 유효한 자료)
- TestFlight에 수동 배포하기
- Flutter aab 파일, 디버그 기호가 업로드되지 않았다는 경고
- 열심히 만든 어플을 구글 플레이 스토어에 배포 해 보자
- webview_flutter에서 쿠키 사용하기
- flutter_inappwebview로 hybrid app 만들기
- googleutilities framework failed no such file or directory react 문제해결 방법
- 웹뷰뿌시기(webview) 자주 쓰는 10가지 셋팅
 
.

Flutter로 앱을 만들면서 만났던 이슈들

댓글