디자이너는 어떻게 코딩을 배워야 할까요? 터미널 및 텍스트 편집기(1부)

다년간의 경험을 가진 디자이너로서 나는 종종 동료와 보고서에게 코딩 기술을 익히도록 권장합니다. 많은 사람들이 아이디어에 개방적이지만 다른 사람들은 그 개념에 대해 주저합니다. 나는 보통 “나는 개발자가 되기 위해 디자인을 공부한 것이 아니다”라는 변형된 말을 듣습니다. 이것이 타당한 우려이긴 하지만 두 가지 점을 강조하고 싶습니다. 재료에 대한 더 나은 이해는 일반적으로 더 나은 결과로 이어지며 "코딩"과 "소프트웨어 엔지니어링" 사이에는 중요한 차이가 있습니다.

2부로 구성된 이 기사 시리즈는 코딩 기술도 배우고자 하는 모든 디자이너에게 유용할 것입니다.

원자재 이해

일부 사람들이 생각하는 것과는 달리 디자인은 아름다운 모형을 만드는 것이 아니라 최종 사용자에게 직관적이고 기능적인 경험을 제공하는 것입니다. 이는 솔루션의 구성 요소에 대한 이해 없이는 불가능합니다. 건축가는 자신의 계획이 요구하는 재료를 이해하지 못한다면 자신의 일을 잘 할 수 없을 것이고, 디자이너는 자신의 디자인을 현실로 만드는 재료를 이해하지 못한다면 그다지 능숙하지 않을 것입니다. - 코드. 코딩 경험은 디자이너가 가능한 것과 불가능한 것을 이해하고 디자인이 원하는 기능을 효과적으로 수행할 수 있는지 여부를 이해하는 데 도움이 됩니다.

또한 코딩 지식이 반드시 엔지니어가 되어야 하는 것은 아니라는 점을 동료들에게 재확인합니다. 이 둘은 관련되어 있지만 서로 다른 기술 세트를 나타냅니다. 워싱턴 대학(University of Washington)의 박사 과정 후보자인 Kyle Thayer가 최근에 썼듯이 컴퓨터 과학(또는 엔지니어링) 분야는 학생들에게 "컴퓨터 과학 분야의 개요"를 제공하는 것입니다.

“컴퓨터 과학 학위의 목적은 학생들에게 컴퓨팅의 과학 분야에 대한 개요를 제공하는 것입니다. 여기에는 일부 프로그래밍이 포함되지만 프로그래밍은 주로 다른 영역(예: 운영 체제, 알고리즘, 기계 학습, 인간-컴퓨터 상호 작용)에 대한 학습을 ​​목적으로 수행됩니다. CS 학위는 컴퓨터 과학 학문 분야로 가는 좋은 첫걸음입니다.”

— 카일 세이어

대조적으로, 코딩은 단순히 주어진 프로그래밍 언어에 익숙해져서 작업을 완료하는 것을 의미합니다. 누군가에게 기본적인 HTML이나 JavaScript를 배우도록 요청한다고 해서 풀스택 소프트웨어 설계자가 되는 것은 아닙니다. 일부 사람들의 생각에도 불구하고 저장소를 분기하고 스택 오버플로 답변을 복사/붙여넣기한다고 해서 소프트웨어 엔지니어가 되는 것은 아니지만 디자이너로서 제품 개발 팀에 제공하는 가치를 높일 수 있습니다.

"로우 코드"는 어떻습니까?

일부는 디자이너(및 개발자)가 끌어서 놓기 기능과 GUI(그래픽 사용자 인터페이스)를 통해 응용 프로그램을 빌드할 수 있는 로우 코드 미래에 진입하고 있다고 말할 수 있습니다. 따라서 프로그래밍 언어를 배우는 데 시간을 할애하는 것은 "할 가치가 없습니다". Webflow, Modulz, FramerX, UXPin 등과 같은 도구의 등장은 이러한 추론을 뒷받침하는 것 같습니다. 그리고 이것은 많은 애플리케이션에서 매우 사실일 수 있습니다. 코드 한 줄 없이 사이트나 앱을 만드는 것이 그 어느 때보다 쉬워졌습니다. 그러나 기본 원칙을 이해하지 못한다면 로우 코드 애플리케이션으로 제공할 수 있는 가치의 한계를 정하게 될 것입니다.

또한 아직 로우 코드 플랫폼으로 엔터프라이즈급 애플리케이션을 구축할 수 있는 단계가 아닙니다. 디자이너로서 우리는 우리가 상상하는 세상이 아니라 우리가 살고 있는 세상에서 일해야 합니다.

즉, 모든 사람이 고유한 기술 조합을 테이블에 가져옵니다. 코드에 대한 지식은 절대적인 필수 사항이 아니며 권장되는 것이지 필수 사항은 아닙니다.

어디서 시작하나요?

