[스틸스] 최종 결과물 및 기능 소개

 

 

[프로젝트 개요]

 

 

• [프로젝트 주제] : 디지털 약자를 위한 큰 글자 브랜딩 사이트
• [진행 기간] : 2024.03.08 ~ 2024.03.23
• [개발 인원] : 3인 (본인 포함)
• [팀명] : 스틸스

 

 

[주제 선정 배경]

 

 

• 과학기술정보통신부의 '2022 디지털정보격차 실태조사'를 살펴보면, 65살 이상 고령층의 디지털 정보화 역량 수준은 평균과 비교했을 때 절반 수준인 54.5%에 그침

디지털 기술이 가속화되면서 일상은 편리해졌으나, 고령층 등 신문물에 약한 디지털 약자가 새로운 난제로 떠오르고 있음을 확인했다.

디지털 격차 해소는 반드시 필요한 중요한 문제이며, 기존의 쇼핑몰을 이용할 때 작은 글씨와 복잡한 절차에 불편함을 느껴 디지털 약자를 타겟층으로 쇼핑몰 구성을 간소화하고, 브랜드 마켓팅을 목표로 큰 글자 브랜딩 사이트를 구현했다.

 

• 소재 선정 이유 : 주제에 맞게 연령, 성별을 가리지 않고 누구나 관심을 가지고 구매할 수 있는 '가구'를 소개 상품으로 선정했다. 그 중에서도 일반적으로 보기 어려운 제품을 소개하기 위해 '철제 가구'를 주 소재로 선택하게 되었다.

 

 

[개발 환경 및 역할]

 

 

1. 개발 환경

개발 언어	HTML, CSS, JavaScript
Tools	Figma, Notion, vscode, git, github
배포 환경	node.js, netlify

 

 

2. 역할

 

• 공통 : 기획, 디자인, 프론트엔드 개발
• 개인 : 메인 브랜드, button & badge, 배너, header, 구매페이지 컴포넌트 제작, 애니메이션 및 css 적용

 

 

[프로토타입 및 사이트 맵]

 

 

1. 프로토타입

 

프로토타입 제작

 

 

• Figma 이용해서 웹 사이트 디자인 및 화면 기획 프로토 타입 제작
• 프로토 타입 활용해 웹사이트 크기 및 반응형 css 조정
• 제작할 컴포넌트 구조화 및 기능 설정

 

 

2. 사이트 맵

 

사이트 맵

 

 

 

[프로젝트 주요기능]

 

 

1. 로그인, 회원가입, 검색 기능 : javascript로 쿼리를 선택해 로그인을 확인하고, 클릭이벤트 지정

2. 요소 확대 기능 : hover, transition, transform 등 css를 적용해 이미지와 글자 확대

3. 제품 구매 간소화 : 상품 정보 -> 구매 버튼 -> 구매 페이지 -> 정보 입력 -> 주문 완료 순서로 불필요한 구매 단계 간소화

4. 상품 정보 이미지 슬라이더 : modal swiper를 활용해 정보를 한 페이지에서 확인할 수 있도록 이미지 슬라이더 제작

5. 음성 인식 및 이미지 저장 기능 : 디지털 약자를 타겟층으로 도움이 될 수 있는 기능 추가. 기능 구현은 백엔드 기술이 필요하기 때문에 이번 프로젝트에서는 구현하지 않음.

• 음성 인식 : 검색을 어려워하는 디지털 약자를 위해 음성인식으로 쉽게 상품 검색이 가능하도록 하는 기능을 기획
• 이미지 저장 : 모바일이나 웹 모두 확대가 어려우면 정보 확인이 힘들 수 있기 때문에 이미지를 저장해서 자유롭게 정보를 확인할 수 있도록 하는 기능 기획

6. 고객 지원 기능 : 온라인으로 문의 내용을 작성해서 보내는 것이 일반적으로 쉬울 수 있으나, 디지털 약자에게는 복잡한 과정일 수 있으므로 회사 이메일과 전화번호를 먼저 기재해 직접적인 문의도 가능

7. 반응형 웹 : 웹뿐만 아니라 모바일에서도 사이트를 보기 편하도록 animation, media 쿼리 등을 활용해 반응형으로 웹 제작

 

 

 

[문제 해결]

 

 

