Dart 2.3 발표: 사용자 인터페이스 개발에 최적화

오늘 Dart 2.3 SDK의 안정 버전을 발표해요. 이번 버전에는 사용자 인터페이스를 개발할 때 코딩 경험을 크게 개선해 주는 새로운 언어 기능과, Flutter UI를 개발하기 위한 새로운 툴링 지원, 그리고 dart.dev와 pub.dev라는 두 개의 새 웹사이트가 들어 있어요.

출처: Announcing Dart 2.3 – optimized for building user interfaces

본문

Dart의 상승세

매년 손꼽아 기다리는 개발자 조사 보고서 중 하나가 StackOverflow Developer Survey예요. 각종 기술에 대한 개발자들의 트렌드와 감정을 다루는 종합적인 데이터셋을 제공하거든요. 올해 판은 Dart의 인기와 인지도 성장을 잘 보여줬어요. Dart는 가장 사랑받는 언어(Most Loved Languages) 목록에 처음으로 진입했고, JavaScript, C#, Go 같은 인기 언어 옆에 나란히 올랐으며 C++, F#, R 같은 언어를 앞섰죠. 동시에 Flutter 커뮤니티는 가장 사랑받는 프레임워크 목록에서 3위를 차지했어요. 지난달 Codementor가 실시한 "배워야 할 언어와 배우지 말아야 할 언어" 설문조사에서도 비슷한 긍정적인 소식이 있었어요.

"가장 많이 개선된(Most Improved) 언어라는 타이틀에 정말 걸맞았던 두 가지 예는 Dart와 Ruby입니다."

— Codementor, April 2019 [source]

Dart 커뮤니티의 모든 개발자분들께 큰 감사를 전하고 싶어요. 여러분이 Dart를 채택하고 피드백을 주고, 어떤 플랫폼에서든 빠르게 실행되는 최고의 클라이언트 최적화 언어를 만들기 위한 우리의 여정에 함께해 주시는 것 자체가 정말 큰 의미가 있어요.

사용자 인터페이스 개발을 위한 새로운 언어 기능

클라이언트 개발에 대해 말하자면, Dart와 Flutter 팀 사이의 오랜 공동 프로젝트 중 하나가 마크업 언어 없이 Dart만으로 UI 코드를 훌륭하게 작성할 수 있게 만드는 거예요. 동작과 레이아웃 양쪽에 단일 언어 하나를 쓰는 건 큰 이점이 있다고 생각해요. 컨텍스트 전환을 줄이고, 두 언어를 배울 필요가 없으며, UI를 만들 때 범용 프로그래밍 언어의 추상화 기능을 모두 활용할 수 있죠.

지난 몇 번의 릴리스에 걸쳐 몇 가지 개선을 해왔어요. 위젯을 구성하는 코드를 단순화하고, 자동 int-to-double 변환을 추가하고, Set 리터럴도 추가했죠. Dart 2.3에서는 또 한 걸음 크게 나아가, 목록 기반·조건부·반복적인 UI를 표현하기 위한 세 가지 새 기능을 선보여요.

UI는 위젯 노드의 트리라고 생각할 수 있어요. 일부 노드는 위젯의 목록을 담아요 — 예를 들어 스크롤 가능한 요소들의 목록 같은 거죠. 이런 목록은 흔히 다른 목록으로부터 만들어져요. 그래서 우리는 한 목록의 요소를 다른 목록으로 풀어 넣는 스프레드 연산자(spread operator) 기능을 새로 추가했어요. 아래 예시에서 buildMainElements()가 위젯 목록을 반환하는데, 이 목록이 스프레드 연산자 …를 사용해 주변 목록으로 풀려 들어가요.

Widget build(BuildContext context) {
  return Column(children: [
    Header(),
    ...buildMainElements(),
    Footer(),
  ]);
}

또 하나 흔한 UI 작업은 특정 조건에 따라 어떤 요소를 넣고 빼는 거예요. 예를 들어 마지막 페이지를 제외한 모든 페이지에 Next 버튼을 넣고 싶을 수 있죠. Dart 2.3에서는 collection if를 사용해 이렇게 할 수 있어요.

Widget build(BuildContext context) {
  return Column(children: [
    Text(mainText),
    if (page != pages.last)
      FlatButton(child: Text('Next')),
  ]);
}

