내가 인턴십?
2월 18일부터 3월 1일까지 말레이시아로 인턴십을 가게됐다.
난생 처음 인턴십에 영어도 안되는 나 '어떡하지.' 가 먼저 앞섰지만 시도해보자.
그렇게 나는 말레이시아로 떠나게 되었다.
인턴십 일정
인턴십 일정은 첫날은 오리엔테이션 느낌이었고, 2일차부터 제대로 된 인턴십이 시작되었다.
과정
1일차
- 이미지의 모습을 피그마로 구현하기
- html 작업 및 css 구현
먼저 피그마로 디자인을 짜면서 시작하였다.
첫 피그마 사용인데 얼레벌레 후다닥 주신 이미지와 비슷하게 만들었다.
시작이 반이니까...
피그마로 디자인을 만들긴 했는데 그 다음부터 어떻게 해야하는거지?
라는 생각이 들때 쯤 같이 간 선배가 피그마를 html로 변환하는 방법이 적힌 주소를 보내주었다.
https://bbibbi.tistory.com/m/71
근데 어... tailwind?
HTML 안에서, CSS 스타일을 만들 수 있게 해주는 CSS 프레임워크라고 한다.
나는 CSS 파일을 따로 만들 것이니 우리의 신 ChatGPT의 도움을 받아 코드를 분리했다.
그리고 이미지와 최대한 비슷하게 만들기 위해 나머지 디자인을 수정해보았다.
2일차
페이지를 반응형으로 만들라는 지시를 받았다.
반응형이 뭐였더라... 전에 공부한 내용을 되돌아보며 코드를 수정해나갔다.
같이 간 동기가 nav 파트를 맡고 나는 이미지 상 사람이 들어가는 부분(편의상 앞으로 메인이라고 칭함)을 수정하기로 했다.
3일차까지 수정을 완료하면 된다는 얘기를 듣고 여유롭게 진행하기로 결심하고,
일단 오늘의 목표를 정했다.
- 메인 파트 디자인 수정하기
- 깃헙에 코드 올리기
우선 가장 큰 수정 사항은 저 보기싫은 글자들과 끝자락을 너무 좋아하는 저 언니를 오른쪽 끝자락에서 떨어뜨리는 것이다.
일단 저 글자들의 태그를 분리하고 각각 CSS를 따로 적용하였다.
그리고 메인페이지 양 옆에 패딩을 주어 떨어뜨리는데 성공하였다.
3일차
반응형을 확인해 보는 법을 처음 알았다.
그저 단순히 창모드와 전체화면모드 정도만 생각했는데 개발자 도구에 들어가면 모든 기종의 화면에서 어떻게 보이는지 확인할 수 있었다.
어... 망했다. CSS 수정이 끝나지 않았다.
3일차 목표
- 화면이 줄어들면 이미지 파일을 사라지게 만들고 글자만 남겨두기
- 모든 기종에 맞게 CSS 작성하기
@media를 사용하여 기종들 페이지에 맞게 CSS가 변하도록 다시 다 수정해주었다.
...? 근데 내 파트를 아무리 수정해도 옆에 넓다란 공간이 사라지지 않았다.
어디서 문제인가 싶어 개발자 도구를 키고 하나하나 살펴보니 nav 부분의 a 태그로 작성된 부분이 문제였다.
페이지 내에서 보이지 않게 되면 요소 박스 자체가 사라져야 하는데 페이지가 줄어들었음에도 여전히 남아있는 것이 문제였다.
 |  |
|---|
코드를 이미지와 같이 수정하니 마치 언제 그랬냐는 듯 페이지가 화면에 딱 맞게 나타났다.
찾아보니 display:none 은 렌더 트리에서 아예 없어지고 visibility:hidden은 렌더 트리에 남아있으며, 사용자 눈에만 안보이게 되기 때문에 저렇게 되었던 것 같다.
찾고 나서 동기에게 말해주었던 그 뿌듯함은 아직 잊을수가 없다...ㅎㅎㅎ
그리고 이모저모 수정해가며 좀 더 깔끔하게 다듬었다.
4일차
하하 상사에게 컨펌을 받고 왜 다시해가는지 알았다.
내 눈에는 반응형으로 페이지가 크기에 맞게 수정되었을 때 사람의 이미지가 없는게 훨씬 깔끔해보여 제거했지만, 나의 상사 REX는 이게 별로였나보다!
그래서 또 다시 수정 작업에 들어갔다.
이미지를 넣으려니 또 밖으로 삐져나가는 현상이 발생했다.
그래서 콘솔을 켜 가장 작은 페이지 기준으로 맞추고 CSS를 수정하였다.
 |  |  |
|---|
페이지마다 약간의 차이가 있고, 패드에서는 그렇게 깔끔하지 않지만...
내가할 수 있는 선에서 최선을 다 했다.🥲
5일차 그 이후
여태 만든 CSS를 사용을 못한다는 소리를 들었다.
사유는 백엔드에서 글자와 이미지 모두 넘겨준다고 했다.
어... 일단 백엔드에서 무언가를 받아오는 작업이 처음이라 받아오는 코드를 작성하는 것만으로 벅차다는 생각과 함께 멘탈이 와장창 되기 시작했다.
CSS 적용은 후순위로 밀려났고 일단 받아오는 코드를 작성하기로 했다.
.
.
.
여차저차 백엔드에서 데이터를 받아와 3초 간격으로 사진을 변경하는 GPT의 도움을 받으며 코드를 완성하였다.
완성을 했다고 하긴 했지만, 사실 이해도도 떨어지고 어떻게 더 해야할지 모르겠는 상황에 봉착했다.
그상태로 남은 시간을 허비했다.
그러다 선배한테 무엇을 해야하는지 여쭤봤고, 리액트로 변환을 시켜야 한다는 답변을 받았다.
음... 리액트로 변환하는 것은 실패했다. JS코드를 제대로 알고 있지 못한 점이 제일 크게 작용한 것 같다.
그렇게 내 인턴십 일정은 끝이 났다.
마무리
누군가와 제대로 된 프로젝트를 진행하는 것은 이번이 처음이었다.
그만큼 부족한 점도 많았고 공부해야 할 것도 많았지만, 내가 배웠던 것을 활용할 수 있었던 소중한 기회였음에 다시 한 번 감사한 마음을 가진다.
물론 아직 확실하게 정해진 것이 없는 현재지만, 팀원들과의 소통 방법, 협력 등을 예습할 수 있었기에 이번 인턴십는 내 미래의 발판이 되어줄 것이다.
또한 ChatGPT에 의존하는 것은 실력 향상에 도움이 전혀 되지 않는 것을 또 한번 뼈저리게 느꼈다. 내가 내 코드를 알지 못하니 수정할 일이 생겼을 때 최악의 수로 작용한다. 그러니 의존이 아닌 활용으로 사용하자...
+
2주라는 시간동안 같이 작업하던 선배, 동기들 모두에게 감사한다.
그리고 가장 도움이 된 우리팀의 선배들에게 다시 한 번 감사한다는 인사를 드린다.
 |  |
|---|
다음 기회가 오기 전에 영어 공부는 필수로 해두자!!!!!!!!
