IDE 메인 화면 UI 의 향상된 기능들

 

최근 출시된 RAD스튜디오는 IDE의 UI 에 많은 변화가 있었습니다. 10.2.2 버전의 경우, 다크 테마 (가장 좋아해주시는 변경 사항 중 하나죠!) 추가와 컴포넌트 아이콘의 업데이트가 있었습니다.

 

10.3 버전에서는 다양한 UI 추가 업그레이드가 기다리고 있습니다. 드디어 선보일 수 있게 되어 정말 기쁩니다! 

바로 아래 이미지를 통해 확인해보세요.

 

 

RAD스튜디오 10.3! (전체 화면 보기)

 

 

향상된 기능

 

아래와 같이 크게 두 가지 목표를 두고 작업했습니다.

  • UI를 산만하게 만드는 어수선하고 일관되지 않은 디자인을 줄이자; 장기적으로 사용성과 가시성이 좋은 깔끔하고 우아한 UI를 제공하는 것을 목표로 한다.
  • 새로운 사용자 그리고 델파이/C++빌더를 다시 사용하게 된 개발자들에게 좋은 첫 인상을 제공하자.

여러 업데이트 항목들이 추가되어 레이아웃이 대폭 개선되었습니다. 분명한 것은 보기에 더 깔끔하고 더 현대적인 화면을 제공한다는 것입니다. 물론 밝은 테마(light theme), 어두운 테마(dark theme) 모두 제공됩니다.

 

 

개선된 레이아웃

 

UX 디자이너와의 작업을 통해 아래와 같은 가이드라인이 정해졌습니다:

  • 일관된 제어 렌더링: 예를 들어, 모든 탭은 동일한 디자인을 갖추고 있고 경우에 따라 다르게 렌더링 될 수 있습니다.
  • 선과 경계가 사라지고 간격이나 색상을 구분되게 표시하여 메뉴를 확실하게 알아볼 수 있습니다.
  • 키보드 포커스를 바로 파악할 수 있습니다: 코드 에디터 탭이나 선택된 화면의 타이틀을 확실하게 구분할 수 있습니다. 다른 색상으로 표시해 시각적으로 확실하게 구분되게 하고, 키 입력이나 타이핑을 위해 클릭 시 어느 위치에 있는지를 바로 파악할 수 있습니다.
  • 간격 및 정렬을 조정할 수 있습니다:
    • IDE의 모든 요소들을 4픽셀 그리드로 조정할 수 있습니다. 그리고 모든 요소들은 서로에 맞추어 정렬됩니다. 이 단 하나의 변화만으로 IDE의 UI가 훨씬 더 깔끔해보입니다.
    • 작지만 중요한 요소는 더 크게 표시하여 클릭하고 작업하기에 더 편하게 만들었습니다. 예를 들어, 코드 에디터 탭이 약간 더 커졌습니다. 선택된 화면의 제목 표시줄도 더 큰 글꼴로 표시됩니다.
    • 리스트와 트리 화면의 아이템들의 높이가 20픽셀로 고정됩니다.
  • 깔끔하고 현대화된 화면:
    • 새로운 밝은 테마(Light Theme)를 소개합니다. 파란색을 사용한 새로운 화면을 만나보세요.
    • 프로젝트 매니저, 스트럭처 화면, 다른 기타 화면들의 항목들의 전체 너비를 선택할 수 있습니다.
    • 전체 IDE를 검색할 수 있는, IDE Insight가 제목 표시줄로 이동했습니다. 대부분 요즘 검색 화면이 그렇듯 화면 우측 상단에서 검색할 수 있습니다.
    • 전체 화면에 영향을 미치는 컨트롤 화면(예를 들어, 다크 테마로 변경하거나 데스크탑 레이아웃으로의 변경 등) 또한 제목 표시줄로 이동되었습니다. 화면 안에 있는 모든 것에 영향을 줄 수 있는 요소이다 보니, 제목 표시줄이 적합하다고 판단했기 때문입니다.

 

 

