[스나이퍼팩토리] 한컴 AI아카데미 4기 프로젝트 2주차

2주 차에 와선 정말 시간이 이렇게 빨리 갈 수 있구나 하고 느끼고 있습니다.

지난주에 1. 목표정하기.  2. 기획안 작성.  3. 자료조사를 거쳐 요번 주는 눈에 보이는  화면 구성으로 넘어가게 되었습니다.

처음으로 회의한것은 기획에 맞는 화면 구성이었습니다.

각자 생각한 것을 구현화하여 다시 종합하고 회의를 거쳐 최종안을 만들고 그 최종안의 목업 작업을 시작하였습니다.

시중에 나와있는 ai 프로그램을 이용하여 원하는 방향을 만들어 최종안을 만들기까지 시간 가는 줄 모르고 작업했네요.

---

1. 기획안 통합하기

각자 완성한 기획안을 통합하여 최종 기획안을 작성하였습니다.

 

2.  각자 목표에 맞는 파일 트리 작성해 보기

먼저 기획안으로 notebooklm을 활용하여 전체적인 마인드 맵을 해 보았습니다.

 

 

 

기획안에 맞춰 모든 요소를 넣다 보니 난잡해져서 한국인답게 다시 제작해 보았습니다.

 

 

3. 마인드 맵을 이용한 각자의 웹 페이지 작성 해보기

피그마를 활용한 목업 만들기를 해 보았습니다.

홈 페이지 예시 (1).pdf

0.37MB

 

 

다음으로 바이브코딩으로 간단하게 화면을 만들어 보았습니다.

 

o_index.html

0.04MB

 

4. 화면 구성 정하기

모든 팀원들의 목업을 합하여 좋은 점은 넣고 불필여한점은 빼고 하여 최종안을 정했습니다.

  들어갈 구성으론.

1. 매인화면의 간소화.

2. 사이드 바의 필요성.

3. 질의 챗봇의 구성 .

4. 협업을 위한 팝업 창.

5. 협업의 채팅구성.

6. 문서의 보관.

7. 로그인의 간소화  등이 부각되어 화면 구성을 완성하였습니다. 

다시 이 화면을 목업으로 만들었습니다.

 

5. 파일 트리 작업

최종 목업으로 간단한 파일트리 작업을 해 보았습니다.

6. 코드 구성 하기

 얼추 파일트리가 완성되어 각자 코딩에 돌입했습니다

먼저 제가 하게 된 작업은 메인의 HTML 작업이었습니다. 팀원들이 각자 맡은 것이 달라 각자 코드도 짜보고 다시 통합하자는 의견이 있어 그쪽으로 방향을 잡았습니다 요즘은  딸깍 코드 시대라 프롬프트만 잘 만들면 코드 구성이나 오류 찾기는 어렵지 않았고, 주석을 다는 것 마저 편해 어디에 무슨 코드가 들어가고 어떻게 연결이 되는지 일목요연하게 확인할 수 있어 좋았습니다.

 

html, css, js를 나누어 작성하고, 나중에 연결할 db 폴더를 만드는 것으로 요번 주를 마무리했습니다.

이것도 나름 시간이 엄청 잘 거더군요. 

아직 팀원들과 합쳐진 메인은 아니니 다음 주가 은근히 기다려집니다.

 

 

 

 

 

 

 

후기는 [한글과 컴퓨터 x한국생산성본부 x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성되었습니다.

#한컴 AI아카데미 #AI개발자 #AI개발자교육 #한글과 컴퓨터 #한국생산성 본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업