8 minute read

반년 동안 스타트업의 FE 개발자로 일하면서 얻은 경험과 지식을 동료 개발자들에게 전달하기 위한 글을 작성했다.

DN 프론트엔드 칼럼 2월호

딥내츄럴에서 반년동안 근무하면서 얻은 꿀팁을 공유합니다.

FE팀이 배운 것을 공유해서 발전을 이어가길 바라며 글 제목을 프론트엔드 칼럼으로 했습니다.

3월호는 다른 분이 써주세요. ㅎㅎ

작업도구 UX 화룡점정

작업 시간을 줄일 수 있는 단축키를 많이 많이 추가해주세요.

LOL을 마우스로만 한다고 상상해보면 끔찍합니다.

단축키가 있어야 E평Q평플궁 으로 상대방을 빠르게 원콤낼 수 있죠.

사용자가 작업물을 원콤낼 수 있는 필살 단축키를 추가해주세요.

Untitled

→ 마우스로 하는 일 모두 키보드로 할 수 있게 하기

→ 여러 절차를 묶어서 한 번에 할 수 있는 단축키 추가하기

작업도구 제 1 유저는 크라우드가 아닌 HIC

작업도구를 가장 많이 이용하시는 HIC 분들을 위해 이런 기능을 선물해보세요.

  1. 검수 시간을 획기적으로 줄여주는 단축키

    ex) 다음 레이블로 넘어가고, 확대할 수 있는 단축키

  2. 검수에 도움이 되는 정보를 한눈에 볼 수 있는 창

    ex) 스크롤하지 않아도 레이블을 단번에 모아서 볼 수 있는 정보창

친절한 에러 메시지

사용자를 컴퓨터를 처음 접해보고 작업 가이드도 읽을 줄 모르는 원시인이라고 생각해보세요.

Untitled 1 작업 가이드를 몰라도 정확한 값을 입력하도록 행동을 유도하세요.

빨간색 에러 메시지가 가장 효과적입니다. (아이콘만으로는 애매해요)

ex)

  • 20 ~ 100 사이의 숫자를 입력하세요.
  • 일정은 2개 이상 선택해야 합니다.
  • 이 부분이 선택되어 있지 않습니다.

→ 우리 손으로 고객 문의 수를 줄일 수 있습니다!

개발 문화

102% 개발하기

우리가 100% 완성했다고 느끼는 작업을 까보면 사실은 60%만 돼있어요.

우리의 지친 뇌가 소수점 첫째 자리에서 반올림한거에요. (0.6 → 1)

100% 개발했다고 생각했을 때 완성도를 2%만 더 올려보세요.

빼먹은 요구사항이 없나, 제출이 잘 되나, 다크 모드 잘 나오나, …

→ 한 개발자의 작업 패턴: “개발 완료” 커밋 1개와 1시간 간격으로 이어지는 수정 커밋 4개

코드 리뷰는 사회 안전망

회사 다니면서 단순 코드 실수로 사고를 몇번 치고나서 드는 생각이

  1. 테스트 좀 더 할걸..
  2. 누군가 코드를 한번만 봐줬다면 안 이랬을 텐데..

모두 코드 리뷰를 한다면 서로의 실수를 미리 잡아서 사고를 예방할 수 있고

코드의 히스토리를 공유해서 작업도구 유지보수하기 편해집니다.

코드 퀄리티가 올라가는 건 덤이고요.

→ 코드 리뷰 좀 해주세요….. 제발

코드를 지배하기

“나는 코드를 지배할 수 있다!”

Untitled 2

남이 작성한 수 많은 코드에 끌려다니고, 피해다니는게 지치지 않나요?

코드를 완전히 이해(정복)하고 깨진 창문 같은 코드를 보면 바로 리팩터링하세요.

잘 돌아가고 있는 데 굳이?

→ 나쁜 코드를 보면 가슴이 답답해지지 않나요?

→ 💩같은 코드가 옆에 있으면 내 코드도 💩이 됩니다.

→ 지금 안 고치면 나중에 손도 못 대는 상황이 올지도요…

코드를 고쳤다가 잘못되면 어떡하지?

→ 확신이 생길 때까지 계속해서 테스트를 하면 됩니다

→ 사고 쳐도 유능한 팀원들이 다 커버쳐주십니다.

→ 잃는 것보다 얻는 게 더 많다는 생각으로 하면 됩니다.

읽기 쉽고 단순한 코드를 작성하세요.

for, if 문만 배운 중학생도 읽을 수 있는 수준으로요.

Untitled 3

이를 위해 아래 책도 읽고 코드를 짤 때 고민도 많이 해보세요.

조금만 생각해보면 복잡한 로직도 단순하게 표현할 방법이 있습니다.

개발역량을 높이는 필독서

유연한 작업도구 만들기

부제: 개꿀 빨기편하게 일하기

코드에는 추상화를 메타 데이터에 세부사항을

