JOB 홈페이지 시스템 22개의 글

안녕하세요.

정부 인증의 맞춤형 웹 개발 전문 에이전시

잡오브브라더스 블로그에 오신것을 환영합니다.

오늘 잡오브브라더스 에서는

웹사이트나 웹 어플리케이션의 사용자들에게

쉽고 효과적으로 상호작용하며

만족스러운 경험을 제공할 수 있도록 구축한

' UXUI 디자인 서비스 ' 의 핵심 내용에 대해

소개해드리려고 합니다.

UXUI 디자인이란?

사용자 경험(User Experience, UX)과

사용자 인터페이스(User Interface, UI)의 줄임말로,

사용자들이 제품이나 서비스를 사용할 때 느끼는

전반적인 경험을 디자인 하는 것을 의미하며

개발 프로세스의 핵심 부분이라 말할 수 있습니다.

UXUI 디자인은 사용자들이

제품을 쉽게 이해하고 사용함으로써

만족도 높은 경험을 얻게 되고

원하는 목표를 달성하는 데 도움을 주기 때문에

저희 잡오브브라더스 디자이너들은

이 핵심적인 요소를 놓치지 않고

사용자의 관점에서 생각하고 바라보며

지속적으로 피드백을 수집하고 개선하여

최적의 웹환경을 제공 합니다.

잡오브브라더스의 UX기획/디자인 도입

저희쪽으로 문의 주시는 고객님들 대부분

신규 서비스 개발 및 기획 초기 단계 에

연락을 주시는 편입니다.

잡오브브라더스 UX팀 은

초기부터 UX기획/디자인 도입 을

아래와 같이 단계적으로 계획하여

작업을 진행하고있습니다.

▼

<아이디어 정의>

아이디어를 명확하게 정의하고

타깃이 되는 사용자를 식별합니다.

▼

<사용자 요구사항 정의>

타깃 사용자의 요구사항을 자세히 파악하고

문제 해결을 위한 아이디어를 수립합니다.

▼

<정보 구조 설계>

서비스의 구조와 사용자 경로를 설계하며

사용자가 어떻게 서비스를 탐색하고 상호작용할지

고려합니다.

▼

<시각적 디자인>

화면 요소, 레이아웃, 컬러 등을 디자인하여

사용자가 시각적으로 쉽게 이해하고

상호작용할 수 있도록 합니다.

잡오브브라더스의 UX기획을 바탕으로한 UI 디자인

UX단계에서는 특정 제품, 서비스와 관련하여

대상 사용자들의 니즈가 무엇인지

광범위한 조사가 진행됩니다.

이후 사용자의 전체 여정을 고려한 콘텐츠를 위해

레이블이 지정되는 정보 아키텍처를 구성하여

기본 청사진을 설정하는 와이어프레임을 바탕으로

UI 디자인을 진행 합니다.

▼

각각의 개별 화면과 터치포인트를 포함하여

사용자가 접할 수 있는

모든 시각적 측면을 고려 합니다.

버튼, 탭, 페이지 위 아래로 스크롤

이미지 갤러리를 통해 스와이프 등의

비주얼적인 요소 뿐만 아니라

서비스가 접근 가능하고 포괄적인지 까지 고려하며

영향을 주고받는 관계를 정립 합니다.

▼

진행한 디자인 시안을 바탕으로 개발자와 소통 하며

해당 디자인이 실제 구현되면서

목표한 역할을 잘 할 수 있을지

세세하게 분석하고 결정 을 진행합니다.

잡오브브라더스 는 국내 여러 기업과 협업을 통해

UX프로세스를 구축하고 있으며

이를 바탕으로 피그마를 사용해 깔끔하게 정리된

UI GUI 디자인을 제작 하여

효율적이고 편리한 결과물을 제공할 수 있도록

늘 연구하고 있습니다.

UXUI 신규 구축 및 개선을 필요로 하신다면

저희 잡오브브라더스 와 함께하셔서