마지막으로, UI는 흔히 다른 반복 요소들로부터 반복 요소를 만들어내요. 이런 건 새 collection for 기능으로 표현할 수 있어요.

Widget build(BuildContext context) {
  return Column(children: [
    Text(mainText),
    for (var section in sections)
      HeadingAction(section.heading),
  ]);
}

세 가지 새 기능은 마크업 명령이 아니라 언어 기능이기 때문에 완전히 조합 가능하고, 컬렉션을 다루는 어떤 맥락에서든 사용할 수 있어요. 이 기능들은 Flutter 1.5 릴리스에 포함되어 있고, 오늘 내려받을 수 있는 Dart 2.3 릴리스에서도 사용 가능해요. 또 이 새 spread, collection if, collection for 기능을 쓰도록 강제하는 새 린트도 추가해서, 정적 분석에서 설정할 수 있어요.

이 기능들을 추가하기 위해 진행된 모든 작업에 대한 자세한 내용은 Dart 언어 팀 엔지니어인 Bob Nystrom(일명 munificentbob)의 최근 글에서 확인할 수 있어요.

또한 이 새로운 언어 기능을 만드는 데 결정적인 역할을 한 UX 연구에 참여해 주신 개발자분들께도 감사를 전하고 싶어요.

IDE & 에디터 기능

Dart 2.3의 UI 테마에 걸맞게 IDE 지원에도 새로운 UI Guides 기능을 추가했어요. UI Guides는 UI 코드 안에 그려지는 가로/세로 선으로, Flutter UI의 build() 메서드 트리 구조를 훨씬 쉽게 볼 수 있게 해줘요. 아래 예시(계산기 앱)에서는 UI Guides가 UI가 여러 개의 KeyRow를 담은 Expanded Column으로 구성되어 있고, 각 KeyRow가 다시 NumberKey를 담고 있다는 걸 또렷이 보여줘요.

UI Guides는 IntelliJ IDEA와 Android Studio 플러그인 버전 35.2에서 사용할 수 있어요. 이 기능을 켜려면 Preferences > Languages & Frameworks > Flutter > UI Guides 설정을 선택하면 돼요. 이후 릴리스에서는 VS Code에서도 비슷한 지원을 제공할 예정이에요.

마지막으로, 개발자들이 API를 탐색하는 수단으로 IDE의 코드 완성(code completion)을 자주 쓴다는 걸 관찰했어요. 코드 완성은 이미 import한 라이브러리의 API를 탐색하는 데는 잘 동작했지만, 아직 import하지 않은 라이브러리의 API에는 사용할 수 없었죠. 이제 우리 도구는 후자의 경우를 지원해요. 아무 접두어에나 코드 완성을 호출하면, 현재 패키지와 그 패키지가 직접 의존하는 패키지, 그리고 SDK에 있는 모든 API에 대한 완성이 표시돼요. 아직 import하지 않은 라이브러리의 완성 항목을 선택하면(아래 애니메이션에서처럼 Auto import라고 표시돼요), 도구가 import 문을 대신 추가해 줘요.

이 새로운 자동 import 기능은 VS Code v2.26 플러그인, IntelliJ 2019.1, 그리고 곧 출시될 Android Studio 3.5에서 사용할 수 있어요.

새 Dart 및 Pub 웹사이트

마지막으로, 지난 몇 달 동안 Dart 플랫폼을 위한 새 웹사이트를 만드는 데 정말 열심히 작업했어요: 바로 dart.dev예요.

이 새 사이트는 완전히 새로운 랜딩 페이지를 갖추고 있고, Dart 플랫폼의 핵심 이점을 설명하는 데 초점을 맞췄어요. 문서 페이지도 내비게이션이 더 좋아지고 시각적으로 더 매력적으로 업데이트했어요. 마지막으로 모든 콘텐츠를 대대적으로 재구성해 발견하기 쉽게 했고, 이전에 빠져 있던 핵심 콘텐츠를 위한 새 페이지도 추가했어요.

비슷한 맥락으로 Pub 패키지 사이트도 시각적으로 업데이트했고, 편리한 새 URL인 pub.dev로 옮겼어요.

두 사이트에 대한 피드백을 꼭 듣고 싶어요. 문제를 발견하거나 제안이 있다면 dart.dev 이슈 트래커 또는 pub.dev 이슈 트래커에 이슈를 만들어 주세요. 지원에 감사드려요!

Dart 2.3 발표: 사용자 인터페이스 개발에 최적화