Report_026. 코딩(Coding) : Android / 디자이너를 위한 안드로이드 디자인해보기

FastCampus UX/UI SCHOOL_Android 특강_박성완 강사님 두번째 수업

박성완 강사님의 첫번째 수업 내용 중 가장 중요한 것은 "apk"의 개념이었다.

apk만 알아도 개발자 측에서 디자이너에게 우호적으로 나온다.

apk란, 하나의 APP에 대한 Source를 담고 있는 Zip파일과 같은 개념이다.

대부분의 개발자들은, apk를 디자이너나 경영진에게 던져주고서 거기 안에 들어있는 내용을 열어보라고 한다. 

zip파일이라면 알집 열어서 압축풀기 하겠지만 apk는 알려주지 않으면 열 수가 없다. 개발자들은 그런거까지 세세히 가르쳐줄 여유가 없다. 그래서 그냥 구글링 해보세요~ 검색해보시면 나와요~ 하고 apk만 던져주는 것이다.

두번째 수업에서는 디자이너 입장에서 개발자에 대해 그들의 입장을 이해하고 그들의 업무상황을 채화해보는 데에 의의를 두었다.

학습한 내용은 크게 다음과 같다. 

1. 프로젝트 생성 & 가져오기

2. Android Studio의 디자인 분석 툴

3. Visual Editor로 디자인하기

4. 자료 공유해보기

먼저, 프로젝트 생성과 가져오기를 알아보자.

이를 위해 우리는 "안드로이드 스튜디오"라는 프로그램을 사용하였다.

"안드로이드 스튜디오"란,

전반적인 "개발툴(IDE)" 이라고 보면 된다. 

즉, Project를 가지고 App을 만드는 것이다.

디자인 프로그램 중 "Sketch"프로그램 처럼, 뭔가를 만들 수 있는 프로그램이다. 즉, logic을 만들고 editing도 한다. 포토샵이나 Sketch프로그램 같은 디자인 프로그램을 보면, 디자인 툴이 있어서 버튼을 만들거나 배경을 만들어 여러개의 레이어를 운용한다. 이처럼, 안드로이드 스튜디오에도 디자인툴이 있어서 버튼을 만들수도 있고 분석을 할 수도 있다.(개발자들은 "디버깅"이라는 용어를 자주 사용한다. "디버깅(debugging)"이란, 프로그램의 잘못을 찾아내어 수정한다는 의미이다.) 또한 실행파일을 만들어서 핸드폰에 올리기도 한다. 

개발자들은 파일공유가 중요하다.

개발하는 프로그램이 자주 업데이트 되는 경우도 있고 개발 프로그램이다 보니 굉장히 무겁다. (여기서 무겁다는 뜻은 프로그램을 돌릴 때 데이터가 많아 작동시키는데 시간이 많이 든다는 걸 의미한다.) 또한 남이 만든 logic을 가져다 쓸 때 가져다 쓸 컴퓨터의 시스템 프로그레밍을 다시 다 해줘야 한다. 

때문에 개발자들은 서로간에 협업을 할때 그들만의 파일공유 서비스인 "깃(Git)"을 사용한다. 

"깃(Git)"은, 프로그램 등의 소스 코드 관리를 위한 분산 버전 관리 시스템이다.

이 "깃(Git)"툴은 별거 아닌거 같은데 엄청 어렵다. 전세계 개발자들이 이 "깃(Git)"으로 파일을 공유한다.

종종 디자이너에게 이 "깃(Git)"프로그램을 강요하는 회사도 있는데, 디자이너들이 처음 이 프로그램을 배울 때는 시간이 많이 걸리게 된다.

개발자들은 "프로젝트"라는 용어도 자주 사용한다.

디자인 프로그램 중 "포토샵"을 보면, 레이어 정보를 프로젝트 파일로 가지고 있다. 

이러한 개념처럼, 앱을 만들다보면 개발자들이 '안드로이드 어떻게 만들어라' 라던가 '소스', '이미지' 등 여러가지 정보들을 만들어 내는데, 이런 정보 전체를 통틀어 "프로젝트"라고 한다.

즉, 정보(=resource)들을 "프로젝트"라고 하는 것이다. 

Android App을 만들려면,

수많은 이미지와 파일들, 그리고 개발자가 만든 Source Code를 가지고 개발툴(Android Studio)을 이용해 문제없이 Build를 해야 가능하다.

Tool에서 사용할 수 있도록 모든 파일과 프로그래밍 명령덩어리를 관리하고 Build하는 정보를 모아놓은 것을 Project라고 한다.

MISSION 01.

"안드로이드 스튜디오"를 실행시키고 새로운 프로젝트를 생성하여 App의 이름과 아이콘을 바꿔보고, 본인의 스마트폰에 넣어보자.

1. "안드로이드 스튜디오"를 열고 File -> New Project를 연다.

