[Flutter] 웹뷰 구현(네이버)

강의에서 배운 기본 코드를 가지고 추가로 구현해서 네이버 화면의 웹뷰를 구현해보았다.

// 기본적인 StatelessWidget 구조
class HomeScreen extends StatelessWidget {
  WebViewController controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..loadRequest(homeUrl);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(...),
      body: WebViewWidget(controller: controller),
    );
  }
}

 

 

---

1단계: StatefulWidget으로 변경

왜 변경했나?

• 웹페이지 로딩 상태 추적 필요
• 뒤로가기/앞으로가기 버튼 상태 관리
• 동적 UI 업데이트

핵심 변경사항

class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool isLoading = true;
  bool canGoBack = false;
  bool canGoForward = false;
  String currentUrl = '';
}

---

2단계: 파일 구조화

기존: 단일 파일

lib/
└── main.dart (모든 코드)

개선: 기능별 분리

lib/
├── main.dart                    # 앱 진입점
├── constants/app_constants.dart # 상수 관리
├── screens/home_screen.dart     # 메인 화면
└── widgets/
    ├── loading_widget.dart      # 로딩 컴포넌트
    └── bottom_navigation_widget.dart # 하단 네비게이션

• 코드 재사용성 증가
• 유지보수 편의성
• 각 파일의 책임 명확화

---

3단계: UI/UX 개선

네이버 색상 적용

// constants/app_constants.dart
static const Color naverGreen = Color(0xFF03C75A);

로딩 상태 관리

// NavigationDelegate로 웹페이지 상태 추적
NavigationDelegate(
  onPageStarted: (String url) {
    setState(() {
      isLoading = true;
      currentUrl = url;
    });
  },
  onPageFinished: (String url) async {
    setState(() {
      isLoading = false;
    });
    await _updateNavigationState();
  },
)

네비게이션 버튼 상태 관리

Future<void> _updateNavigationState() async {
  final backStatus = await controller.canGoBack();
  final forwardStatus = await controller.canGoForward();
  setState(() {
    canGoBack = backStatus;
    canGoForward = forwardStatus;
  });
}

---

4단계: 네이버 앱 느낌 추가

햅틱 피드백

import 'package:flutter/services.dart';

void _refresh() {
  controller.reload();
  HapticFeedback.lightImpact(); // 터치 피드백
}

하단 네비게이션 바 구현

// 네이버 앱과 동일한 구성
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    _buildBottomNavButton(icon: Icons.home, label: '홈'),
    _buildBottomNavButton(icon: Icons.search, label: '검색'),
    _buildBottomNavButton(icon: Icons.newspaper, label: '뉴스'),
    _buildBottomNavButton(icon: Icons.shopping_cart, label: '쇼핑'),
  ],
)

---

5단계: 레이아웃 세부 조정

AppBar 정렬 변경

AppBar(
  centerTitle: false, // 기본 true에서 false로 변경
  title: Row(
    children: [
      Icon(Icons.language),
      Text('네이버웹뷰'), // 한글로 변경
    ],
  ),
)

SafeArea 적용 + 색상 통일

// 처음 시도 (문제 발생)
SafeArea(child: Container(...)) // 하단 흰색 여백 생김

// 최종 해결
Container(
  color: AppConstants.naverGreen, // 전체 영역 색상
  child: SafeArea(
    child: Container(...), // 안전한 영역에만 컨텐츠
  ),
)

BoxShadow 제거

// 기존: decoration 사용
decoration: BoxDecoration(
  color: AppConstants.naverGreen,
  boxShadow: [...], // 원치 않는 선 생성
)

// 개선: 단순 color 사용
color: AppConstants.naverGreen, // 깔끔한 단색

---

 

깨달은점

1. 상태 관리의 중요성

• StatelessWidget → StatefulWidget 변경으로 동적 UI 구현
• setState()를 통한 실시간 상태 업데이트

2. WebView 제어

// 기본 설정
WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setNavigationDelegate(NavigationDelegate(...))
  ..loadRequest(Uri.parse(url))

// 네비게이션 제어
await controller.canGoBack()
await controller.goBack()
controller.reload()

3. 컴포넌트 분리의 장점

• 재사용 가능한 위젯 생성
• 코드 가독성 향상

4. 사용자 경험 개선

• 로딩 상태 표시
• 햅틱 피드백
• 에러 처리 및 사용자 알림

5. 레이아웃 세부 조정

• SafeArea 활용법
• 색상 통일성 유지
• AppBar 커스터마이징

---

최종 결과

완성된 기능들:

✅ 네이버 브랜드 컬러 적용
✅ 로딩 상태 표시
✅ 네비게이션 버튼 (뒤로가기, 앞으로가기, 새로고침, 홈)
✅ 하단 네비게이션 바 (홈, 검색, 뉴스, 쇼핑)
✅ 햅틱 피드백
✅ 링크 복사/공유 기능
✅ SafeArea 적용
✅ 에러 처리

---

🔍 트러블슈팅 기록

문제 1: 하단 SafeArea 흰색 여백

해결: Container로 전체 영역 색상 지정 후 SafeArea 적용

문제 2: BoxShadow로 인한 원치 않는 선

해결: BoxDecoration 제거하고 단순 color 속성 사용

문제 3: 상태 관리 부족

해결: StatefulWidget 전환 + NavigationDelegate 활용