자주 바뀌는 비즈니스 로직이나 요구 사항은 타워에서 설정할 수 있게 코드를 짜세요.

설정 값 = 타워 설정값 || 자주 쓰는 기본값 전략을 사용하세요.

나중에 요구 사항이 바뀌어도 코드 수정 없이 순식간에 대응이 가능해집니다.

예시)

  • 레이블 빨간색으로 해주세요

    → 레이블링 색상을 RGB 코드로 타워에서 설정할 수 있게 하기

  • 300자에서 1000자 텍스트 제한 걸어주세요.

    → 최소/최대 텍스트 길이 타워에서 설정할 수 있게 하기

  • 바운딩 박스, 폴리라인 작업도구 만들어주세요

    → 박스, 폴리라인 툴 종류, 색상, 두께, 이름 모두 설정 가능한 이미지 어노테이션 플랫폼 구현

이 작업도구가 왜 필요한지 생각하세요.

부제: 영혼을 담아 개발하기

Untitled 4

요구사항에 써있는 것만 구현하지 마세요.

작업도구가 왜 있어야 하고 무엇을 해야하는지 정확히 이해하세요.

그러면 요구사항에 적혀있지 않아도 정말로 필요한 게 보입니다.

필요해 보이면 일단 구현하세요. 그럼 나중에 분명히 쓰게 됩니다.

목표는 이런 대화가 나오는 것입니다.

PM: 이 기능 추가 부탁드려요

FE: 그거 혹시 몰라서 미리 추가해놨어요. 타워 설정만 바꿔주세요. 😎

예시)

PM: 바운딩 박스 너비가 50 이상인 것만 레이블에 추가할 수 있나요?

FE: 바운딩 박스가 너무 작으면 잘 안 보여서 크기가 10 이상인 것만 레이블링되게 해놨어요. 타워에서 박스 최소 크기만 50으로 설정하시면 돼요.

PM: 박스 그릴 때 십자선 보여줄 수 있나요?

FE: 있으면 편할 것 같아서 미리 구현해놨는데 내일 바로 프로덕션 배포됩니다.

말하는 법

상대가 예/아니오로 대답할 수 있게 질문하세요.

3류: 이건 어떻게 할까요?

B: (사실 나도 잘 모르겠고 바쁘고 머리도 아픈데 어떻게 대답해야 되지?) 음…

2류: 이건 이런 방식으로 하면 될까요?

B: (그렇게 하면 되겠네) 네 / (조금만 보완하면 되겠다) 이것도 추가해주세요.

1류: (질문 안 함. 알아서 다 해놓고 보고는 철저히 함)

한국어로 말하세요. (쓰세요)

개발자만의 언어가 있습니다. 확실해요.

코드가 한글로 적혀있는 느낌이며 일반인들은 전혀 못 알아 듣습니다. (심지어 읽은 뒤 두통을 호소)

이게 뭔 느낌인지 모르겠으면 사회학 논문을 읽어보세요.

(한글로 되어 있긴 한데 읽어도 뭔 소린지 모르겠어요.)

이를 예방하기 위해

  • HOW 대신 WHAT을 말하세요.
  • 최소한의 글자로 말할 방법을 찾으세요.
  • 보기 편하게 문장을 자르세요.

  • 개발자 언어 예시

    skip 이 checked인 상태에서는 result가 빈 객체 값으로 서버에 요청이 갑니다. skipWithResult 속성을 ToolCode에 추가하면 result를 유지한 상태로 작업 스킵이 가능합니다.

    → 스킵하면 작업한 거 다 날라가요. 이게 싫으면 저한테 말씀해주세요.

신입 FE 개발자에게 추천하는 온보딩 코스

1. 일일 HIC 체험하기

하루 날 잡고 HIC 한 분 옆에 붙어서 어떻게 일하시는지 확인하세요.

  • 작업도구의 제출, 승인, 저장, 반려 같은 워크플로우
  • 작업, 검수 시 손이 많이 가는 부분
  • 힘든 점, 애로 사항, 병목 발생 지점

등을 직접 보고 체험해보세요.

이 경험을 토대로

  • 모든 워크플로우에 대응할 수 있도록 빠뜨린 기능은 없는지
  • 어떻게 HIC 분들의 작업 효율을 높이고 수고를 덜 수 있는지

를 생각하면서 작업도구를 개발하세요.

2. 작업도구의 라이프사이클을 완벽하게 이해하기

작업도구의 내부 데이터가 초기화되고 변화되는 흐름을 완벽히 파악하세요.

  • 작업 할당, 수정, 제출, 승인, 저장으로 인해 변하는 변수

하나라도 잘 모르거나 잘못 이해하면 사고 칩니다.

→ 이 부분이 사고나면 이불킥 각도가 제일 높아요. ㅜㅠ

2021월 2월 26일 조용진

You May Also Enjoy