개발자들의 언어는 "영어"입니다. 한글이나 다른 언어가 들어가면 오류가기 때문이라고 한다.

또한 프로그램에 따라 코딩할 때 영문 대소문자를 섞어서 써도 되는 것이 있고 소문자만 써야 하는 것도 있다고 한다. "안드로이드 스튜디오" 같은 경우엔 소문자로만 써야 한다.

2. Target Android Devices를 선택하라는 창이 나올 텐데, 이 창이 나오는 이유는 꽤나 중요했다.

회사의 임원들이 디자이너에게 이번에 나올 app은 페이스북처럼 한번 만들어봐봐 라고 요구하는 경우가 있다. 이럴 경우, 이 화면을 보여주면서 "타겟 디자인"이 있다는 것을 어필해야 한다.

즉, 안드로이드는 파편화 되어 있기 때문에 기기마다, 버전마다 디자인이 다르게 나온다. 그래서 타겟 디자인을 해야 한다는 것이다. 왜 그러냐고 임원이 다시 한번 묻는다면, "구글 정책"이 그렇다고 답하면 된다. 

이 창에서는 자신이 디자인하고자 하는 타겟을 선택한다.

3. "안드로이드 스튜디오"에서는 기본 탬플릿을 제공한다.

원하는 탬플릿을 선택한다.

4. 보통 기본으로 설정된 네임을 그대로 따르고 finish를 누른다고 한다.

5. 새 프로젝트를 실행한 후 첫 화면이다.

6. layout에서 디자인과 코딩을 할 수 있다.

 "Design" 페이지에서는 포토샵에서 처럼 버튼을 만들고 배경을 가지고 올 수 있다.

 "Text" 페이지에서는 코딩을 하는 부분이다.

 

7. 디자인과 코딩을 마친 후 내 핸드폰에 USB잭으로 노트북과 연결 후 내보내기를 할 수 있다.

그렇게 되면 내 디자인을 실제 내 스마트폰 배경화면에서 볼 수 있다.

8. "안드로이드 스튜디오"를 실행하다 보면, install하라는 메시지를 자주 볼 수 있을 텐데, 이럴 경우 next나 finish를 눌러 모두 실행시켜 주어야 한다.

지금부터 앱의 아이콘과 앱 이름을 디자인 및 설정하여 내 스마트폰 화면에 나타나게 해보자.

1. Project Explorer에서 AndroidMainfest.xml 파일을 연다.

2. 내 스마트폰 화면에 나타날 앱의 이름을 지정해본다. 

res -> values -> strings.xml 에서 "app_name" 옆 ">""<" 사이에 쓰면 된다.

나는 내 이름인 "오지연"으로 앱을 만들어 보았다.

(* res는 resource의 약자이다.)

3. 내 스마트폰에 표시될 App의 대표 이미지를 지정해본다.

res -> New -> Image Asset을 선택한다. 

4. Clip Art로 지정되어 있고 안드로이드에서 제공하는 시그니처 아이콘이 떠있다.

나는 image를 클릭하고 내가 원하는 사진을 찾아 첨부하였다.

5. 이미지 설정이 끝났다면, application 코딩을 찾아내어 내가 설정한 이미지로 바꾸어 준다.

app -> androidManifest.xml -> application 안에 android icon 부분에 내가 설정한 이미지의 이름을 써준다.

내 스마트폰 배경화면에 내가 APP이 생성되어 있다.

내가 지정한 앱 이름인 "오지연" , 내가 지정한 이미지인 "트럭"이 적용되어 나타나있다.

꽃으로 이미지를 바꿔서 해보았다.

이렇듯, 얼마든지 APP의 이름과 이미지를 바꾸어 나타내줄 수 있다.

다음으로,  Android Studio의 디자인 분석 툴에 대해 알아보자.

이 툴은, 디자이너가 Android Theme 파일을 만들 수 있는 툴이다.

app -> AndroidManfect.xml -> android theme 부분을 내가 만든 테마로 변경해주면 된다.

적용을 했다면, USB 케이블로 연결해 놓은 내 스마트폰에 화면을 띄워보자.

내가 지정한 색감과 "Hellow World"라는 텍스트가 들어가있다.

배경도 바꿀 수 있다.

나는 배경에 슈퍼마리오 이미지를 넣어보았다.

바로 요놈이다.

원하는 이미지를 찾아 영문 소문자로 특수문자나 여백 없이 저장한 후 네임을 바꿔주면 된다.

다음으로는,  Visual Editor로 디자인하기에 대해 알아보자.

Visual Editor로 Android 디자인을 할 수 있다. 

Android App을 만들기 위해서 디자인 작업은 필요하다.

그러므로 Android Stuido에서는 개발자를 위한 디자인 툴을 제공한다.