인터넷에 액세스할 수 있는 모든 사람이 사용할 수 있는 도구, 언어, 학교, 가이드 및 기타 리소스는 무한합니다. 그렇다면 어디서부터 시작해야 할까요? 중요한 면책 조항 - 나는 결코 전문가가 아니며 소프트웨어 엔지니어와 가까운 사람도 아닙니다.

내가 아는 많은 디자이너/개발자는 일반적으로 MySpace, Geocities, Tumblr, Neopets 등과 같은 사이트에서 HTML 및 CSS 템플릿을 해킹하기 시작했습니다. 데이트를 충분히 했으므로 오늘 시작하는 사람에게는 친숙한 CLI( 명령줄 인터페이스 ) 셸에서 시작하는 것이 좋습니다.

터미널: 필수 도구

헐리우드 감독들이 화면에 컴퓨터 해커가 있을 때마다 찾는 앱으로, 터미널 은 대부분의 사람들에게 익숙한 GUI(그래픽 사용자 인터페이스)가 아닌 텍스트 입력을 통해 작업을 실행할 수 있는 인터페이스에 불과합니다. 실제 개발자가 복잡성과 기술적인 방법을 설명하게 하겠지만, 우리의 목적을 위해서는 CLI에 익숙해지는 것이 여러 가지 이유로 유익하다는 것을 아는 것으로 충분합니다.

터미널을 사용하면 컴퓨터의 파일 및 폴더 구조에 액세스할 수 있습니다. Finder 또는 Explorer를 통해 클릭하는 것과 같은 방식으로 터미널에서 키보드를 사용하여 탐색합니다. 확실히 익숙해지는 데 시간이 걸리지만 이 영역에서 멘탈 모델을 개발하는 것은 코드 작업의 기초입니다.

많은 디자이너와 마찬가지로 저는 macOS 환경(이전에는 OS X으로 알려짐)을 사용하고 있지만 다음은 다른 *nix 운영 체제(Linux, Unix) 및 Windows PowerShell에도 적용됩니다. 서로 다른 최신 운영 체제 간에 겹치는 부분이 많이 있지만 몇 가지 차이점을 강조하기 위해 최선을 다할 것입니다.

정규식

CLI의 주요 기능은 명령에서 정규식(regex)을 사용하는 기능입니다. 정규식을 스테로이드에서 부울 검색 연산(인용 부호를 사용하여 정확한 구를 검색하거나 빼기 기호를 사용하여 단어 제외)으로 생각하면 텍스트 문자열에 패턴을 정의하여 출력에 대해 일부 작업을 수행할 수 있습니다. 다음은 실제 사례입니다.

