2024.02.20.학습일지

Overview

코드 작성 시 발견한 인사이트

오늘은 코딩을 거의 처음으로 접해보면서 평소에 구석에만 있어 먼지가 쌓여있는 비주얼 스튜디오를 다시 꺼냈다. 항상 겉면만을 디자인하다가 디자인에 쌓여있던 개발적인 부분을 보면서 많은 공부를 하는 시간을 보냈다. 개발과정을 직접 경험해보니, 아티클 서치로 알아보는 것보다 더욱 다양한 인사이트를 얻을 수 있었다. 

 

먼저 'label'에 대한 부분이다. 피그마 이용시에 나는 label을 왜 입력해야 하는지, 네이밍을 피그마에서 왜 이렇게 하고 있는지를 짐작만 할 뿐 정확히 이해하지 못하고 있었다. 그러나 오늘 비주얼 스튜디오를 통해 div 태그에 label을 입력해보니, 왜 머티리얼 가이드에서 라벨링 요소를 정의내리고 있는지 정확히 이해가 되었다. 그만큼의 영역을 묶어서 표시하기 때문이었다. 그리고 머티리얼 가이드의 Attribute 요소에 대해 정확히 이해하지 못하고 있었는데, 이 요소들은 모두 개발 언어와 연관된 부분이라는 인사이트도 얻게 되었다. 그래서 내가 피그마를 통해 무의식 중에 정의내리는 개발적 요소가 정확히 어떤 부분이 있는지 개인적으로 정의를 내려보았다. 내용은 다음과 같다.

1. div name을 미리 정해주어 개발자분들의 코드 작성을 원활하게 할 수 있도록 돕는다.
2. 오토 레이아웃을 통해 개발자분들이 div를 효율적으로 묶을 수 있도록 돕는다.
3. 패딩과 마진을 올바르게 설정하여, 개발자분들의 수고로움을 덜어낸다.

 

이것을 통해 내가 해야하는 고민은 "어떻게 하면 개발에 더욱 최적화된 컴포넌트를 구성할 수 있을까?"라고 정의를 내릴 수 있었다. 앞으로 피그마 작업을 할 때는 항상 프론트엔드 개발에 대한 부분을 계속 생각하면서 올바른 방향으로 컴포넌트를 구성할 수 있도록 분석을 진행할 예정이다.

 

추가적으로 느낀 부분은 원래 '복사 붙여넣기'라는 것을 선호하지 않아서 잘 쓰지 않고 직접 타자를 치는 성향이었는데, 코드 작성 시에도 이러한 부분을 적용하다 보니 오타가 정말 많이 발생하는 이슈가 있었다. 그런데 이러한 오타가 쓰면서는 잘 인지하지 못하다보니 바로 발견하지 못하고, 새로고침 4번 정도를 진행하면서 찾게 된다는 단점도 존재했다.

 

왜 개발자분들이 쓰지 않고 붙여넣는지 정말 뼈져리게 느낀 순간이었다.그냥 비주얼 스튜디오에서 자동완성을 시켜주는대로 복사 붙여넣기를 진행하니, 코드 에러도 없고, 더욱 깔끔하게 코드가 완성된다는 느낌을 받았다. 튜터님께서 왜 "절대 쓰지 마세요...오타 납니다..."하시는지 알 수 있는 간단한 인사이트 검증이 되었다.

 

진행상황

웹 개발 코딩 1주차 (완강)