용어는 Visual Editor 또는 Layout Editor로 불리기는 하지만 개발자들은 크게 관여치 않는다.

의외로 화면을 만드는 작업은 쉽다.

HTML Editor로 웹 페이지 디자인을 하는 것보다 더 편리하다.

먼저, 화면 디자인을 만들어주는 저작도구로, "Design"과 "Text" 모두를 제공해준다.

Design모드는 개발자도 디자인 할 수 있는 환경을 만들어 주는 것이다.

포토샵이나 일러스트 디자인 툴 처럼 박스를 만들고 텍스트를 박고 크기조정 및 여백 조정이 가능하다.

만들어진 저장 파일은 XML형식이다. 

시작 전, XML 관련 기본 상식은 아래와 같다.

Visual Editor를 이용한 버튼디자인 및 적용에 대해 알아보자.

버튼을 커스터마이징하기 위해 버튼배경 이미지 XML을 만들어주는 사이트에 먼저 접속해야 한다.

접속 후 내가 원하는 대로 버튼의 색상을 디자인할 수 있다.

내가 디자인한 화면이다. 

사진에서 오른쪽에 해당하는 영역에서 버튼 타이포의 크기, 색상, 효과 등을 지정하여 디자인할 수 있다. 

디자인이 끝난 후 사진에서 왼쪽 페이지에 해당하는 곳의 button shape.xml부분의 코딩값을 복사하여 "안드로이드 스튜디오"에 그대로 붙여넣기하면, 내가 디자인한 버튼값을 그대로 가져올 수 있다.

1. res -> drawlble -> New Resource File -> buttonshape1 이라고 네임을 만든 후,

2. 내가 디자인한 버튼의 코딩값을 복사+붙여넣기 한 모습이다.

지금까지 배운 것들을 가지고 "안드로이드 스튜디오"툴 속에서 놀아보았다.

버튼도 내가 하고싶은 대로 디자인하고 배경도 깔았다.

내가 디자인한 화면의 컨셉은 "슈퍼마리오 게임" 화면이다.

바탕에 슈퍼마리오의 게임진행 화면을 가져다 놓고, 버튼을 3개 만들어

모바일 슈퍼마리오 게임을 하다가 잠시 멈춘 화면을 설계해보았다.

그렇게 완성된 화면 이미지이다.

수업은 여기까지 한 내용을 마무리 되었다.

수업 외적으로 강사님께 궁금한 내용을 여쭤보았다. 그 내용을 아래에 정리해본다.

*개발은, 예를 들어 이력서 탬플릿 가져와서 사진박고 하는거부터 시작하는거 같이 탬플릿을 먼저 잡는 것.

1.환경 : 50%

2.구조이해

3.기능추가

*텐서플로우 : 구글이 배포한 ai -> 이거 돌아가는 컴퓨터(환경 세팅한거) 보고 -> 다 똑같이 만든다.

즉, ‘setting documenting”만들고 다른 개발자들과 공유한다.

그래서, 개발자들은 “SVN” 소스 관리 킷을 통해 소스를 공유한다. 환경이 같아야 한다. 

디자인가이드문서처럼 말이다.

*ios디벨로퍼 + 안드로이드 같이 하시는 젊은 app개발자들이 많다.

*잘 하는 개발자란? 

one of them으로 이야기 하자면,

나를 이해하고 미리 예측해서 알려주는게 잘 하는 개발자들이 잘하는 개발자들이다.

못하는 개발자들은 이건 니가 알고있어야지 이런 사고방식을 하고 있는 사람들이다. 

잘 하는 개발자들은 ‘대화’를 잘한다. 

미리 디자이너나 경영자들이 뭘 몰라할지 예측하고 말해주어야 한다.

또한, 싸울 줄 아는 개발자가 잘 하는 개발자다. 초반부터 짜를거 짜르고 주어진 시간 내에 아웃풋을 내야하기 때문에 중요하다.

엔지니어 입장에서는 자기만의 확고한 까칠한 개발자들을 선호한다.

디자이너 입장에서는 잘 하는(친절한) 개발자와 협업해야 한다.

*개발자들도 프로토타이핑 툴을 쓴다 -> "oven.io" ->다음에서 2015년에 서비스한 것. -> 스토리보드를 보여주는 서비스이다. ->현업에서는 "oven"으로 달라고 하는 경우가 있다. 

"oven"은 정해진 탬플릿이 있어 스토리보드를 보여주기에 포토샵이나 다른 디자인툴로 작업하는 것보다 용이하며 직관적이어서 커뮤니케이션이나 프레젠테이션 할 때 효과적이다. 

*Theme-> 디자이너들의 영역이라고 구글에서 맡겼다.

*개발자들->적당히 작은 사이즈로 달라고 한다. -> 기기마다 크기가 다르게 들어가기때문에 정확한 수치를 주지는 않는다.