.png)
들어가기 전에
시리즈로 준비하는 월간 회고 그 두번째, 시작합니다.
프론트엔드 환경 (참고사항)
- React
- Redux / Redux-saga
- Next.js / Now
- Webpack / Babel
- styled-jsx
Admin UI 개편작업 - Ant Design
Admin 페이지를 만들때, 그때그때 필요한 기능이 있다고 하면 넣어주는 방식으로 작업하다 보니 각 기능당 버튼도 제각각이고.. 이런저런 문제들이 생겨났어요.
(가장 큰 문제는 저희가 Admin 을 만들때 처음부터 Layout 에 대한 고민을 하지 않고 되는대로 만든 탓이겠죠.)
그래서 이번에 Admin 에 새 기능을 넣으면서 UI 를 같이 개편해 보기로 했고, Ant Design 을 사용하게 된 과정을 정리해볼께요.
1. 사이트에 나와야할 정보 타입별 분류 & 정리
일단 사이트에 어떤 정보들이 있고, 이것들이 어떤 방식으로 보여져야 하는지 정해야 했어요.
지금에야 말로 이렇게 하니까 그냥 쉽게 할수 있는 일이라 생각이 들 거 같은데요, 이게 좀 중요한 작업이었고 시간을 꽤 써 주어야 하는 작업이라고 생각해요.(다만 저희는.. 좀 쉽게 생각하고 시간을 덜 들여서 정했었고, 그래서 중간에 개발 하면서 다시 이쪽으로 돌아오는 상황이 계속 반복되었죠.ㅠㅠ)
사이트에 데이터가 어떤 종류가 있고, 그 종류에 따라 어떤 게 나올지 다시 파악한 다음에, 특정 정보들은 어떤 분류에 넣어야할지 정해주는 등의 작업을 통해 총 10타입을 정했습니다.
2. 타입별 모양 정하기 & 사용자 Needs 파악
타입별로 어떤 모양으로 보여줘야 하는지 고민했고, 이번에 만드는 Admin 페이지의 경우에는 회사 내 사용자들이 어떤 불편함을 안고 있는지 들은 후 그걸 어떻게 반영할 수 있는지 회의하는 시간도 가졌습니다.
(물론 사용자는 개발자가 아니기 때문에 가끔 저희를 슈퍼맨으로 보시고 요구하는게 있긴 했는데... 그런건 안된다고 할 수 밖에 없었네요.)
3. UI library 선택
저희는 Drawer 기능이 있는 UI library 를 사용하기로 결정했고, 목록은 다음과 같았어요.
그중 사용하기 편하다고 판단한 Ant Design 을 채택했습니다.
채택 과정에는 여러 고려가 있었는데, 저는 그 당시 다른 일을 진행하고 있어서 선정 이유와 결과만 들었습니다.
4. 공통 Layout 및 색상 선정
이제 통일성있는 UX를 제공하기 위해서 모두가 공통으로 쓸 Layout 모양을 잡고 어떤 버튼에 어떤 색상으로 통일성을 줄지 고민했죠. 자 이제 마지막입니다.
5. 위 결과에 따라 작업!
이제 다 만들어졌으니 작업하면 됬습니다. 이렇게 보면 순조롭죠? 쭉쭉 진행될꺼 같지만 그렇지 않아요.
6. 1번부터 무한 반복(매우 중요함!!)
한번에 모든게 정해지면 좋겠지만, 그렇지 않으리라는점 잘 알고 계시죠?
계속 새로운게 나오고, 다시 협의하고, 바꿀까 고민하고, 다시 정하고 등등 계속 무한 반복을 하게 됩니다. (물론 중간에 건너 뛰는 과정도 생기고 하지만, 그건 별로 중요하지 않아요. 반복하고 있다는게 중요하지!)
실제 시도하기 전에 몰랐던 사항들, 새로운 추가사항 등 모든걸 고려해서 그때그때 맞춰서 다시 이야기하고 다시 작업하는 것의 반복입니다.
전 이 과정을 이해하는게 가장 중요하다고 생각해요. 한번에 모든게 정리된다? 이런건 불가능하다고 생각하거든요. 가끔 이런 상황에 대해서 왜 또 이 대화를 해야하나 불편해하시는 분들도 있는거 같은데, 이렇게 반복을 계속 해야 완성도가 높아진다고 생각해서 전 이 과정을 힘들지만 즐겁게 받아들이려고 한답니다.(하지만 이 결과로 내 작업이 이틀전으로 돌아갈 땐 눈물이...ㅠ)
개편 과정 총평
있는걸 고치는 것은 매우 어려운 작업이더라고요. 짧은 시간 내에 모든걸 해야하니까 시간 압박도 꽤 있고, 또 다시 고치고 다시 협의하고 이 과정의 반복에서 힘든 점도 있지만,(사실 이 작업은 3월 말까지 계속될꺼 같아요... 으악!) 그래도 개발자라면 문제 해결을 해 주는 사람이라는 생각에 제가 고민하고 발전하는 과정중에 있다고 생각합니다.
블로그 글 작성
개발자를 시작하면서 다른 글 덕분에 여기까지 발전한거 같은데, 정작 나는 글로 누군가를 도와주지 못했던거 같아서 글을 적기 시작했어요. 원래는 2월동안 3개의 글을 적으려고 했는데, 2개밖에 못적어서 아쉬워요.
이제 시작이 반이니까 앞으로도 월 2~3회 글을 적기위해 노력할 겁니다.
2월 기록 리스트
2월 소감
- 개발자라도 모든 과정을 신경써야 한다
- 개발자가 개발 잘하는거 중요한 만큼, 일이 원활하게 돌아가는 것도 개발자의 능력이라는 생각이 듬.
- 블로그 좀 더 잘 써보자
- 이제 시작한거 중단되지 않도록 노력할 예정.
개인적인 기록을 위한 글인데, 여기까지 읽어주셔서 감사합니다.