1. 다양한 형식의 긴 전화번호 목록이 있는 경우 정규식을 기반으로 일관된 출력을 제공하는 스크립트를 정의할 수 있습니다. 예: (###) ###-#### 미국 전화번호 형식입니다.
2. 파일 그룹의 이름을 kebab-case에서 CamelCase 또는 그 사이에 있는 특정 대소문자로 빠르게 변경하려는 경우.

다음은 시작하는 데 도움이 되는 몇 가지 기본 ^터미널 명령입니다.

1. cd 는 "Change Directory"를 의미하며 이것을 입력한 다음 이동할 파일 또는 폴더 경로를 입력합니다. 폴더 이름을 입력할 수 있지만 이동하려면 현재 폴더 안에 있어야 합니다.
2. ls 는 현재 폴더에 있는 파일과 폴더를 나열합니다.
3. pwd 는 "작업 디렉토리 인쇄"를 의미합니다. 이것은 현재 컴퓨터의 위치를 ​​나열합니다.
4. mkdir 및 폴더 이름은 작업 디렉토리에 폴더를 생성합니다.
5. .. 와 함께 cd 를 사용하면 한 단계 위로 올라갑니다. /users/username/documents/2019 에 있고 cd ../.. 를 입력하면 /users/username 에 있게 됩니다.
6. 보너스 팁 — 폴더/파일 경로를 입력할 때 Tab 키를 누르면 자동 완성됩니다.

참고 : 다음은 Windows 명령줄 ( cmd )에서 작동합니다.

• cd , cd .. , mkdir , 경로 자동 완성을 위한 Tab 키( ls 및 pwd 는 작동하지 않음) .

최신 Windows 명령줄(Windows PowerShell)은 다음을 모두 지원합니다.

• 경로 자동 완성을 위한 cd , cd .. , ls , pwd , mkdir 및 Tab .

PowerShell에서 사용할 수 있는 명령의 전체 목록을 보려면 이 Microsoft 도움말 페이지 "익숙한 명령 이름 사용"을 확인하십시오.

대용량 파일 관리

터미널을 통해 파일과 폴더를 일괄적으로 조작할 수 있습니다. 몇 가지 아이디어가 있습니다.

1. 단일 명령으로 매월 하위 폴더가 있는 3년 분량의 폴더를 만들 수 있습니다. mkdir -p 를 사용하고 {list-of-years}/{list-of-months} 는 매월 하위 폴더가 있는 각 연도의 폴더를 만듭니다. 상상력을 발휘하십시오. 이것을 잘 사용할 수 있다고 확신합니다!
2. mv Screen\ Shot* Screenshots 를 사용하여 바탕 화면을 빠르게 정리할 수 있습니다. 이렇게 하면 "Screen Shot"으로 시작하는 모든 파일이 "Screenshots"라는 폴더로 이동합니다.

스크립팅 및 유지 관리

이제 터미널에서 사용할 수 있는 정규식과 옵션의 힘을 살펴보았으므로 이러한 것들을 스크립트 로 결합할 수 있습니다. 매우 간단하지만 강력하고 일반적으로 사용되는 스크립트 중 하나는 Mike G의 파일 이름 바꾸기입니다.

 criteria=$1 re_match=$2 replace=$3 for i in $( ls *$criteria* ); do src=$i tgt=$(echo $i | sed -e "s/$re_match/$replace/") mv $src $tgt done

이 스크립트를 사용하여 수행할 수 있는 작업은 범위를 정의하고( criteria ), 변경하려는 항목( re_match ) 및 변경하려는 항목( replace )을 정의한 다음 실행하는 것입니다.

파일을 만들고 이름을 바꾸는 것 외에도 만들 수 있는 다른 스크립트는 무수히 많습니다. Vlad의 Batch Resizing 스크립트는 bash 스크립트를 사용하여 만들 수 있는 시간 절약 기능의 훌륭한 예입니다.

고급 팁 및 요령

내가 수년에 걸쳐 발견한 것은 정기적으로 내 컴퓨터를 재설정하고 운영 체제를 다시 설치하면 컴퓨터가 비교적 깔끔하게 유지되고 하드 드라이브에 축적된 수년간의 디지털 찌꺼기 후에 모든 사람이 경험하는 속도 저하를 방지하는 데 도움이 된다는 것입니다. 많은 사람들에게 컴퓨터를 지우고 모든 것을 원래대로 되돌리는 일은 기껏해야 며칠 하는 일처럼 들리고 최악의 경우 결코 회복할 수 없는 불가능한 악몽처럼 들립니다.

하지만 그럴 필요는 없습니다. 몇 가지 명령줄 도구를 사용하여 OS를 백업하고 지우고 다시 설치하면 즐겨찾는 앱 목록뿐 아니라 몇 분만에 글꼴도 설치할 수 있습니다. Homebrew를 사용하여 분. (Homebrew는 Mac 및 Linux 전용입니다. Windows의 경우 확실한 대안인 Chocolatey를 사용해 보세요.)

관심이 있으시면 대부분의 개발을 위해 컴퓨터를 양호한 상태로 유지하기 위해 따라하기 쉬운 설정 가이드를 만들었습니다. 우리의 가이드는 macOS용이지만 Owen Williams는 Windows용으로도 확실한 가이드를 작성했습니다.

명령줄에 대한 Wes의 전체 자습서 시리즈를 읽을 시간이 없다면 최소한 다음 스택을 적극 권장합니다.

1. 오 마이 ZSH
2. zsh-autosuggestions
3. zsh 구문 강조
4. Z 점프 어라운드

텍스트 편집기 선택

코드 편집기를 선택할 때 많은 옵션이 있습니다. Sublime Text와 VS Code(Visual Studio Code)는 제가 가장 경험이 많고 현재 사용하고 있는 두 가지입니다.

Sublime Text는 프론트엔드 개발자들에게 인기를 끌었던 초기 텍스트 편집기 중 하나였습니다. 몇 년 전까지만 해도 최고의 표준이었습니다. 다중 커서, 강력한 패키지 관리자, 파일과 폴더 사이를 빠르게 탐색할 수 있는 고도로 사용자 정의 가능한 바로 가기와 같은 기능. 말할 것도 없이 그것은 그것을 쉽게 선택하게 만든 믿을 수 없을 정도로 가볍고 빠른 응용 프로그램이었습니다.

VS Code(Visual Studio Code)는 2015년경에 등장하여 사람들이 Atom과 Sublime에서 전환하는 데 시간이 걸렸지만 VS Code는 많은 개발자들이 선호하는 편집기로 자리 잡았습니다. Sublime의 거의 모든 기능 외에도 VS Code는 내장 터미널과 Git과의 긴밀한 통합으로 차별화되었습니다. 또한 Visual Studio Code에는 원하는 대로 환경을 확장하고 사용자 지정할 수 있는 풍부한 플러그인 에코시스템이 있습니다.

즉, 좋은 코드 편집기의 기능을 이해하기 위해 개발자가 될 필요는 없습니다. 나는 일상 업무에서 많은 용도를 발견했습니다. 특히 두 가지는 여러 커서를 사용하는 기능과 정규식을 사용하여 파일 폴더에서 텍스트를 찾고 바꾸는 기능입니다. 둘 다 자세히 살펴보겠습니다.

여러 커서로 편집

일반적인 워드 프로세서를 상상해 보십시오. 입력하는 텍스트가 어디로 갈 것인지를 나타내는 깜박이는 수직선이 있습니까? 이제 이 창에 두 개 이상의 커서를 추가하여 커서가 있는 곳마다 입력한 내용이 표시되도록 하는 기능을 상상해 보십시오!

이것은 아직 마음에 들지 않을 수 있습니다. 따라서 다음은 고급 텍스트 편집기를 사용하여 워크플로에서 일상적인 효율성을 만드는 데 도움이 되는 몇 가지 방법을 보여주는 예입니다.

여기에 이메일 주소로 변환해야 하는 이름 목록이 있습니다. 또한 모두 소문자로 만든 다음 알파벳순으로 정렬하고 싶습니다. 이것은 몇 번의 키 입력으로 수행할 수 있습니다.

목록을 붙여넣고 Cmd + Shift + P 를 누르면 명령 팔레트(사용 가능한 모든 기능을 제공하는 검색 가능한 메뉴의 멋진 용어)가 나타납니다. 기본적으로 이 메뉴에 원하는 작업을 입력할 수 있습니다. 텍스트로 할 수 있는 거의 모든 작업을 여기에서 사용할 수 있습니다. 그렇지 않은 경우 찾을 수 있는 플러그인 또는 확장 프로그램이 있을 수 있습니다.

몇 초 만에 대소문자를 변경하고 줄을 정렬할 수 있습니다. 그런 다음 Ctrl + Shift + 화살표 키를 누르면 커서가 추가되고 입력한 내용이 모든 줄에 추가됩니다. 이 경우 이름을 다음으로 바꿉니다. 이메일 주소를 사용할 수 있지만 당신의 엉뚱한 상상은 이것을 사용하는 무수한 다른 방법을 찾을 수 있습니다.

Excel이나 Google Sheets에서 이 작업을 수행할 수 있습니다. 사실이지만 텍스트 편집기에서 이러한 유형의 작업을 처리하는 것이 훨씬 빠릅니다. 수식을 작성하고 마우스로 항목을 선택하지 않아도 됩니다.

어떤 코드 편집기를 사용해야 합니까?

저는 디자이너입니다. 물론 제 대답은 "상황에 따라 다릅니다"입니다.

• 이러한 개념이 처음이라면 Sublime 무료 평가판을 받는 것이 좋습니다. Sublime은 계속해서 매우 가벼운 앱이며 시스템 리소스를 너무 많이 사용하지 않습니다. Sublime의 키 바인딩 (핫키에 대한 멋진 단어)을 사용자 정의하고 플러그인으로 내장 기능을 확장할 수 있습니다.
• Sublime, Atom 또는 다른 편집기를 사용하고 있다면 VS Code도 확인하는 것이 좋습니다. Microsoft의 팀은 강력하면서도 사용하기 쉬운 텍스트 편집기를 만드는 데 정말 훌륭했습니다.

개인적으로 두 편집기를 모두 사용합니다. Sublime은 번개처럼 빠르며 1초 미만의 찰나의 순간에 열리므로 텍스트를 쉽게 붙여넣고 조작할 수 있습니다. 하지만 좀 더 진지한 작업을 수행하고 싶을 때는 VS Code를 사용합니다. VS Code가 제공하는 올인원 패키지를 능가하는 것은 어렵습니다. 활기찬 플러그인 및 확장 에코시스템, 강력한 명령 팔레트, 고도로 사용자 정의 가능한 인터페이스를 통해 정말 자신만의 것을 만들 수 있습니다. Microsoft가 개발자 생산성을 위한 일류 경험을 보장하기 위해 매우 인센티브를 받는다는 사실은 말할 것도 없습니다.

결론, 그리고 다음은?

이 첫 번째 기사에서는 터미널의 기본 사항, 시작하는 데 도움이 되는 몇 가지 생산성 팁을 배우고 어떤 코드 편집기를 선택해야 하는지 더 잘 알고 있어야 합니다. 다음 파트에서는 ​​버전 제어, HTML 및 CSS, 엔지니어링 원칙에 대한 소개를 계속하겠습니다.

아무 것도 아미스?

이 게시물의 내용이 모호하거나, 둔감하거나, 쓸모가 없을 가능성이 높으며, 이를 개선할 수 있는 기회가 되었으면 합니다! 개선할 수 있도록 아래에 의견을 남기거나 DM 또는 Twitter에서 @멘션해 주세요.