주간 업무 - 2023.14w
뼈대 공사 이야기
이번 챗 GPT와 관련한 개발 중
주니어 개발자분이 개발한 페이지가 있다.
코드를 살짝 봤는데
라이브 서버에 반영이 되어도 문제는 없겠지만
후에 유지보수를 할 경우 큰 일이 나겠다싶어
과장님께 억지로 밀어붙여 리팩토링을 진행중이다.
HTML - 문서의 정보를 담는 그릇
고운 옷을 입은 Apple의 홈페이지우리가 오늘날 보고있는 웹 페이지들은
텍스트 및 이미지로 구성되어 있는 문서들이다.
문서 자체가 텍스트와 이미지로만 구성되어있으므로
제공하는 컨텐츠의 구역을 좀 더 세밀하게 분할하고
폰트의 디자인을 바꾸거나 이미지의 크기를 조절하는 등의
사용자의 편의성이나 심미적 만족감을 제공하기 위해
CSS라는 언어를 이용해 문서를 꾸민 것이다.
벗어위에서 본 Apple 홈페이지의 CSS를 제거하면 이런식으로 표출이 된다.
편의성과 심미적 요소는 찾아볼 수 없지만
여전히 문서의 정보는 유지하고 있다.
Top to Bottom(1)
우리가 글을 쓴다 생각해보자.
좌우 방향은 문화권마다 다르겠지만
제일 위의 첫 줄부터 아래로 써내려 가게 될 것이다.
HTML의 코딩 방식도 같다.
문서의 정보를 위에서 아래로 써내려간다.
HTML은 문서의 정보를 감싸 브라우저 엔진이 읽을 수 있게 만드는 tag라는 개념이 있는데,
레이아웃으로 구분을 하면 block 요소와 inline 요소로 나뉜다.
block 요소는 수직으로 쌓이며 라인을 형성한다.
inline 요소는 수평으로 쌓이며 block으로 만들어진 라인의 내부를 채운다.(닉값 ㄷㄷ)
block으로 만들어진 라인의 내부가 다 차게 되면
새로운 block 요소를 만들어 다시 inline 요소를 채운다.
이렇게 보면 HTML 코딩은
하나의 글을 쓰는 과정과 같은 맥락이다.
Top to Bottom(2)
이번 챗 GPT 관련 개발에서 내가 본 문제점은
위의 3개의 이미지는 초기화면인데
회색 말풍선이 AI가 제공하는 오늘의 질문 영역이고
노란색 말풍선이 사용자의 액션이 들어가는 영역이다.
사용자가 오늘의 질문에 대한 답변을 submit 할 경우
AI로부터 수정받은 답변 리스트를 받게 되는데
최초에는 AI가 수정해 준 답변을 표출하고
사용자가 원할 경우 자세한 설명 보기 버튼을 눌러
수정에 대한 이유를 볼 수 있게 표출해준다.
자세한 설명 보기 버튼을 누르던
설명은 괜찮아 버튼을 누르던
마지막에는 '대화가 종료되었습니다.' 라인을 표출 후
나가기 버튼까지 표출한다.
페이지의 위부터 아래까지 잘 짜여져 있기 때문에
그야말로 이해하기 쉬운 기획과 디자인이다.
난이도가 굉장히 쉬운 마크업인 것이다.
그러나 주니어 개발자분의 문제는
위에서 아래로 어떻게 써내려갈지 고민하는 단계가 아니었고
이미 기괴하게 나누어버린 마크업이 문제였다.
다른 사고방식을 이해해보려 해도
vue.js를 이용한 HTML 마크업이다보니 vue.js에 익숙하지 않은 사람은 보기 어려울 수 있다주니어 개발자분의 코드를 보면
데이터의 반복이 이루어지는 구간에
AI 채팅, 학습자 채팅, 대화 종료 채팅(메세지)가 있고
후에 나가기 버튼이 구성되어있다.
그만 보고 싶다첫번째 섹션의 AI 채팅 영역을 보자마자 경악했다.
첫번째 말풍선이라고 쓴 부분은 AI 첫번째 질문 전체를 지칭하는 게 아닌
AI 첫번째 질문에 대한 한글 번역을 지칭하는 것이었다.
그 후에 두번째 말풍선도 없이 이어지는 세번째 말풍선은
사용자가 답변을 submit한 후 AI가 수정해준 답변이었다.
주니어 개발자분이 글을 읽을 때 어떤 방법으로 읽는 지 궁금해지기 시작했지만
당장은 저 마크업만 봐도 머리에 피가 쏠렸다.
또 하나의 문제가 더 있었는데
vue.js는 페이지에 쓰이는 데이터를 HTML에 바로 바인딩 할 수 있다.
주니어 개발자분이 페이지에 쓰일 데이터를 저 마크업을 위해 가공을 해버렸고
필요없는 필드를 새로 만들거나
굳이 필드로 묶어 관리할 필요가 없는 데이터를 필드로 묶어 관리하거나
의미가 불분명한 필드에 아무 데이터를 다 집어넣었다.
나를 빼더라도 미래의 어떤 개발자가 이 페이지를 수정할 생각을 하니
눈 앞이 아득해지는 코딩에 나는 칼을 빼들었다.
'과장님 이거 나중에 유지보수하면 맡은 사람 죽슴다...'
멀리 돌아갈 필요 없이
이대로만 된다고 하더라도 정말 다행이겠다데이터들이 엮여있어 함부로 건들지는 못하겠고
기술검토에 들어간 후 간단한 슈도 코드(Pseudo-code)를 짜보았다.
데이터도 주니어 개발자분이 가공하기 전 상태를 보니
굳이 한 Object에서 모든 걸 관리할 필요도 없겠어서
데이터 가공 프로세스도 다시 만질 예정이다.
왜 이렇게까지 매달리냐면
지금 2차 개발로 대화 종료 메세지 영역과 나가기 버튼 사이에
새로운 컨텐츠의 영역이 생기는데
어디다 어떻게 넣어야할지 막막해져서(그 미래의 개발자가 나였다니...)
결국 다 뜯어버리게 되었다는 14w의 이야기이다.