보다 이로운 서비스를 제공하며

기업의 가치가 업그레이드 되는 소중한 결과 를

얻어가시길 바랍니다.

잡오브브라더스 는 기획부터 제작,

런칭 및 사후 지원까지

각 분야 실력있는 전문가들이

클라이언트와 끊임없이 소통하며

최적의 솔루션을 제공 합니다.

타겟 사용자의 모든 것을 고려한 UXUI 디자인 은

공감과 감정을 이끌어내고

유입시간이 늘어나면서 점차 스며들어

제품구매와 재방문으로 이어질 수 있도록 유도하는

핵심적인 요소로 작용하기 때문에

웹 서비스의 퀄리티를 좌우하는

중요한 부분 이라 할 수 있습니다.

차별화된 전략과 기술력으로 쌓아온

다년간의 노하우가 집약된

잡오브브라더스 의 고퀄리티 UXUI 디자인 및

웹 개발 서비스 를 경험해보세요.

100건이 넘는 프로젝트 중 계약 파기율 0%

제작 후 꾸준한 유지보수와 커뮤니케이션을 통해

'형제의 일처럼' 책임감을 가지고 작업 하며

함께 일하는 파트너로서의 역할을

200% 다할 것을 약속드립니다.

감사합니다.

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →

---

코로나 이후 비대면 시대 에 접어들면서

온라인에 체류하는 시간이 늘어남에 따라

세상과 디지털을 연결하는 웹 환경을 제공하는

에이전시의 역할이 더욱 중요해졌습니다.

성실과 믿음, 신뢰를 바탕으로 운영되는전문업체

웹사이트 제작을 주력으로 하는

웹 개발 전문 에이전시 잡오브브라더스 는

프로젝트 시작 전 부터

모든 작업이 끝나는 시점까지

배치된 구성원이 책임감을 가지고 작업에 임하여

시중에 넘쳐나는 양산형 웹페이지가 아닌

클라이언트의 니즈를 잘 반영한

세상에서 단 하나뿐인 웹사이트 를 제작해드립니다.

잡오브브라더스의 웹개발 서비스는

기획부터 제작, 런칭 및 사후 지원까지

각 분야 실력있는 전문가들이

클라이언트와 끊임없이 소통 하며

최적의 솔루션을 제공하는 프리미엄 서비스입니다.

공감을 이끌어내는 기획 및 설계,시선을 사로잡는 디자인,트렌드를 앞서가는 마케팅 전략,

이 모든 것이 잘 구현된 웹사이트 하나는

본질 위에 브랜드마다 가진 고유한 개성을

더욱 아름답게 가꾸고 표현하여

기억에 남는 UX경험을 제공 하는

귀사의 든든한 지원군으로서

매출 상승과 자연스러운 홍보 효과로

고객 유입 또한 상승하는

선순환 고리를 만들어갈 것입니다.

CI/BI, 상세페이지, 리플렛,

패키지부터 제품 촬영까지

다년간의 노하우로 다져진 잡오브브라더스 만의

차별화된 전략과 기술력으로 완성해드리는

고퀄리티 웹 개발 서비스 를 경험해보세요.

그동안 잡오브브라더스에서 진행된

100건이 넘는 크고 작은 프로젝트 중에서

계약 파기된 프로젝트는 0건 으로

제작 후 꾸준한 유지보수와 커뮤니케이션을 통해

'형제의 일처럼' 책임감을 가지고

작업에 임하고 있습니다.

나아가 고객사의 가치에 크리에이티브를 더하여

더 높은 레벨로 디벨롭할 비전을 제시하며

함께 일하는 파트너 로서의 역할을

200% 밀도있게 다할 것을 약속드립니다.

현재 본사만의 웹에이전시 아이템으로

청년창업 사관학교에 합격 하여

관련 사업을 수행중에 있습니다.

외에도 중소벤처기업부에서 주관하는

