2024. 8. 29. 13:51ㆍArtificial Intelligence
AI 커리어업 프로그램 참여
시에서 기획한 AI 특강 프로그램에 참여하기로 했다. 3일 동안 표에 있는 주제로 온라인, 오프라인 교육을 병행한다. 세 번째 교육 '노코드 웹 개발'에 대해 THE100 대표 김태호 강사님의 자료와 내가 만든 반응형 웹 UI를 바탕으로 리뷰하려고 한다.
THE100 유튜브 링크: https://www.youtube.com/@THE100_
*이 글은 저작권자의 허락을 받은 후 작성되었습니다.
노코드 플랫폼
노코드 플랫폼은 보통 AI 기반으로 만들어진다. 노코드 플랫폼 중 하나인 FlutterFlow는 Web과 App 서비스를 동시에 구축할 수 있다는 장점이 있다.
FlutterFlow 기본 사용법
Developer menu의 View code를 클릭하면, 코드를 볼 수 있다. 코드를 수정할 수 있는 개발자라면 코드 창에서 조금 더 커스터마이징할 수 있다. 위젯 팔레트에서 버튼, 이미지, 텍스트와 같은 위젯들을 추가할 수 있고, 위젯 트리에서 위젯들이 배치된 구조를 볼 수 있다. Layout은 부모 위젯이고, Page, Base, Form, 또 다른 Layout은 자식 위젯이 될 수 있다.
FlutterFlow 레이아웃 및 위젯 배치 실습
이전에 안드로이드 스튜디오, 코틀린으로 구현할 수 있었던 기능과 대부분 비슷하다고 느꼈다. 레이아웃과 각종 위젯 삽입, 패딩 조절 등 거의 비슷했다. 드래그앤 드롭으로 쉽게 만들 수 있다니, 편리하면서도 코드를 한 줄씩 쓰는 행위에 대해 다시 생각해 보게 되었다.
- 이미지의 Width에서 무한대 버튼을 누르면 모든 디바이스에서 가득 차게 나온다.
- Canvas setting의 Safe area를 제거하면 기본 공백이 사라진다.
- 인터넷에서 이미지 주소 복사를 하고 Path에 붙여 넣으면, Unplash 제공 이미지 외의 인터넷 이미지도 넣을 수 있다.
- 이미지 타입을 Network에서 Asset으로 바꾸면, 파일 시스템 내 이미지도 업로드 할 수 있다.
FlutterFlow 반응형 웹 디자인 실습
- 아이콘 버튼의 패딩만 변경하는 것이 아니라, 버튼의 크기를 늘려 클릭 영역을 늘린다.
- 햄버거 박스와 Drawer를 만든다. Drawer에도 동일하게 Column 레이아웃을 넣도록 한다.
- Language selector의 Hide flag 체크를 해제하여 국기가 보이게 할 수 있다.
- Setting의 Languages에서 언어를 추가해야 한다.
- Spacer를 사용해서 위젯 간의 간격을 만든다.
- 카테고리 버튼에 'Open drawer'라는 action을 추가한다.
- 반응형 웹의 Breakpoints 기준이 설정되어 있다. 카테고리 버튼은 모바일일 때만 보이도록 설정한다.
- Handle Bar로 반응형 웹을 테스트할 수 있다.
- PageView에 있는 Indicator의 디자인과 정렬을 바꿀 수 있다.
- Column을 우클릭한 후, ListView 위젯으로 Replace 할 수 있다.
- Carousel의 Shrink factor로 선택된 이미지의 크기 비율을 조정한다. Auto play의 Delay 시간도 조정할 수 있다.
- Container의 자식 위젯으로 Youtube player를 넣고, 원하는 URL을 설정한다.
- '구독하러 가기 버튼'을 만들고, URL을 설정한다.
- 테스트 모드에서 웹 뷰로 테스트해 본다.
- 이동할 페이지들을 생성하고, 'Navigate to'라는 Action을 추가한다.
App state 추가
Light 모드와 Dark 모드를 사용자가 선택할 수 있도록 App Values 탭의 App State에 다크 모드를 불린 타입으로 추가했다. 토글의 Switch initial value를 'Dark mode' App state와 연결한다. 그리고 Action 탭의 에디터에서 액션을 추가한다. 토글 On/Off에 대한 Action을 각각 2개씩 설정하며, Toggle Off의 Action 설정은 Toggle On의 설정과 반대로 하면 된다.
Floating 버튼과 모달 추가
최상위 Home에 Floating Button을, 새로운 페이지 생성에서는 Component인 Modal 5를 추가한다. Floating Button에 대한 Action으로 'Alert Dialog'를 추가한다. Image Type은 Uploaded file로 변경하고, 상세 설정도 Local file로 변경해야 한다.
웹 사이트 배포
Setting의 Platform에서 Advanced Web Setting의 Original Engine Initialization을 활성화해야 한다. Setting의 Web Deployment에서 Publish를 누르면 웹을 배포할 수 있다.
느낀 점
위젯을 드래그앤 드롭하고, 필요한 설정들만 조금씩 조정해 주었을 뿐인데, UI가 그럴싸하게 만들어져서 놀랐다. 배포까지 끝내고 자동 생성된 코드를 열어보니, 깔끔하게 페이지별로 작성되어 있었다. 불필요하다고 느껴지는 주석이 조금 있기는 했지만, 코드 한 줄 적지 않고 만들었다니 신기했다.
각종 UI 컴포넌트와 상태, 네비게이션과 같은 주요 개념, 이미지 경로, 플로팅 버튼 등을 구현할 수 있었다. 이 내용들은 대학교의 모바일 프로그래밍 과목에서 코틀린 언어로 배웠던 것들인데, 다시 봐서 반갑기도 하고 노코드 방식으로 구현해 보는 것이 재밌었다.