문제 발견	문제 해결
헤더 컴포넌트 토글 작동 x	새로운 메뉴 div 생성 후 toggle script 적용, display:none 활용해 반응형 네비게이션 완성
로그인, 장바구니, 검색 창 모바일에 적용 x	모바일 메뉴 아이콘에 새로운 id 부여 후 javascript 코드에서 id를 읽어와 click 이벤트 정의
배포 페이지 이미지 경로 오류	script에 정의된 동적인 경로가 인식되지 않는다 판단해 html 코드에 정적이 경로로 다시 정의, display:none, display:block 활용해 이미지 경로 수정
배포 페이지 script 오류	배포 페이지에서 실행해야 할 script 코드를 정확히 찾지 못한다 판단, script 코드 위치를 html 코드 밑으로 옮김

 

 

이외에도  많은 오류들이 있었지만 개발자 도구와 코드를 분석해 모든 오류를 해결하고 사이트 배포까지 완료할 수 있었다.

 

오류가 발생하면 콘솔의 에러메시지를 분석할 수 있게 되었고, 경로 오류, 정의되지 않은 오류, 링크 불러오지 못한 오류 등 다양한 오류를 스스로 해결해볼 수 있었다.

 

 

 

[최종 결과물 기능 소개]

 

 

 

최종 결과물은 사이트를 배포했기 때문에 시연 영상 없이 배포 링크를 올려두도록 하겠다.

 

직접 확인할 수 있어 프로젝트를 이해하기 좀 더 쉬울 것이라 생각한다.

다시 한번 적어두자면 이 프로젝트는 프론트엔드 프로젝트로 사이트의 기능들은 작동하지 않을 수 있다.

 

https://main--steels.netlify.app/

스틸스

 

 

 

로그인, 회원가입, 검색, 장바구니

 

 

먼저 로그인, 회원가입, 검색, 장바구니 기능은 사이트에 있어야할 가장 기본적인 사용자 인터페이스 기능이다.

 

사이트 목적이 디지털 약자를 위한 것인만큼 다른 창으로 넘어가거나 하지않고, 단계를 간소화해 팝업창으로 띄웠다.

대신 눈에 잘 보일 수 있게끔 팝업창 백그라운드를 블러처리해 팝업창에 집중될 수 있도록 했다.

 

 

 

핵심 기능 3가지

 

 

1️⃣ 반응형 웹 : media 쿼리를 이용해 768px를 기준으로 웹 화면과 모바일 화면의 레이아웃을 설정했다. 모든 글자와 이미지를을 최대한 크게 볼 수 있도록 레이아웃을 구성했고, 많은 스크롤 없이 한눈에 정보를 볼 수 있도록 하는 데 신경을 썼다.

 

2️⃣ 제품 구매 단계 간소화 : 상품 페이지에서 원하는 상품 클릭 => 상품 상세 정보 팝업창으로 확인 가능 => 제품 구매 버튼 => 구매 페이지 이동

 

3️⃣ 요소 확대 : 브랜딩 사이트의 핵심 목표이자 기능이다. 마우스를 hover할 시 요소가 확대되며, transition, transform, animation등을 활용해 자연스럽게 확대되도록 했다. 또한 너무 정신사납지 않게 transition에 delay를 주어 천천히 변화하도록 해주었다.

 

 

기타 기능

 

 

 

고객 지원 페이지를 따로 만들어 사용자가 문의할 수 있도록 했고, 인터넷으로 글 작성하는 것을 어려워하는 디지털 약자를 위해 회사정보를 먼저 명시해둠으로써 직접 문의도 가능하도록 했다.

 

또한 음성 검색 기능을 사용자 인터페이스로 구현해 프로젝트의 목적을 명확히 하는 아이디어도 추가했다.

음성 검색은 뱃지로 구현해 모바일이든 웹 화면이든 항상 화면에 보이도록 해 사용자가 기능을 쉽게 인식하고 사용할 수 있게 했다.

 

 

 

[최종 결과물 요약 및 기대효과]

 

 

디지털 약자가 상품 정보를 쉽게 확인하고 구매할 수 있는 브랜딩 사이트를 개발했다.

 

 

1. 기대 효과

 

1️⃣ 디지털 약자도 인터넷에서 큰 글자와 이미지로 상품 정보를 명확히 확인하고, 원하는 상품을 간편하게 주문할 수 있어 고객의 편의성이 증가할 것으로 기대된다.

 

2️⃣ 사용자는 음성 검색을 통해 원하는 상품을 검색하기 쉬워질 것으로 예상된다. 기능은 추가적으로 구현해야하겠지만, 음성 검색 기능은 디지털 약자의 쇼핑몰 활용에 대한 진입장벽을 낮추고, 디지털 격차를 줄일 수 있을 것이라 예상된다. 또한 사용자의 신뢰와 만족감 또한 증가시킬 것으로 기대된다.

 

 

 