다양한 창업지원사업 (창업 패키지)의

업무 경험이 풍부하여

사업 계획서부터 각종 보고서,

고객님들의 니즈를 꼼꼼하게 파악하고 녹여낸

만족스러운 결과물 제작까지

정성껏 진행 도와드리고 있으니

필요하신 부분 언제든지 편하게 문의주십시오.

감사합니다.

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →

저희 잡오브브라더스를 통해 홈페이지를 제작하시는 분들을 위한 홈페이지 메뉴얼을 정리하였습니다.

현재 그누보드로 제작된 홈페이지를 사용하시는 분들도 참고하셔도 좋을것 같습니다

---

[ 메뉴얼 순서 ]

팝업레이어 등록하기

관리자 비밀번호 변경 및 회원정보 수정

홈페이지 방문자 수 확인

게시판 확인하기

게시판 글쓰기

---

팝업레이어 등록하기

관리자 페이지에 접속 후 [1번째 탭] - [팝업레이어 관리]를 클릭합니다.

2. 우측 상단에 있는 [새창관리추가]버튼을 클릭합니다.

3. 설정값을 입력한 후, 우측 상단에 있는 [확인]버튼을 클릭하면 등록이 완료됩니다.

구분

커뮤니티 : 기본값 입니다. 쇼핑몰이 아닌, 일반 홈페이지는 ‘커뮤니티’로 등록되어있습니다.

커뮤니티와 쇼핑몰 : 커뮤니티와 쇼핑몰 모두 노출 하고 싶을 때 선택합니다.

쇼핑몰 : 쇼핑몰에 팝업을 노출 시키고 싶은 경우에 선택합니다.

접속기기 : 현재 반응형 홈페이지로 제작 되어있기 때문에, [pc와 모바일]로 설정하면 됩니다.

시간 : 고객이 다시 보지 않음을 선택할 시 몇 시간 동안 팝업레이어를 보여주지 않을지 설정합니다.

시작일시 : YYYY-MM-DD HH:MM:SS 형식으로 입력합니다. 시작일시를 오늘로를 체크 할 경우, 오늘 날짜가 자동으로 입력됩니다.

종료일시 : YYYY-MM-DD HH:MM:SS 형식으로 입력합니다. 종료일시를 오눌부터 7일후로로 선택 할 경우 오늘부터 + 7일 날짜가 자동으로 입력됩니다. 만약 팝업레이어를 항상 노출하고 싶을 경우 YYYY를 9999로 변경해주시면 됩니다.

팝업레이어 좌측위치 : 팝업레이어가 좌측에서 몇 px 떨어진곳에서 노출될지 위치를 설정합니다.

팝업레이어 상단위치 : 팝업레이어가 상단에서 몇 px 떨어진곳에서 노출될지 위치를 설정합니다.

팝업레이어 넓이 : 팝업레이어의 가로 크기를 입력합니다.

팝업레이어 높이 : 팝업레이어의 세로 크기를 입력합니다.

팝업제목 : 팝업의 제목을 입력합니다.

내용 : 팝업에 노출될 내용을 클릭합니다. 우측 상단에 있는 [사진]아이콘을 통해 팝업레이어에 사진 등록도 가능합니다.

---

관리자 비밀번호 변경 및 회원 정보 수정

관리자 페이지 접속 후, [2번째 탭] - [회원관리]를 클릭합니다.

2. 비밀번호 변경을 원하는 회원 옆에 있는 [수정]버튼을 클릭합니다.

3. 원하시는 비밀번호 입력 후, 우측 상단에 있는 [확인]버튼을 클릭하면 비밀번호 수정이 완료됩니다.

해당 페이지에서 비밀번호 변경 뿐만 아니라, 회원 정보도 수정 가능합니다.

---

홈페이지 방문자 수 확인

관리자 페이지에 접속 후 [2번째 탭]-[접속자 집계]를 클릭합니다.

