<고찰>

[hanasol]

QnA Page, displayWaitingQuestion 함수에서 appendChild를 사용하고 removeChild를 호출해서 자식 노드를 삭제하려고 했으나 답변이 완료된 질문이 로컬에 제대로 저장되지 않음 --> 디버깅 결과 appendChild 함수는 기존 부모에서 자동으로 제거되어서 removeChild를 호출하면 삭제할 자식 노드가 존재하지 않아서 에러가 발생함을 발견 --> removeChild 함수를 없애니까 제대로 작동함

[kimdw0528]

자료집- 기존 알고리즘에서는 특정 자료로 넘어가고 다시 뒤로가기를 했을 때 새로운 화면을 띄우는 방식으로 작동했었음, 초기 화면과 뒤로가기 화면을 두 번 변경해야 제대로 변경됐었음
->처음 화면을 저장하고 뒤로가기를 누르면 처음 화면을 띄우게 변경

[woojin-choe]

자료집 초기 설계 문제점
기존 알고리즘에서는 특정 자료를 클릭했을 때 새로운 화면이 별도의 탭에서 열리도록 설계되어 있었다. 이러한 방식은 사용자가 '뒤로 가기' 버튼을 눌렀을 때 초기 화면으로 바로 돌아가지 않고, 새로 생성된 페이지가 따로 표시되는 비효율적인 문제가 있었다.
이로 인해 사용자가 자료를 확인한 후 초기 화면으로 돌아가기 위해 두 번의 페이지 전환을 해야 하는 번거로움이 있었다. 이러한 구조는 간단한 자료 탐색에서도 불필요한 클릭을 유발하며, 사용자 경험(UX)을 저해하는 결과를 초래하였다.

기능 개선: 단일 페이지에서 동적 콘텐츠 로드
처음 화면을 동적으로 저장해두고, 사용자가 특정 자료를 선택한 후 '뒤로 가기'를 누르면 초기 화면이 바로 로드되도록 설계를 변경하였다. 이를 위해 HTML과 JavaScript를 활용하여 동적 콘텐츠 로드 방식을 구현하였다.
각 자료 항목에 클릭 이벤트를 연결하여 필요한 콘텐츠만 동적으로 삽입하고, '뒤로 가기' 버튼을 클릭했을 때 저장된 초기 화면이 다시 표시되도록 설정하였다. 이 방식은 페이지 전환 없이도 부드럽게 콘텐츠를 교체할 수 있도록 개선되었으며, 새로운 탭을 열지 않아도 원하는 자료를 확인할 수 있도록 개선되었다.

로고 활용
브라우저 탭에 표시되는 기본 파비콘을 광운대학교 로고로 변경하여 학과의 정체성을 강화하였다.
로고 이미지를 .ico 형식으로 변환한 후, 태그를 사용해 브라우저에 적용하였다. 이를 통해 사용자들이 웹페이지를 탐색하면서 학과의 소속감을 느낄 수 있도록 하였다.

반응형 웹 구현
레이아웃을 플렉스박스 기반으로 설계하여 데스크톱과 모바일 환경에서도 자연스럽게 표시되도록 개선하였다.
헤더와 푸터는 화면 크기에 따라 적절히 조정되도록 설정하였으며, 모든 콘텐츠가 중앙 정렬되도록 디자인을 최적화하였다. 이를 통해 다양한 디바이스에서도 일관된 사용자 경험을 제공할 수 있도록 하였다.

네비게이션 구조 및 디자인 개선
초기 네비게이션은 모든 링크가 항상 고정된 상태로 상단에 표시되어, 시각적으로 혼잡한 느낌을 주었다.
이를 개선하기 위해 네비게이션 메뉴를 기본적으로 숨기고, 사용자가 마우스를 헤더 영역에 올렸을 때만 표시되도록 변경하였다.
CSS의 hover 이벤트를 활용하여, 기본 상태에서는 display: none으로 숨겨진 메뉴가 header:hover 시 display: flex로 나타나도록 설정하였다.
이 방식은 화면 상단을 간결하게 유지하면서도 사용자가 필요할 때 직관적으로 메뉴를 접근할 수 있도록 개선되었다.

탭 동작 개선
기존에는 자료를 클릭하면 새로운 탭에서 해당 화면이 열리는 방식이었다. 이는 브라우저 내 불필요한 탭을 다수 열리게 만들어 사용성을 떨어뜨리는 원인이 되었다.
이러한 문제를 해결하기 위해 모든 링크에서 target="_blank" 속성을 제거하여 클릭 시 같은 탭에서 페이지가 전환되도록 수정하였다. 이를 통해 페이지의 흐름이 자연스럽게 유지되며, 사용자가 브라우저 내에서 더욱 효율적으로 탐색할 수 있도록 개선되었다.

