한국의 개발자들을 위한 Google Developers 국문 블로그입니다.
Flutter CodePen 챌린지
Thursday, July 9, 2020
CodePen에서 멋진 UI를 만들어 Flutter 실력을 뽐내세요
작성자:
Anjan Narain (Google Flutter)
원문은
여기서
확인 가능하며 블로그 리뷰에는 번역 리뷰는 조은(Web GDE) 님이 참여해 주셨습니다.
Flutter를 만들 때, 개발자가 멋진 사용자 경험을 만들 수 있게 하는 걸 목표로 했습니다. 전세계의 Flutter 커뮤니티는 Flutter의 창의적 잠재력을 잘 보여주는
무수한 앱과 실험적 작품
으로 우리를 놀라게 하고 있습니다. 오늘 우리는 CodePen과의 제휴를 통해 개발자 여러분들의 Flutter 실력을 뽐낼 새로운 챌린지를 시작하여 기쁩니다.
CodePen은 프런트엔드 개발자가 실험, 공유, 반복 작업을 위해 찾아가는 상위 사이트 중 하나입니다. 4월에
CodePen과의 파트너십 체결
을 발표한 이후로, 개발자들이 만든 다양한 Flutter Pen에 경탄을 금치 못했습니다. 수백만 이상의 디자이너와 개발자로 이루어진 CodePen 커뮤니티에 당신만의 놀라운 Flutter 디자인을 보여줄 기회를 주고 싶었습니다.
챌린지 세부 사항
무엇인가요?
CodePen Challenges는 무언가를 완성하는 과정에서 스킬을 올릴 수 있는 기회입니다. 이전 챌린지에서는
JavaScript
,
이미지
,
색상 팔레트
와 같은 웹 개발 테마를 다루었습니다. Flutter CodePen 챌린지는
CodePen의 새로운 Flutter 에디터
로 사용자 경험을 만드는, 7월 한 달간 진행되는 챌린지입니다.
진행 방식:
Flutter CodePen 챌린지는 매 주 주어지는 4가지 도전 과제로 구성되며, 서로 다른 Flutter 주제가 제시됩니다. 각 도전 과제는 매 주 초반에 공개되며, 도전 과제는 초급부터 고급 단계로 순차적으로 난이도가 올라가고, 서로 다른 결과물을 만듭니다
어떤 걸 제작할 지에 대한 아이디어, 추천 리소스, 예시로 제작한 Pen을 공유할 예정입니다
Pen 제작이 끝나면
FlutterPen
태그를 이용해 CodePen 커뮤니티와 공유하는 걸 권장하고, Twitter와 LinkedIn에서
#FlutterPen
해시태그로 더 넓은 개발자 커뮤니티와 공유하시기 바랍니다. CodePen 커뮤니티에서 우수한 Pen을 선정하여 CodePen 홈페이지에 공개할 예정입니다.
날짜:
첫 번째 주간 도전 과제는 2020년 7월 6일 월요일에 발표됩니다.
살짝 엿보기:
첫 번째 주에는 Flutter를 이루는 기본 요소인
stack widget
으로 시작할 예정입니다. 스택을 이용해 페인트 순서에 따라 레이어 위젯을 서로 쌓을 수 있습니다.
그라데이션 상의 텍스트 오버레이
나 정말 멋진 커스텀 디자인을 구현하는 데에도 stack widget을 사용할 수 있습니다.
다음은 Stack widget을 사용해 3단 패널 뷰를 만드는 CodePen입니다. 동작하는 앱을 보려면
Run Pen
을 클릭하세요. 그 다음,
Flutter
를 클릭해 앱을 구현하는 코드를 확인해 보세요.
도전해보세요!
창의성을 발휘하여 7월 6일부터 시작하는
챌린지
를 살펴보세요! 이미 만들어둔 Flutter Pen이 있다면
#FlutterPen
해시태그를 이용해 마음껏 자랑해보세요. 여러분들이 만든 작품을 꼭 보고싶습니다!
Contents
Android
Community
Web/Chrome
Cloud
ML/Tensorflow
Google Play
검색
Tag
AdMob
Android
App Bundle
Community
Flutter
gdg
Google Play
ML/Tensorflow
Web
Archive
2021
Jan
2020
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2019
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2018
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2017
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2016
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2015
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2014
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2013
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2012
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Mar
Feb
Jan
2011
Dec
Nov
Feed