pm5

News

피엠파이브의 새로운 소식을 알려드립니다.

기술에 감성을 더한 소프트웨어로 창의적이고 혁신적인 문화를 만들어가는
피엠파이브의 진솔한 이야기를 전합니다.

칼럼

[APP STORY] 반응형 홈페이지 만들 때 점검할 점
2020-06-25 오전 9:45:00

회사 홈페이지나 웹 사이트 개발에 대해 관심이 많은 분은 이번 포스팅에 주목해주세요. 오늘은 반응형 홈페이지 제작 시 점검할 점에 대해 알려드립니다. 반응형 홈페이지란 사용자의 화면 크기에 반응하는 홈페이지를 의미합니다. 홈페이지의 크기가 사용자 화면 크기에 따라 달라지다 보니 많이 사용하는 추세입니다. 홈페이지를 원하는 구상대로 만들기 위해서는 다양한 항목을 점검해야 하는데요. 아래의 사항을 통해 더 자세하게 알아봅시다.

1. 디자인

클릭을 하시면 실제 이미지 크기로 보실 수 있습니다.

홈페이지에 들어가자마자 보이는 건 바로 디자인이죠. 고퀄리티로 꾸밀수록 신뢰감이 들고, 사용자의 편의성이 좋답니다. 디자인에 대해서 알아볼 때는 디자인 컨셉이 사이트 목적에 부합하는지, 중요한 요소들은 눈에 잘 띄는지, 색상과 볼륨감은 잘 어울리는지, 테마가 되는 색상이 정해져 잇고 일관되게 적용되는지, 링크가 걸린 텍스트가 밑줄이나 색상 등 외형적으로 강조되는지, 텍스트의 가독성이 충분히 확보되는지 등 여러 부분을 살펴보아야 합니다.


2. 개발(프로그래밍)


클릭을 하시면 실제 이미지 크기로 보실 수 있습니다.

정보 전달 위주인지, 서비스 위주인지에 따라 개발 여부, 개발 규모가 결정됩니다. 단순한 홈페이지를 만들건지, 기능이 많은 홈페이지를 만들고 싶은지에 따라 예산도 달라지기에 기존에 있는 다양한 사이트를 참고하여 미리 계획해보시는 걸 추천해 드려요.


3. 네비게이션 & UI(User Interface)


클릭을 하시면 실제 이미지 크기로 보실 수 있습니다.


네비게이션과 UI는 사용자의 편의성에 기초하여 확인해야 합니다.

다른 화면으로 이동이 쉬워야 하고, 필요한 정보를 바로 찾을 수 있어야 합니다.

명확한 메뉴명의 의미, 직관적이고 논리적인 네비게이션 구조, 카테고리 구조 등 다양한 목록을 체크해야합니다.


4. 메인화면(index page)

클릭을 하시면 실제 이미지 크기로 보실 수 있습니다.

메인 화면은 사이트 내용을 간결하게 보여주는 것이 좋습니다. 복잡하면 가독성이 떨어지고, 지저분해 보이기 때문입니다.

따라서, 메세지를 시각적으로 명확하게 전달하는 것이 중요합니다. 방문 목적에 따라 항목들을 다양하게 구성하는 것도 좋습니다.

상담전화 번호, 이벤트 안내 등 사용자가 쓰기 편하도록 아이콘로 표시하면 좋겠죠?


5. 검색엔진최적화(SEO, Search Engine Optimization)

클릭을 하시면 실제 이미지 크기로 보실 수 있습니다.

검색엔진최적화는 콘텐츠의 질을 높이고 웹페이지를 부지런히 알리는 역할을 합니다. 제작 후에 SEO를 진행하면 사이트 구조 자체를 변경해야 할 수도 있어야 합니다.


6. 크로스 브라우저, 크로스 디바이스 – 호환성

클릭을 하시면 실제 이미지 크기로 보실 수 있습니다.

어떤 환경에서 접속하더라도 화면이 깨지거나 UI 편의성, 기능요소들이 나빠지지 않도록 해야 합니다. 화면 레이아웃이 깨지지 않는지, 글자가 너무 크거나 작지 않은지, UI(User Interface)가 편의성을 제공하는지, 기능요소(게시판, 입력폼)가 제대로 기능하는지, 이미지, 동영상이 제대로 로드되지 않을 때 대체요소가 사용되고 있는지 등 여러 가지를 체크해야 합니다.