협업하는 디자이너 - #2 git

DnD

디자이너에서�협업하는�디자이너로!배우자마자�바로�적용�해볼�수�있는�실전�협업�수업!

JSon

Full-stack,�mobile�software�developer�Super�fast�learner�

Startup�OperaCoffee

워늬

Android�Application�Developer�App/Web�Designer�

And�…�Freelancer�&�Student

Kosick

Full-stack�developerFreelance�programmer�

Digital�nomad�

#뭐하는�강의인가요?�협업하는�디자이너

05

협업하는�디자이너?


06

협업하는�디자이너?

분업하는�디자이너



07

디자이너

개발자



08

디자이너

개발자



09



10

디자이너

개발자?


협업하는�디자이너!

11

디자이너

개발자Free!



12

디자이너

개발자Free!



13

디자이너

개발자!


협업하는�디자이너�

코드를�돌려볼�수�있다�

직접�디자인�리소스를�변경�가능하다�

개발자가�이해하기�쉬운�디자인을�전달한다�

14


협업하는�디자이너�

코드를�돌려볼�수�있다�

직접�디자인�리소스를�변경�가능하다�

개발자가�이해하기�쉬운�디자인을�전달한다�

알맞는�타입의�리소스로�제작한다�

개발자의�투정을�알아들을�수�있다�

…

15

Index

Git-it-electron�실습

1.�코드�여러분도�돌려보고�싶지�않으세요?

SourceTree�실습

디자이너를�위한�Version�control

정리

Git

#왜�배워야하나요?�Git

17

#왜�배워야하나요?�Git

18

One

뛰어난�Git�학습도구인�Git-it-electron�으로�Git�을�배워봅시다

Git-it-electron�실습

#무엇에�쓰는�물건인고?�Git

개발자들은�코드를�어떻게�관리하고�있을까요?�

개발자는�자기가�수정한�것을�되돌리고�싶을�때어떻게�할까요?

20


21


22

버튼�추가

네트워크�기능�추가

버그�수정

설정�화면�추가 차이점만�저장!


23

버튼�추가

네트워크�기능�추가

버그�수정

설정�화면�추가

되돌리기


24

버튼�이미지�변경

버튼�폰트�크기�변경

#무엇에�쓰는�물건인고?�GitHub

여러�명의�개발자들은 어떻게�같은�코드를�가지고�일하고�있을까요?�

그�코드는�어디에�있을까요?

25


26


27

개발자 개발자 개발자


28

개발자 개발자 개발자디자이너

#실습해봅시다�Git-it-electron

29

#복습해봅시다�Git

30


31

Local

Remote�(origin)


32

Local

Pull

Remote�(origin)


33

Local

Pull

Master

Remote�(origin)


34

Local

Pull

Master

Branch

Remote�(origin)


35

Local

Pull

Master

Branch

Checkout

Remote�(origin)


36

Local

Pull

Master

Commit

Branch

Checkout

Remote�(origin)


37

Remote�(origin)

Local

Pull Push

Master

Commit

Branch

Checkout

Two

Git�을�GUI�로�다뤄봅시다

SourceTree�실습

#무엇에�쓰는�물건인고?�SourceTree

39

#무엇에�쓰는�물건인고?�SourceTree

40

Branch

Remote

Commits

Diff

Log

Commit,�Pull,�Push,�Merge�…

#실습해봅시다�SourceTree

https://github.com/designers-developers/SourceTreePractice

41

https://github.com/designers-developers/SourceTreePractice


42

Windows 설치�Windows�Mac

#실습해봅시다�SourceTree�-�Mac

43

[새�저장소]�-�[URL에서�복제]


44

Source�URL�에�저장소�URL�입력�[클론]


45

로컬�저장소가�생성되었습니다�[브랜치]�를�눌러�브랜치를�생성해봅시다


46

새�브랜치�이름에�add-<username>�입력�[브랜치�생성]


47

브랜치가�추가되었습니다


48

파일을�수정하고�나면�‘Uncommited�changes’�에�변경�사항들이�있습니다�

파일�옆의�체크박스를�눌러봅시다


49

체크한�파일이�‘스테이지에�올라간�파일’�로�추가됩니다.�git�add�와�동일한�동작입니다.


50

[커밋]�을�눌러서�커밋해봅시다


51

커밋�메시지를�작성하고�[커밋]


52

커밋되었습니다�[푸시]�를�눌러�리모트로�푸시해봅시다


53

새로�만든�브랜치도�체크해서�리모트에�올라가도록�합니다�[확인]


54

origin/add-<username>�이�추가되었으면 성공

#실습해봅시다�SourceTree�-�Windows

55

[Clone�/�New]


56

Source�Path�에�저장소�URL�입력�[Clone]


57

로컬�저장소가�생성되었습니다�[Branch]�를�눌러�브랜치를�생성해봅시다


58

New�Branch�에�add-<username>�입력�[Create�Branch]


59

브랜치가�추가되었습니다


60

파일을�수정하고�나면�‘Unstaged�files’�에�변경�사항들이�있습니다�

그�위의�[Stage�All]�을�눌러봅시다


61

파일이�‘Staged�files’�로�추가됩니다.�git�add�와�동일한�동작입니다.


62

[Commit]�을�눌러서�커밋해봅시다


63

커밋�메시지를�작성하고�[Commit]


64

커밋되었습니다�[Push]�를�눌러�리모트로�푸시해봅시다


65

새로�만든�브랜치도�체크해서�리모트에�올라가도록�합니다�[Push]


66

origin/add-<username>�이�추가되었으면 성공


67

GitHub�에서도�확인�가능합니다

Three

디자인�리소스에도�Version�Control�을?

디자이너를�위한�Version�Control

#간단하게�구경해봅시다

Git�LFS https://youtu.be/uLR1RNqJ1Mw�

Invision�http://blog.invisionapp.com/design-file-syncing/�

Pixelapse�(deprecated)https://www.pixelapse.com/

69

https://youtu.be/uLR1RNqJ1Mw

http://blog.invisionapp.com/design-file-syncing/

https://www.pixelapse.com/

*

오늘�배운�것을�정리해볼까요

정리

#정리해봅시다

Git�

개발자들이�코드를�관리하는�방법�

과거로�돌아갈�수�있습니다!�

GitHub�

코드를�저장해주는�곳�

SourceTree�

Git�작업을�편하게�해주는�고마운�프로그램�

71

#정리해봅시다

주의사항�

Git�에�완전히�익숙해지기�전까지는절대!�master�브랜치에서�작업하지�마세요�

Pull�-�Branch(필수)�-�Checkout�-�작업�-�Add�-�Commit�-�Push�

따로�만든�브랜치를�푸시하고�개발자분에게�말씀드리면알아서�잘�해주실꺼에요�

72

E N D