How-To's Tips & Tricks

새로운 UI가 좋은 다섯 가지 이유

Read this post in other languages:

이미 새 UI를 사용 중이신가요? 아니면 아직 사용을 해보지 않으셨나요? 새 UI가 슬라이스 식빵 이래 최고의 발명품인 이유에 대해 알려 드리겠습니다!

이 UI를 활성화하고 둘러보겠습니다. 가장 쉬운 방법은 UI 오른쪽 상단의 Settings(설정) 톱니바퀴를 사용하는 것입니다.

새 UI를 사용하기 위한 오른쪽 상단의 메뉴 바

PyCharm을 다시 시작해야 하지만 그게 전부입니다!

이번 인터페이스 업데이트에서는 다양한 요소 주위에 더 많은 빈 공간을 도입했습니다. 화면에 구분선 등의 요소를 추가하지 않고 콘텐츠를 쉽게 구분할 수 있게 하기 위해서입니다. UI 요소를 조금 더 작게 만들고 싶다면 Meet the New UI(새 UI 만나보기) 도구 창에서 Compact(작게)를 선택하거나 나중에 설정에서 ‘new ui’를 검색하면 됩니다. 이 설정은 인터페이스 요소 주변의 일부 공백과 여백을 제거합니다.

정보의 계층 구조를 나타내는 색상 및 요소 크기의 사용을 포함하여 직관적으로 확인되는 몇 가지 테마가 있습니다. 

예를 들어, Dark(어두운) 테마에는 상단에 VCS 액션 및 Run(실행) 액션 같은 기능에 대한 공통 진입점을 역할을 하는 짙은 회색 막대와 에디터용 검정색 배경이 있습니다. 

전체 화면 및 다크 모드의 새로운 UI

이 UI에서 마음에 들 만한 세부 요소를 둘러보겠습니다. 

#1 – 메인 툴바

메인 툴바가 더 깔끔해지고 레이아웃이 간결해졌습니다. 여러분이 알고 있고 좋아하는 모든 기능이 여기에 들어 있습니다. 여기에서 프로젝트와 관련된 모든 정보를 확인할 수 있습니다.

메인 툴바

왼쪽에서 오른쪽으로 가면서 살펴보겠습니다. 가장 먼저 언급하고 싶은 부분은 Project(프로젝트) 위젯입니다. 여기에서 현재 프로젝트의 이름을 보고, 최근 프로젝트 사이를 전환하고, 새 프로젝트를 만들고, 기존 프로젝트를 열 수 있습니다.

Project 위젯 오른쪽에는 VCS 위젯이 있습니다. 이 위젯을 통해서는 버전 관리에서 프로젝트의 상태를 신속하게 확인할 수 있습니다. 여기에는 브랜치와 송신된(녹색으로 표시) 또는 수신된(파란색으로 표시) 변경 사항이 있는지 여부가 포함됩니다.

VCS 위젯은 프로젝트 이름 바로 옆에 있으며 드롭다운 화살표를 클릭하여 프로젝트 및 버전 관리와 관련된 기능으로 쉽게 이동할 수 있습니다. 계속 둘러보면서 이와 같은 기능 그룹의 ‘진입점’을 많이 볼 수 있을 겁니다.

오른쪽에는 새롭게 디자인된 Run(실행) 위젯이 있으며 이는 다음 섹션에서 자세히 설명하겠습니다.

마지막으로, 메인 툴바의 맨 오른쪽에는 Code With Me, Search Everywhere(전체 검색), Settings(설정) 등의 더 일반적인 아이콘이 있습니다. 마우스를 즐겨 사용하신다면, Settings 톱니바퀴 아이콘을 이용해 플러그인, 테마, 키맵 및 뷰 모드를 포함하여 가장 자주 사용하게 될 최상위 옵션으로 이동할 수 있다는 사실을 기억해 두면 좋습니다. 그러고 싶지 않기를 바라지만 여기에서 클래식 UI로 다시 돌아갈 수도 있습니다!

#2 – Run(실행) 위젯