비교: 이전 버전 vs. 새로운 버전

 

주요 변화

 

선택된 화면 모습의 변화
(아래는 프로젝트 화면입니다. 기존 이름 '프로젝트 매니저' -> '프로젝트'로 이름이 변경되었습니다)

 

 

제목 표시줄이 더 커져 메뉴명을 한 눈에 파악할 수 있고 클릭이나 이동이 더 쉬워집니다: 어두운 배경색과 밝은 텍스트로 표시하여 가시성도 높였습니다.  '프로젝트' 화면의 툴 바도 한 줄로 정리했습니다. 화면에 보이지 않는 메뉴들은 드롭다운형식으로 표시되어 이전과 동일한 기능을 사용할 수 있습니다. 그리고 전체적인 화면 너비와 높이가 넓어져 메뉴 파악이 더욱 쉬워졌습니다.

 

 

데스크탑 레이아웃, 테마, IDE 인사이트 컨트롤:

 

다른 도구들과 마찬가지로 도구 모음에 위치해있던 컨트롤들이 10.3 버전부터는 제목 표시줄로 위치가 이동했습니다. 이 설정들은 전체적인 화면에 영향을 미치기 때문에 제목 표시줄로 이동하게 되었습니다.

 

 

코드 에디터 탭

 

탭 메뉴명을 더 구분하기 쉽도록 바꾸었습니다. 그리고 탭 사이즈를 좀 더 크게 만들어 클릭하기 쉽도록 했습니다. 각 탭은 X 버튼을 클릭해 닫을 수 있습니다.

 

 

정말 멋진 변화들

 

선택된 메뉴를 명확하게 표시해줍니다 - 업데이트된 UX에서는 클릭한 항목이 포함된 메인 메뉴를 진한 파란색으로 나타내 클릭된 영역을 확실하게 알아볼 수 있습니다.

 

 

키보드와 마우스를 혼용해서 사용하는 IDE 내에서는 특히나 키보드 포커스를 놓치기 쉽습니다.

 

위 화면을 통해 각 선택 항목의 메인 메뉴들이 어떻게 표시되는지 한 눈에 보실 수 있을 것입니다. 포커스가 있는 영역의 제목을 확인해보세요. 

 

한 번 선택했던 항목은 포커스가 다른 곳으로 옮겨가더라도 연하게 음영처리되어 있어 어떤 작업을 했었는지도 확인할 수 있습니다.

 

 

VCL 디자이너:

IDE 화면의 또 다른 변화입니다. 10.3 버전부터 사용되지 않는 상단(top), 좌측(left)의 크기 조절을 위한 드래그 화면이 사라졌습니다. 필요한 부분에만 크기 조절 드래그 바가 있어 화면이 더 현대적으로 바뀌었습니다. 이전에는 7x7 px 사이즈의 사각형을 클릭해 크기를 조정해야 했지만, 이 크기도 더 커졌습니다. 드래그 바는 다른 VCL 컨트롤과 마찬가지로 마우스오버에 반응합니다.

 

 

 

기능 향상

 

RAD스튜디오 10.3은 기능 측면에서도 큰 변화가 있습니다.

 

10.2.1에 도입되었던 Documentation 탭이 없어지고, 다시 Welcome 화면에 통합되었습니다.

 

IDE를 처음 실행했을 때 또는 열려있는 프로젝트나 파일이 없을 때 나타나는 시작 화면(Startup Layout)을 자유자재로 변경할 수 있습니다. IDE 옵션 대화 상자에는 IDE에서 사용가능한 레이아웃-시작 화면, 기본 화면(코딩 작업 시), 디버그 화면(디버깅 시)-을 선택할 수 있는 메뉴가 있습니다.

 

 

 

새로운 밝은 테마와 어두운 테마

전체 화면으로 보기

밝은 테마 (Light Theme)