2. 해당 페이지에서 홈페이지 방문자 수를 기간별로 확인 가능합니다.

---

게시판 확인하기

관리자 페이지 접속 후 [3번째 탭] - [게시판 관리]를 클릭합니다.

2. 접속하고 싶은 게시판을 클릭하면 해당 게시판 목록으로 이동합니다.

최고관리자만 확인 할 수 있는 게시판이 있다면, 이 방법으로 접속해 주세요. [ ex) 문의 게시판 ]

게시판 설정 값은 개발시 필요한 설정이므로 건들지 말아주세요.

---

게시판 글쓰기

관리자 로그인 후, 게시판에 접속하면 해당 버튼이 보입니다. (우측 - 관리자, 글쓰기 , 편집 )

2. 글쓰기 버튼을 클릭하면 해당 페이지로 이동합니다.

해당 페이지에서 내용을 입력 후, [작성 완료]버튼을 클릭하면 게시글 등록이 완료됩니다.

썸네일을 등록해야되는 갤러리형 게시판일 경우, 썸네일 이미지를 필수로 등록해주세요. (우측 숫자는 이미지 권장 가로세로 사이즈입니다.)

글을 작성 할 때, 이미지 등록을 원하시는 경우, 글쓰기 창 우측 상단에 있는 [사진]아이콘을 통해 등록해주세요.

---

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →

홈페이지 개발 완료 후, 검수 요청 받아보신적 있으신가요?

홈패이지 개발 후, 검수는 중요하기 때문에 꼭 필수로 해야 됩니다.

검수 경험이 없어 어떻게 해야하는지 감조차 잡지 못하는 분들이 많을것이라 예상됩니다.

잡오브 브라더스에서 작업 완료 후 검수를 어떻게 진행하면 좋을지 에 대해서 포스팅 이어가도록 하겠습니다 😊

---

홈페이지 검수란 무엇일까요 ?

홈페이지 검수란, 요청한 홈페이지가 디자인, 개발등에서 오류가 없는지 확인하는 과정입니다.

개발자가 생각하는 기능과, 고객(클라이언트)가 생각하는 기능이 제대로 구현 되었는지, 디자인은 시안대로 잘 나왔는지, 오타가 없는지 등의

검수를 통해 홈페이지의 완성도를 높이고 높음 품질로 홈페이지를 완성 할 수 있습니다.

---

홈페이지 검수를 왜 고객에게 요청할까요?

홈페이지 제작은 고객과 업체에서 같이 이루어 집니다 .

업체 개발자가 검수를 진행하긴 하지만, 고객이 원하는 기능을 제대로 파악하지 못한 상태면 누락한 부분이 발생할 수 있습니다.

또한, 고객이 검수를 하게 되면 사용자의 입장에서 검수를 하기 때문에 개발자가 검수하는 과정과의 차별점을 갖게 됩니다 .

---

홈페이지 검수 방법 ⭐

① 검수 시작 전, 쿠키를 삭제해 줍니다.

홈페이지 접속 후, ctrl + shift + R 을 눌러 홈페이지의 쿠키를 삭제해 줍니다.

※ 캐시를 삭제하는 이유 : 개발자가 수정하는 과정에서 홈페이지 접속을 했었다면, 홈페이지에서는 해당 사이트를 기억 해 두었다가 다시 접속했을때 빠른 로딩을 위해 전에 기억했던 홈페이지를 보여줍니다. 그렇기 때문에 , 수정된 기능과 화면이 보이지 않을 수 있으므로 쿠기값을 삭제해 주어야 합니다.

② 디자인 (레이아웃)이 잘 나왔는지 확인합니다.

디자이너가 홈페이지 시안을 준 화면과 홈페이지에 있는 디자인이 일치한지 확인합니다.

디자인을 검수 할 때에는 다양한 디바이스 환경(데스크톱, 노트북, 테블릿PC, 모바일)과 브라우저 (크롬, 웨일 등)에서 잘 나오는지 확인해야 합니다.