푸터 고정
기존 푸터는 화면 내용의 길이에 따라 위치가 달라지는 구조였다. 짧은 내용의 페이지에서는 푸터가 화면 중간에 떠 있는 문제가 있었다.
이 문제를 해결하기 위해 CSS의 position: fixed 속성을 활용하여 푸터를 항상 화면 하단에 고정하였다.
이를 통해 푸터가 페이지 내용과 관계없이 일정한 위치에 배치되며, 디자인과 기능의 일관성을 유지할 수 있도록 하였다.

[kh-woo]

1. Footer와 배너 정렬의 어려움
   Footer와 배너는 웹페이지에서 사용자의 시선을 끌거나 중요한 정보를 전달하는 역할을 합니다. 하지만 이 두 요소를 서로 맞추는 작업은 단순히 CSS로 해결되지 않는 경우가 많았습니다. 특히, Footer의 위치를 화면 크기에 관계없이 항상 페이지 하단에 고정시키려다 보니 레이아웃 전체가 틀어지는 문제가 발생했습니다. 배너는 가변적인 이미지나 텍스트 크기로 인해 페이지 레이아웃과 충돌하는 경우가 많아 이를 고정 비율로 설정하거나 반응형으로 수정해야 했습니다. 다양한 해상도에서 테스트하며 위치와 크기를 조정하는 데 상당한 시간이 소요되었습니다.

해결 노력:
CSS의 flexbox와 grid 레이아웃을 활용해 Footer와 배너를 정렬하고, 각각의 크기를 비율에 맞게 설정했습니다.
반응형 디자인(Media Query)을 추가하여 화면 크기에 따라 크기와 간격이 동적으로 조정되도록 설계했습니다.

2. 사이드바와 Footer의 충돌 문제
   사이드바는 페이지 좌측에 숨겨진 상태로 있다가 사용자가 마우스를 가져다 대면 나타나는 동적인 기능을 갖습니다. 그러나 이 사이드바가 등장했을 때 Footer가 의도치 않게 가려지거나 사이드바의 일부가 Footer 위에 나타나는 문제가 발생했습니다. 특히, 콘텐츠가 적은 페이지에서는 사이드바가 페이지 높이를 넘어서는 경우도 있었습니다.

해결 노력:
사이드바의 높이를 100vh로 고정하여 항상 화면 높이에 맞도록 설정했습니다.
Footer와의 간섭을 줄이기 위해 z-index를 조정하고, 사이드바가 등장했을 때 콘텐츠의 레이아웃이 자연스럽게 밀리도록 애니메이션 효과를 추가했습니다.
스크롤 가능한 긴 페이지에서도 사이드바가 제대로 동작하도록 overflow-y: auto 속성을 추가했습니다.

3. 조직도를 트리 구조로 구현하려는 시도와 실패
   조직도를 BST(Binary Search Tree) 형태로 구성해 클릭 시 각 노드가 확장되도록 설계하려 했습니다. 그러나 트리 노드 간의 연결 선을 CSS로 구현하려 하니 각 노드의 위치와 선이 어긋나는 문제가 발생했습니다. 특히, 브라우저 크기가 변경될 때 노드의 위치가 동적으로 변화하여 선이 정확히 연결되지 않는 경우가 많았습니다.

해결 노력:
트리 구조를 포기하고 대신 블록형 조직도로 변경하였습니다.
각 부서를 정렬된 리스트 형태로 표시하고, 클릭 시 해당 부서의 모든 부원 정보를 표시하도록 UI를 단순화했습니다.

4. 검색 기능의 한계
   초기에는 검색 기능을 모든 페이지의 모든 단어를 대상으로 수행하려 했습니다. 그러나 페이지 내 텍스트를 데이터베이스화하지 않고 단순히 DOM에서 검색하려 하니 검색 속도가 느리고 정확성이 떨어졌습니다. 또한, 페이지가 많아질수록 이 방식은 비효율적이라고 판단되었습니다.

해결 노력:
모든 페이지의 단어를 검색하는 대신, 특정 페이지로 이동할 수 있는 기능으로 축소했습니다.

5. Main Page CSS의 재사용성 향상
   Main Page의 디자인과 기능은 다른 페이지에서도 반복적으로 사용됩니다. 이를 위해 초기부터 CSS와 JavaScript 코드를 컴포넌트 기반으로 설계하려 했습니다. 그러나 CSS 클래스의 이름이 직관적이지 못하거나 특정 페이지에 종속된 코드가 많아지면서, 재사용성이 떨어지는 문제가 발생했습니다.

해결 노력:
공통적으로 사용되는 CSS는 별도의 파일로 분리하여 동료들이 잘 사용할 수 있도록 하였습니다.

[hanasol]

PlanManager 페이지는 부트스트랩 때문인지 똑같은 css 코드를 적용해도 다르게 적용돼서 PlanManager css만 다르게 수정