이번 글은 플러터로 개인 포트폴리오 사이트를 만들어본후 회고해보는 글입니다
취업을 위해 리액트로 포트폴리오 사이트를 만들어보다가 프로젝트 이미지만 넣으니까 너무 밋밋해보여서
간단한 프로토타입을 지원해주고 싶었습니다
하지만 리액트로 이것을 해결해보려고 하니 그냥 앱 프로토타입을 만드는게 아니라 리액트 프로젝트를 하나 새로 만드는 느낌이라서
좋은 방법이 없을까? 생각해보다가 최근에 google IO에서 플러터 웹 소개하는것을 보았던거같아 그냥 플러터 웹으로 만들어보는건 어떨까싶어 만들어보게 되었습니다
웹 배포 & 사용한 라이브러리
상태관리는 getx로 진행하였습니다 웹 경로는 getPage를 이용하여 만들어주었고
배포는 netlify를 통해 개인 도메인을 연결한후 지원해주었습니다
그리고 앱이니까 아이폰 프레임 안에 넣어보고 싶어서 device_frame이라는 라이브러리를 사용하였습니다
그 외에는 큰 기능을 따로 주진 않아서 플러터로 앱 만드는것과 같이 진행하면 됩니다
어떻게 짰을까?
먼저 main.dart에서 보여주고 싶은 페이지의 경로를 getPage를 통해 전부 적어주었습니다
그 다음 메인화면은 플러터 앱 만들던것처럼 만들어주었습니다
저는 모바일 뷰를 추후에 지원하고 싶어서 이런식으로 분리해주었습니다
데스크톱 뷰는 이런식으로 구성하였습니다
그다음은 프로젝트를 눌렀을때 보여줄 소개와 앱 프로토타입을 각각 Expanded로 분할하여 만들었습니다
페이지 안에서 디바이스 프레임만 리빌드하려니까 생각해야될게 너무 많더라고요
앱의 레이아웃이지만 몇몇 부분이 뭔가 안맞은거같아서
물론 익숙한 분이 만드시면 잘 만드겠지만 전 초보라서 그냥 페이지를 이동시키기로 하였습니다
물론 프로토타입을 실제로 보여줘야하기 때문에 앱을 제외한 나머지 부분을 고정시키고 애니메이션을 없앤 화면 전환으로
마치 앱이 움직이는거처럼 해주었습니다
어떤가요? 나름 앱 같아보이지 않나요?
물론 이런 포트폴리오 사이트를 좋아해주시는 분들도 많이 계셨지만 그렇지 않은 분들도 꽤나 있으시더라고요
(사실 저도 아직까지는 어디 내보이기 부끄러운거 같아서 자기소개서에는 노션 링크 걸때가 많답니다)
아무튼 이 프로젝트를 만들어보면서 느낀점은
생각보다 값진 경험이였다고 생각되었습니다
이렇게 좀 큰 화면도 짜보면서 레이아웃 구성을 어떻게 해야 보기 좋을까를 생각하게 되면서
나중에 앱을 만들때에도 이 경험으로 태블릿 지원을 좀 더 잘할수있을거같다?라는 느낌을 받았습니다
아직까진 조금 잔버그도 좀 있고 삐걱거리는거 같지만 추후에 플러터 버전 업데이트가 되면 진짜 괜찮을꺼같습니다
사실 이전에 스위프트 라이브러리 중 하나인 publish를 사용하여 개인 포트폴리오를 만든적이 있었는데
그땐 마음대로 커스텀 하기도 힘들어서 최근에 내렸는데 이렇게 처음부터 하나하나 구현해보니까
마음가는대로 만들수있어서 좋았던거같습니다
아쉬운점은 추후에 좀 더 실력있는 개발자가 된다면 화면 이동 말고 프레임만 바뀌도록 리빌드해보는것?
또는 다른 분들도 사용할수있게 템플릿으로 만들어보는것?등등이 생각나네요
아무튼 혹시라도 제 개인 사이트가 궁금하신 분들은 하단에 링크 달아놓을테니 한번 보고 가셔도 좋을거같아요
혹시라도 궁금한점 있으시다면 언제든지 댓글 달아주세요
감사합니다
'Flutter' 카테고리의 다른 글
| [Flutter][Package] 초보를 위한 간단하게 기기 해상도를 지원해보자 (1) | 2024.06.10 |
|---|