Run(실행) 툴바 위젯을 자세히 살펴보겠습니다. 가장 먼저 눈에 띄는 것은 더 크고 대담해진 아이콘입니다. 이러한 아이콘은 애플리케이션 상태에 대한 즉각적인 시각적 피드백을 제공하므로 유용합니다. 예를 들어, 애플리케이션을 실행하거나 디버그하기 전의 Run 위젯은 다음과 같습니다.

Run 아이콘을 클릭하면 다음과 같이 바뀝니다.

이제 애플리케이션이 실행 중임을 확인할 수 있으며, 애플리케이션을 중지했다가 다시 실행하거나 완전히 중지할 수 있습니다. 디버그 아이콘을 클릭하면 현재 실행 중인 애플리케이션을 중지하라는 메시지가 표시되므로 PyCharm의 디버거로 대신 실행할 수 있습니다. 

PyCharm의 디버거로 애플리케이션을 실행하면 위젯이 다음과 같이 바뀝니다.

드롭다운 메뉴에서 모든 실행 구성에 계속 액세스할 수 있으며 각각에 대해 실행 방법도 선택할 수 있습니다.

드롭다운 메뉴에서 실행 구성에 액세스

현재 선택된 실행 구성의 기능은 세 개의 세로 점 버튼에서도 사용할 수 있습니다. 

#3 – 도구 창

새로운 UI에는 새로운 아이콘, 개선된 레이아웃 및 언제든지 더 많은 도구 창을 볼 수 있는 옵션이 있습니다. 더 커진 새 아이콘은 화면에 더 적은 개수만 표시되므로 원하는 아이콘을 찾을 때 인지하기 더 쉽습니다. 

필요할 때 빠르게 찾을 수 있도록 UI에 이러한 아이콘이 놓여지는 위치를 사용자 지정하는 방법을 보여 드리겠습니다.

인터페이스의 왼쪽과 오른쪽에 강조 표시되는 도구 창

도구 창을 세로로 분할하는 옵션이 있습니다. 예를 들어, 아래 스크린샷에서 Commit(커밋) 도구 창은 가로 구분선 아래에 위치해 있습니다. 도구 창을 구분선 아래로 드래그하여 위아래로 분할된 창으로 열 수 있습니다.

인터페이스 왼쪽에서 도구 창을 세로로 분할

다음과 같은 방법으로 오른쪽에 있는 도구 창을 분할할 수도 있습니다.

인터페이스 오른쪽에서 도구 창을 세로로 분할

마지막으로, 하단의 도구 창을 분할하여 하나는 왼쪽에, 다른 하나는 오른쪽에 두려면 오른쪽에 표시할 도구 창을 오른쪽 막대로 드래그하면 됩니다. 아래 스크린샷은 제가 Problem(문제) 도구 창 아이콘을 오른쪽으로 드래그한 다음 Terminal(터미널) 도구 창과 함께 열은 화면입니다.

인터페이스 하단에서 도구 창을 가로로 분할

모든 도구 창에는 이제 더 현대적이고 불필요한 추가 정보로 인터페이스를 어지럽히지 않는 단색의 윤곽선 아이콘이 사용됩니다. 도구 창의 이름과 키보드 단축키를 보려면 아이콘 위로 마우스를 가져갑니다. 모든 툴바를 숨기는 편리한 단축키는 ⌘⇧F12(macOS) 또는 Ctrl+Shift+F12(Windows/Linux)입니다.

#4 – 실행 및 디버그 도구 창

Run(실행)Debug(디버그) 도구 창을 이제 왼쪽의 창 탭에서 사용할 수 있습니다. 이를 통해 두 도구 창 모두에 빠르게 액세스하여 애플리케이션의 상태를 관리할 수 있으므로 표준화 면에서 보탬이 됩니다.

또한, Debug 도구 창이 업데이트되어 사용 통계를 기반으로 가장 일반적인 작업이 들어 있는 하나의 툴바가 제공됩니다. 이로 인해 익숙하게 클릭하여 사용했던 일부 액션이 예상하는 위치에 없을 수 있습니다! 어떠한 기능도 제거되지 않았으므로 모든 기능 항목에 여전히 액세스할 수 있지만, 예를 들어 Evaluate Expression(표현식 평가) 아이콘이 사라진 것을 알 수 있습니다. 

