개인개발 방법론(?) 변경 Adobe XD 사용 - kirseia/study GitHub Wiki

개인 개발의 한계 (실패?)

  • 개발자다보니 혼자서 앱을 만들 때 보통 다음과 같은 흐름을 따른다.
  1. 아이디어가 떠오른다. (오 역시 난 천재, 이건 대박이다)
  2. 개발을 어떻게 할지 생각해본다. (이런 프레임워크를 쓰고 라이브러리는 이걸 가져다 쓰고)
  3. 와이어프레이밍을 간단히 한다. 종이에 쓱쓱 (오 이정도 플로우면 괜찮은거 같아)
  4. xcode 를 실행하고 (ios개발자라) 기능을 개발한다.
  5. 테스트를 짠다. 잘 돌아간다 (오 개발 다 끝난거 같네~)
  6. 스토리보드에 UI를 작성하기 시작한다. (음. 안 이쁜데...)
  7. 만들다보니 이런 기능도 필요하고, 이런 옵션도 필요하고 (@##$(@#)($!#) ...
  8. 끝이 안난다.

뭐가 잘못됐나

  1. 완성되지 않은 기획으로 개발을 시작한 것

    • 기획은 만들면서도 계속 변하긴 하지만. 어디까지 하고, 어떤건 다음버전으로 넘길지 등하고는 별개로 기획에 빈틈이 많았음.
    • 예를 들면 로그인이 필수인 앱에 로그인 시나리오를 고려하지도 않고 기획을 끝낸다고 생각하고 개발 한 것

  2. 디자인을 완성하지 않고 개발을 시작한 것

    • 프로토타이핑 툴(Adobe XD or Sketch 등)과 다르게 개발툴로 디자인하는건 변경하기가 매우 어렵다. (상대적으로)
    • 대충 만들고 다음 뷰를 만들려다보니 바꾸고 싶은게 생기면 전체를 다 바꿔줘야할 경우가 생김

  3. 다시 하는건 멘탈을 나가게 함 -_-)

    • 만든거 갈아엎고 새로 만드는건 좌절하게 만든다.
    • 회사에서 개발자로 있을 때야 디자인이, 기획이 수정되면 디자이너나 기획자를 탓할 수 있지만 개인 개발은 온전히 자신의 몫이다.

  4. 옛날에 (한 5년전, 2014년쯤) 개발할 때는 금방했는데...

    • 그때와 다르게 지금은 어느정도 퀄리티를 보여주지 못하는 앱은 알려지기도 전에 사장당하기 때문에 (물론 5년전에 만든것도 알려지지 못함 ㅠ)
    • 퀄리티를 올려야 하는데 머릿속에서 하는, 종이에 간단히 적은 기획으로는 완성 할 수 없었다.

몇 번의 좌절 후 다음과 같이 개발을 하게 됨

  1. 아이디어가 떠오른다. (오 역시 난 천재, 이건 대박이다)
  2. 개발을 어떻게 할지 생각해본다. (이런 프레임워크를 쓰고 라이브러리는 이걸 가져다 쓰고)
  3. 와이어프레이밍을 간단히 한다. 종이에 쓱쓱 (오 이정도 플로우면 괜찮은거 같아)

여기까지는 동일

  1. 와이어프레이밍 한 것에 각 화면 마다 필요한 기능들을 정리한다.
  2. 기획을 여러번 아주 여러번 확인한다. 이렇게 하는게 UX적으로 좋은가? 이 기능이 필요한가. 다른 식으로 보여주는건 어떤가? 등등
  3. 프로토타이핑 툴을 연다 (저는 Adobe XD를 선택, 그 이유는 맨 아래에 추가로)
  4. 사용할 컬러를 선택한다. (메인 컬러2종, 서브 컬러 2종, 포인트 컬러는 자유, 검정색 베리에이션은 5가지 정도)
  5. 사용할 폰트 스타일들을 정한다. (타이틀로 쓸 것, 부제목으로 쓸 것, 섹션으로 쓸 것, 기본 텍스트, 기타 등등)

7, 8을 Asset 으로 관리한다.

  1. 화면 단위들을 배치하고, 네비게이션바를 배치한다.
  2. 각 화면 별로 디자인을 한다.
  3. 프로토타이핑 기능을 이용해 간단히 본다.
  4. 검토 후 이정도면 됐다 라고 생각할 때 개발을 시작.
  5. 개발 시작...

Adobe XD

  • 왜? 무료로 푼다.

  • 경쟁 제품인 Sketch 는 30일 트라이얼만 무료

    • 1년 99달러

  • Sketch 의 최대 장점은 다양한 플러그인과 제플린 연동인데, 제플린 연동은 개발과 디자인을 같이 하는 나에겐 필요가 없음.

  • 물론 Adobe XD도 제플린 연동이 가능하긴 함.

  • 사실 선택 이유는 가격 밖에 없긴 했다 -_-)

Adobe XD의 장점

  • 스케치랑 비교하는 장점이 아니라 그냥 디자인 툴로서의 장점

  • Asset 기능

    • 개발자로서 가장 맘에 드는 부분이 이거다. 물론 디자이너들이 디자인 할 때도 중요한 요소지만...
    • Asset에 지정된 색, 폰트 스타일만 개발할 때 미리 정의해놓으면 더 이상 할게 없다.
    • 디자이너가 색을 바꾸고 폰트를 바꿔도 스타일 정의만 바꾸면 되니까 엄청 편한다.
    • 디자인 할 때도, 이게 진짜 괜찮은건가를 눈으로 보면서 확인 가능해서 엄청 좋다.
    • Asset으로 지정한 것을 각 화면에서 가져다 쓰면 Asset을 바꾸면 한번에 바꾸는 것. 정말 좋다.

  • Repeat Grid

    • 이건 Adobe XD의 장점으로 분류되던데 스케치를 안써서 잘 모르겠지만 그럴싸한 프로토타이핑 및 디자인이 가능해진다.
    • 한번 Repeat Grid 로 지정해버리면 그 내부 아이템 수정이 쉽지 않은거 같은데 아직은 잘 모르겠음.

  • 프로토타이핑 기능

    • 프로토타이핑 기능이 합쳐져있고, 공유도 가능해서 디자인 해놓고 주변에 보여줘서 이렇게 만드는게 진짜 괜찮은가를 검증하기에 정말 좋음.

  • 대안으로, Designable Class를 엄청 만들어서 Xcode 스토리보드에 사용하면서 프로토타이핑을 해볼까 했는데 Asset 기능 하나 때문에 포기.

    • 물론 xcode storyboard 에서도 class를 잘 만들면 되겠지만 autolayout 기능 때문에 디자인을 한번 만들면 바꾸기가 쉽지 않아서 포기