10.3의 밝은 테마가 새롭게 바뀌었습니다. 

 

다양한 파란색 음영을 사용하였으며, 회색을 주로 사용했던 이전 버전들과 달리 쾌적한 시각 효과를 제공합니다.

 

전체 화면으로 보기

어두운 테마 (Dark Theme)

10.2.2 버전에서 처음 선보였던 어두운 테마에도 변화가 있습니다. 10.3 버전에서는 기존과 비슷한 색상을 사용하지만, 새로운 밝은 테마에서 아이디어를 얻어 업그레이드 되었습니다.

 

IDE는 매일같이 작업 공간에서 사용되고 있고, 특히 어두운 테마는 장시간 작업 시, 많은 개발자들(저 포함)이 선호한다는 걸 알고 있습니다. 눈에 피로도를 줄여주고 장기적으로도 사용하기 좋습니다.

 

 

 

전체적인 정리

 

10.3 버전은 IDE의 사용 편의성 향상에 집중했습니다. 

 

UI의 변경으로 IDE 화면이 눈에 띄게 좋아졌습니다. 렌더링과 레이아웃 조정에 심혈을 기울였고 개선된 기능들도 선보일 수 있게 되었습니다. 그리고 새로운 밝은 테마와 어두운 테마까지 말이죠.

 

 

 

 

 

10.3 리오의 업데이트 버전들

 

 

 

 

번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 14387
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 13023
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 15532
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 21064
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 22297
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 17933
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 38228
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 173741
433 이 달의 기술자료 - 2018년 12월 file 험프리 2018.11.30 438
432 [다시보기] 전세계 개발자를 위한 컨퍼런스! CodeRage 2018 file 관리자 2018.11.29 328
431 [커뮤니티 에디션] 사용 자격 기준 정리 관리자 2018.11.29 677
430 [발표자료] 20181121 What's NEW! RAD스튜디오 10.3 Rio file 관리자 2018.11.22 858
429 [10.3 리오] C++17 지원으로 Clang 컴파일러가 더욱 강화되었습니다. file 관리자 2018.11.16 1005
428 [10.3 리오] 안드로이드 Z-Order, 네이티브 컨트롤 관리자 2018.11.15 1037
427 [엠바카데로 온라인 세미나] 10.3 RIO를 확인하세요! 관리자 2018.11.14 311
» [10.3 리오] IDE가 현대적이고 깔끔하게 업데이트 되었습니다. 관리자 2018.11.14 1879
425 이 달의 기술자료 - 2018년 11월 file 험프리 2018.10.26 496
424 엠바카데로 제품의 중요 업데이트 소식 - from 아타나스 포포브(엠바카데로 GM) 관리자 2018.10.24 856
423 올 해의 기술자료 TOP 10 - 개발자들이 가장 많이 클릭한 기술자료는? 관리자 2018.10.24 589
422 새롭게 출시될 RAD스튜디오 'NEW' 베타 버전, 지금 신청하세요! (유지보수계약 고객 한정) 관리자 2018.10.05 630
421 이 달의 기술자료 - 2018년 10월 file 험프리 2018.10.01 597
420 RAD 스튜디오에서 iOS 12에 대응 험프리 2018.09.27 553
419 [엠바카데로 Feature Friday] RAD스튜디오와 함께사용하면 더욱 강력하게 활용할 수 있는 컴포넌트들 관리자 2018.09.14 666
418 [개발환경 설정] 안드로이드 기기 연결 시 'USB 디버깅 허용' 창이 표시되지 않는 경우 조치 방법 file 험프리 2018.08.21 1849
417 RAD스튜디오 로드맵 - 2018년 8월 file 관리자 2018.08.09 1056
416 이 달의 기술자료 - 2018년 08월 file 험프리 2018.07.31 523
415 [마감임박] Google의 새로운 Android API Level 26 요구사항 해결방법 2가지 [2] 험프리 2018.07.31 1231