표현식을 평가하는 방법은 다양하며, 사용자는 다음 중에서 선택할 수 있습니다.

  • ⌥F8(macOS) 또는 Ctrl+F8(Windows/Linux) 사용
  • Shift Shift(macOS/Windows/Linux)로 전체 검색을 실행하고 ‘evaluate expression’ 입력
  • Debug 도구 창의 오른쪽 클릭 컨텍스트 메뉴에서 Evaluate Expression 선택

Debug 도구 창에 평가를 위한 전용 필드도 있습니다.

디버그할 때 표현식 평가 옵션

이러한 변경 사항 외에도 하나의 구성이 실행 중인 경우 Threads & Variables(스레드 및 변수) 뷰와 Console(콘솔) 뷰 사이를 전환하기 위한 새로운 탭이 있습니다.

디버그 도구 창의 스레드 및 변수 탭

#5 – 에디터

마지막으로, 새로운 설계 방향에 맞추어 에디터의 많은 부분이 업데이트되었습니다. 새 UI의 이점을 생각할 때 이러한 변경 사항을 간과하기 쉽지만 전체적으로 적용된 이러한 테마는 코드 베이스를 검토하는 과정에서 전체 인터페이스에 새롭고 깔끔하며 전문적인 느낌을 부여합니다.

Light(밝은) 테마와 Dark(어두운) 테마는 향상된 대비와 일관된 색상 팔레트를 제공하여 작업 분위기를 밝게(또는 어둡게) 만들어줍니다.

중단점이 설정된 에디터의 밝은 테마

또한, 모양과 색상을 더 구분하기 쉽게 만드는 데 중점을 두고 에디터의 아이콘을 재정비했습니다. 이러한 변경 사항은 에디터에서, 더 넓게는 IDE에서 확인됩니다. 개인적으로, PyCharm의 디자인이 멋지게 변신한 데에는 이 영향이 컸다고 생각합니다.

프로젝트 도구 창 및 에디터의 아이콘

이제 중단점이 줄 번호 위에 배치되어 가로 공간이 절약됩니다.

여백의 줄 번호에 중단점 설정

이와 달리, 줄 번호 옆에 중단점을 놓고 싶은 경우 여백을 마우스 오른쪽 버튼으로 클릭한 다음 Appearance(모양) > Breakpoints Over Line Numbers(줄 번호 위의 중단점)를 선택하여 그렇게 설정할 수 있습니다.

Git Blame 어노테이션의 색상 팔레트가 업데이트되었습니다. 음영이 밝을수록 변경이 오래된 것입니다. 반대로, 음영이 어두울수록 최근에 변경된 사항입니다.

음영이 다른 Git Blame 어노테이션 - 가장 밝은 것이 가장 오래되었고 가장 어두운 것이 최근임

요약

마지막으로, JetBrains IDE의 인터페이스를 업데이트한 이유를 언급하지 않을 수 없습니다. 지난 수년 동안 사용자로부터 많은 피드백을 수집했으며 현재(클래식) UI가 복잡함, 구식, 시각적으로 세련되지 않음 등의 단어로 표현되고 있음을 알게 되었습니다. 

이러한 이유로 사용자 인터페이스를 업데이트해야 한다는 것을 알았지만 새로운 모양을 어떻게 결정해야 할지가 문제였습니다. 우선 기본 바탕으로서, 이 블로그 게시물에서 언급한 사용자 경험 패턴을 구현하는 것으로 시작했습니다. 이후 몇 차례의 엄격한 내부 및 외부 검토를 거친 다음, 여러분의 피드백을 바탕으로 새 UI를 업데이트했습니다. 

여러분이 새로운 UI를 사용해 보아야 하는 이유가 충분히 설명되었기를 바라며, 저만큼 여러분에게도 많이 사랑 받기를 기대합니다. IDE 창 왼쪽 상단에 있는 Settings(설정) 톱니바퀴에서 새 UI를 활성화할 수 있다는 사실을 잊지 마세요. Settings에 피드백을 공유할 수 있는 링크도 있습니다!

게시물 원문 작성자

Jessie Cho

Helen Scott

image description