Google Developers Korea Blog: Flutter CodePen 챌린지

한국의 개발자들을 위한 Google Developers 국문 블로그입니다.

Flutter CodePen 챌린지

Thursday, July 9, 2020

.post-body span { white-space: normal !important; } 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 해시태그를 이용해 마음껏 자랑해보세요. 여러분들이 만든 작품을 꼭 보고싶습니다!

Labels: Flutter

Contents

Android
Community
Web/Chrome
Cloud
ML/Tensorflow
Google Play

검색

Tag

AdMob
Android
App Bundle
Community
Flutter
gdg
Google Play
ML/Tensorflow

Archive

2020
- 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

Google
Privacy
Terms