👉 애니메이션 효과도 잘 나오는지 확인하는 것이 좋습니다.

👉 레이아웃이 디자인 시안과 일치하지 않는다면 수정을 요청하셔야 합니다.

③ 오탈자가 없는지 확인합니다.

홈페이지에 연결된 모든 페이지에 접속하여 오탈자가 있는지 체크합니다.

오탈자가 있을 시, 수정을 요청하셔야 합니다.

---

---

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →

홈페이지 개발을 위해 알아보셨을때, 많이 쓰이는 단어인 '반응형 홈페이지'를

많이 접해보셨을겁니다.

처음부터 World Wide Web은 독립적이도록 설계 되었습니다.

어떤 하드웨어나 장치를 가지고 있는지는 중요하지 않습니다.

장치에서 실행 중인 운영체제에는 문제가 없습니다.

인터넷에 접속을 할 수 있는 환경이라면 웹에 엑세스 할 수 있습니다.

반응성 디자인은 좋은 디자인이 나오기 전 몇 년 동안

웹 디자이너와 개발자들은 다양한 기술을 시도했습니다.

---

반응형 홈페이지란 ? — 반응형 웹 (Responsive Web) 이란?

다양한 디바이스 환경

반응형 홈페이지는 하나의 웹사이트에서 PC, 스마트폰, 테블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록

만든 웹페이지 접근 기법을 말합니다.

즉 우리가 보는 대부분의 홈페이지나모바일 환경의 웹페이지가 반응형입니다. 맥에서도, 데스크톱에서도,

스마트폰에서도 자동으로 화면 조정을 해주는 것이 반응형이 라고 합니다.

쉽게 풀어 설명하자면 PC 사이즈로 만든 화면이 모바일에서도 맞추어 일관성 있게 노출되는 기능입니다.

우리가 홈페이지를 둘러볼때 반응형은 그냥 알아서 이동하고 줄어드는 기본 시스템 처럼 보이지만

사실 제작단에서는 각각 디바이스 사이즈에대한 추가 작업이 이루어집니다.

스마트폰은 대표적으로 어떤 것을 표준으로 잡을 것이며, 화면비율은 몇 대 몇 모니터는 어느 사이즈 비율로 할 것인가, '

테블릿은 어떤 모델에 맞출 것인가 등 세상에 나와있는 스크린 비율중 자주 사용되는 것을 선정하여 그에 따른 디자인과 개발 작업이

진행되어야합니다.

---

반응형 홈페이지는 왜 필요할까 ?

반응형 홈페이지가 필요한 이유로

첫째, 스마트폰 사용자를 타겟으로 잡기 때문입니다 .

이제는 데스크톱, 컴퓨터로 검색하는 양보다, 모바일 스마트폰으로

검색하는 양이 압도적인 비율로 증가하였고 사용자들은 나의 홈페이지로

유입할 수 있다는 가능성이 높아졌습니다.

모바일 사용자들이 쉽고 편리하게 사용할 수 있는 반응형 홈페이지로 제작을 해야

모바일 사용자들에게 정보를 편하게 줄 수 있어야 합니다.

둘째, 비용이 절감되며, 유지보수가 쉽습니다.

반응형 웹으로 홈페이지 제작 시, 데스크톱, 태블릿, 모바일 페이지를 따로 만들지 않아 비용이 절감되고, 유지보수가 쉽습니다.

셋째, 구글 검색 엔진 알고리즘이 모바일 친화도를 검색 순위 산정에 적용합니다.

반응형 홈페이지로 제작 시 구글 검색엔진이 홈페이지를 효과적으로 크롤링을 하기 때문에,

모바일 환경에 친화적이지 않은 홈페이지는 상당수 뒤에 노출됩니다.

• 모바일 친화성 테스트 링크 ( https://search.google.com/test/mobile-friendly?hl=ko )

---

---

https://blog.naver.com/jobofbrothers/222774760686

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →