my_webpage
mywebpage-220b8.web.app
블로그
GitHub - ujo-orr/my_webpage: webPage prac
webPage prac. Contribute to ujo-orr/my_webpage development by creating an account on GitHub.
github.com
GitHub
[플러터 Flutter] web Blog 만들어보기 1
Flutter web으로 나만의 블로그를 만들어 보았습니다.그 중에서도 옛날 감성인 커스텀 홈페이지를 만들어 보고 싶었기때문에..코드는 엉망 진창이지만..구현해보고 싶었던 기능들은 크게FireBase를
ujo-orr.tistory.com
전편으로부터 이어 작성합니다.
- FireBase를 통해 CRUD (사진, 동영상 포함)
- go_router 사용하기
- flutter_riverpod 사용하기
- post List는 GridView.builder로 post count의 갯수만큼
- 커스텀 폰트 사용하기
- 배경 쪽에 반짝거리는 별 애니메이션
- BGM
- 마우스커서 커스텀
- 커스텀 사이드바
- 홈페이지 이름(AppBar TextButton)을 눌렀을 때 새로고침
- URL링크 리다이렉트
- 로그인, 로그아웃 (나만 쓸 수 있는)
BGM
여기서 가장 많은 시간을 소비하였습니다.
우선 Google Chrome을 포함한 대부분의 현대 브라우저에서는 사용자 상호작용 없이
autoPlay(웹에 진입하자마자 소리가 재생되는)를 제한합니다.
즉, 사용자의 상호작용 없이 자동재생을 허용하지 않기 때문에 반드시
[사용자가 클릭하였을 시] 같은 상호작용을 통해서 소리가 재생되어야 합니다.
각설하고 마저 진행해 보면
BGM 역시 블로그를 방문하는 사람들에게 url을 통한 다운로드 형식이 아닌 assets에 포함시켜 진행하였습니다.
pubspec.yaml 파일에
이와 같이. mp3 확장자가 있는 경로를 설정해 준 뒤에
눌렀을 때 아이콘의 모양과 색상이 변경되도록 설정해 두었습니다.
그리고 이처럼 audio를 재생할 경로와 soundViewModel이 처음 호출될 때 최초 사항들을 적용시켰는데
여기서는 반드시 _audioElement.muted 가 true 여야 한다는 점입니다.
기본적으로 웹으로 인덱싱하여 dart코드가 html로 변환될 때 디폴트값이 autoPlay가 걸려서 인덱싱 되기 때문에
flutter에서 미리 mute를 걸어줘야 한다는 점입니다.
그리고 토글버튼을 만들어 재생과 정지를 할 수 있도록 하였습니다.
하지만 여기서 중요한 점은
flutter run을 통한 에뮬레이터에서는 문제없이 잘 작동이 되는데..
flutter build web을 한 뒤 firebase deploy를 하면 그 web페이지에서는 어떠한 상호작용이 안된다는 것이었습니다.
정말 여러 가지를 시도해 보았는데,
- pubspec.yaml의 경로를 절대경로로 설정하기
- firebase.josn파일에 경로를 확실히 해주고 html으로 인덱싱 하기
- 코드 다시 짜기
등등 stackOverFlow, GIt을 전전긍긍하다 도저히 안돼서 혼자 알아낸 결과는
크롬 개발자 콘솔에서 오류로그를 확인해 본 결과
toggleSound버튼을 누를 때마다 오류 메시지가 출력되며 작동하지 않는다는 것을 알아냈습니다.
그래서 https://mywebpage-220b8.web.app/assets/sound/night_ambience.mp3
를 접속해 보아서 다시 개발자 콘솔을 확인했더니 어찌 mp3플레이어는 나오는 것으로 확인됐지만 파일을 인식 못한 탓인지 어떠한 상호작용도 되지 않고 있었습니다..
그렇게 왜 또 경로가 문제가 생겼는지에 대해 확인해 본 결과
여기 assets경로를 보면 뭔가 이상한 점이 보이실 겁니다.
assets/assets처럼 assets를 두 번 사용하여 경로를 설정해 줬다는 겁니다.
왜 이렇게 해놨냐 하면
여기 build/web을 보시게 되면 assets/assets/ 의 형태처럼 assets파일이 두 개가 있는 것을 확인해볼 수 있었습니다.
분명 저는 이처럼 assets폴더 아래에 assets폴더를 만든 적이 없음에도 불구하고
flutter build web을 터미널에 실행하면 위 사진처럼
assets/assets/ 형식으로 플러터에서 자동으로 만들어준다는 점입니다.
이점이 버그일 거라고 생각은 되는데 왜 저렇게 되는지 모르겠습니다..ㅠㅠ
그렇기에 플러터 크롬에뮬레이터에서는 assets/sound/ 형식이 잘 적용되어 재생이 됐지만
web에서는 assets/assets/ 형식으로 되어있어 web에서 경로를 찾질 못했던 것입니다..
그렇기에 경로를
'assets/assets/sound/night_ambience.mp3'처럼 설정해 준 뒤 firebase deploy를 진행해 본 결과 문제없이 작동이 되는 것을 확인했습니다.
마우스커스텀
Free Cursor Downloads - Cursors-4U.com
Date: 16 Jan 2024, 22:00 By Tor With 11 Comments All commenting and comments have been removed from the cursor pages. Too many negative comments that got out of hand. Date: 28 Dec 2023, 00:37 By Tor With 1 Comments Haven't work on this site in years. But I
www.cursors-4u.com
이 사이트로 접속하여 마음에 드는 마우스 커서를 찾은 뒤
option #1에 적혀있는 HTML code를 복사하여
web/index.html에 있는 <head> 단에 <style> 태그를 넣어 붙여 넣기 해줬습니다.
네트워크를 통해 커스텀커서의 형태를 불러오도록 해놨으며 여기서 단점은
chrome은 gif나 ani의 확장자를 사용하지 않는 것 같습니다.
그렇기에 움직이는 마우스 커서여도 가장 앞단에 있는 1frame의 한 장만 마우스커서에 적용이 됩니다.
커스텀 사이드바
커스텀 사이드바는 홈화면에서만 보여줄 거 기 때문에 go_router 설정을
이러한 형태로 HomePage를 자식 트리에 넣어둡니다.
MediaQuery를 통해 화면 크기에 따른 사이드바 너비를 조절하게 두고
최소 조절값도 정해둡니다.
Sidebar에는 굳이 DB를 통해 네트워크 통신을 할 만큼의 정보를 담아 둘 게 없어서
이렇게 Map형식으로 담아두어 정보를 제공하도록 했습니다.
차후에 뭔가 더 담을 정보라던가 여러 가지 콘텐츠가 생각난다면 이 역시 DB를 통해 자료를 가져오는 식으로 구현하도록 하겠습니다.
URL링크 리다이렉트
그냥 단순히 String으로 https:// 처럼 url 주소를 입력해 두어도 그냥 텍스트이기 때문에 조금의 작업이 필요합니다.
이 페이지의 GestureDetetor내부처럼 url의 형식이면 해당 url로 리다이렉트 해주는 로직을 작성하고
그 Text가 url일 경우 색상을 blue로 지정해 url임을 나타내었습니다.
홈페이지 이름(AppBar TextButton)을 눌렀을 때 새로고침
해당 TextButton을 클릭할 경우 riverpod의 ref를 통해 provider에 접근하고, post들의 데이터를 가져오라는 명령을 수행하게 해 놨습니다.
로그인, 로그아웃 (나만 쓸 수 있는)
FireBase Authentication을 통해 계정인증을 구현했으며
validator는 따로 class를 두어 덜 지저분해 보이게 작성했습니다.
이러한 로그인버튼도 따로 구현을 하여 작성하였습니다.
하지만 이렇게 작성하다 보니.. 너무 세세하게 나누어서 오히려 더 불편해진 건 아닌가 싶었습니다..
코드의 내용이 길지 않으면 차라리 같은 페이지에 놔둬서 한눈에 들어오는 게 좀 더 가독성이 좋지 않을까란 생각도 들었습니다.
이렇게 블로그를 한번 만들어 보았는데 기능 구현보다는 처음 해보는 것들 (BGM, 커스텀 마우스 커서)에서 버그가 발생한 것에 대해서 많이 애를 먹었습니다.
심지어 flutter_quill 이란 TextEdit 라이브러리도 생각보다 많이 불편했던 점을 느꼈고 불편한 사항이 많았지만 그래도 생각해 봤던 기능, 디자인들이 작동되는 것들에 참 다행이란 생각이 들었습니다.
나중에 시간이 생긴다면 좀 더 다듬고 더 괜찮은 web으로 발전시킬 수 있었으면 좋겠다는 생각이 들었습니다.
'Flutter > web Making Learn' 카테고리의 다른 글
| [플러터 Flutter] web Blog 만들어보기 1 (0) | 2024.11.21 |
|---|