🔔 [소감 및 배운점]

 

 

프론트엔드로만 사이트를 구현해보는 프로젝트였지만, 코드의 구조를 생각하고, 화면에 요소들을 어떻게 배치할지 고민하면서 프론트엔드 개발에서 중요하다고 느꼈던 부분을 경험해볼 수 있어서 의미있는 프로젝트였다.

 

처음에는 프론트엔드만 구현하는 것이니 접할 수 있는 오류가 많지 않을 것이라고 예상했다.

그러나, 전혀아니었다.

 

 

코드를 작성하는 것에서 끝나지 않고, 로컬 라이브 환경에서 확인하고, 로컬에서 build하고, 배포하기까지 환경이 매우 다양하고 같은 코드라도 적용되는 기준이나 방법이 다르기 때문에 정말 많은 오류를 마주할 수 있었다.

오류를 해결하는 데 프로젝트 기간 중 정말 많은 시간이 들고, 마음대로 해결되지 않아 힘들 때도 있었다.

그러나 콘솔창의 에러메세지를 분석하고, 코드 작성이 틀린 부분을 찾으며 하나씩 오류를 해결해나갈 때 느껴지는 쾌감과 뿌듯함은 어떤 경험과도 바꿀 수 없을 것 같다고 느꼈다.

 

스스로 해결이 안되는 문제는 구글 검색이나 리더님의 조언을 통해 다시 스스로 오류를 해결할 수 있었고, 문제의 원인에 대해 다음엔 같은 실수를 하지 않도록 학습할 수 있었다.

오류가 발생해도 실행이 안된다는 두려움과 코드를 수정했을 때 동작이 안될 것이라는 걱정을 떨쳐내고, 차분히 코드를 다시 생각할 수 있게되었다.

 

 

특히, build와 배포를 하는 과정에서 발생한 오류는 이전까지는 확인할 수 없었던 문제였기에 조금은 당황했었다.

다행히 코드 작성을 완료하고, 배포를 할 수 있는 시간이 남아있었기에 배포 과정에서 생긴 오류도 해결하고 링크를 배포할 수 있었다.

 

프로젝트의 팀장으로서 개발 수행 기간과 진행 과정을 효율적으로 관리하기 위해 매일매일 팀원분들께 연락도 드리고, 노션을 통해 실시간으로 과정을 업데이트하며 상황 공유를 중요시 했다.

조금은 힘든 과정이었을 수도 있지만, 감사하게도 팀원분들도 잘 따라와 주셨기 때문에 마지막 배포 오류도 해결할 수 있는 여유가 있었다고 본다.

 

 

배포까지 완료 후 발표를 하면서 큐알코드와 배포 링크를 통해 발표를 들어주시는 분들도 개인의 전자기기로 페이지를 확인할 수 있도록 했다.

정적으로 설명만 하기보다 직접 확인하면서 발표에 집중하면 좀 더 흥미롭게 발표를 들으실 수 있을 것이라 생각했기 때문이다.

 

 

결과적으로 발표는 아쉬움이 없다면 거짓말이겠지만, 준비했던만큼은 다 보여줄 수 있었다고 생각한다.

최종적으로 이번 프로젝트에서 '1차 프로젝트였는데도 생각보다 완성도 높은 결과물이 나온 것 같다.', '발표도 조화롭게 분배해서 잘 해줬다.', '팀장으로서 역할을 잘 한 것 같다. 팀원들의 만족도도 높고 진행 과정도 매끄러웠다.'는 피드백을 받았으며, '대상'이라는 결과를 얻을 수 있었다.

대략 2주간의 프로젝트 개발 과정이 힘들기도 했지만 헛되지 않았음을 느꼈고, 매우 뿌듯했다.

 

 

개발은 학습과 분석의 연속이라고 생각한다.

끊임없이 효율적인 코드를 작성하기 위해 새로운 시각을 배우고, 참고하고 학습하며 발전해나가고, 오류에 두려워하지 않고 코드를 분석해가면 분명히 프로젝트를 완성시킬 수 있을 것이라고 느꼈다.

 

 

 

마지막으로 프로젝트를 진행한 깃허브 주소와 대상 결과를 올리면서 글을 마치겠다.
https://github.com/BB545/1st_project_codingonWeb12th