객체 지향 UI 디자인 운동을 위한 환경 구축

개인 앱의 화면 디자인을하기 전에 디자인 공부를 가볍게 할까,
객체 지향 UI 디자인 책을 읽고 있습니다.
그 중 운동에서 그림을 쓰거나 글을 쓸 필요가 있습니다만,
그림을 그리면 스푸 가 출현해, 쓰면 지렁이가 기어가기 때문에 좀처럼 엄격할 것 같다.
그래서 툴의 힘에 의존하기로 했으므로, 작업용 환경 구축의 메모를 기재하려고 합니다.

작업 환경 구축

PlantUML

설치

※ 의존하고 있는 graphviz나 openjdk도 인스톨 된다.

$ brew install plantuml

Java 설정

$ /usr/libexec/java_home -V
Matching Java Virtual Machines (1):
    15.0.1, x86_64: "OpenJDK 15.0.1"    /Library/Java/JavaVirtualMachines/openjdk.jdk/Contents/Home

/Library/Java/JavaVirtualMachines/openjdk.jdk/Contents/Home

$ sudo ln -sfn /usr/local/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk
$ echo 'export JAVA_HOME=`/usr/libexec/java_home -v "15"`' >> ~/.bash_profile
$ source ~/.bash_profile

편집기 설정

Visual Studio Code를 시작합니다.

EXTENSIONS에서 PlantUML을 설치하십시오.

Figma

화면 전환을 그리기 위해 Figma를 설치합니다.

$ brew cask install figma

회원등록 후 적당히 copipe에서 사용할 수 있는 에셋을 다운로드한다.

스마트폰용

Material Design 1.0

PC용

UX Flow 2.0

Git

작업 기록을 남기기 위해 Git을 만듭니다.

Git을 설치합니다.

$ brew install git

Git 저장소의 초기화.

$ mkdir OOUIWorkout
$ cd OOUIWorkout
$ git init
$ git commit --allow-empty -m "first commit"

디렉토리 만들기

각 운동에 대해 만든 파일을 저장하는 디렉토리를 만듭니다.
※ 운동 도중 등에서 빈 디렉토리를 Git에 저장하고 싶은 경우 .gitkeep을해야합니다

$ cd OOUIWorkout
$ seq 18 | xargs -I var mkdir -p dock/level/var
$ pwd;find . | sort | sed '1d;s/^\.//;s/\/\([^/]*\)$/|--\1/;s/\/[^/|]*/|  /g'
OOUIWorkout
|--dock
|  |--level
|  |  |--1
|  |  |--10
|  |  |--11
|  |  |--12
|  |  |--13
|  |  |--14
|  |  |--15
|  |  |--16
|  |  |--17
|  |  |--18
|  |  |--2
|  |  |--3
|  |  |--4
|  |  |--5
|  |  |--6
|  |  |--7
|  |  |--8
|  |  |--9