Wireframe 디자인

발사믹 스튜디오(https://balsamiq.com/)를 사용하여 웹페이지의 와이어프레임을 디자인하였다.
직관적이고 간단하게 사이트를 이용하는데 초점을 맞추어 디자인했다.

레시피 조회 화면 - 로그인 전

웹페이지 url로 이동할 때 등장하는 첫 화면이다.
가장 최근에 올라온 레시피를 띄워준다.
상단에 있는 재료 태그를 클릭했을 때 해당 재료가 태그된 레시피를 최신 순으로 조회할 수 있다.
스크롤 하면 다른 레시피를 확인할 수 있다.
상단에 있는 로그인 버튼을 클릭하면 로그인 화면으로 이동한다.

회원 가입 화면

레시피 조회 화면에서 회원 가입 버튼을 클릭하면 이동하는 화면이다.
이메일과 비밀번호, 닉네임을 입력하여 회원 가입할 수 있다.
구글 OAuth를 사용하여 가입할 수 있다.
가입 버튼을 클릭하면 회원 등록 처리를 하고 레시피 조회 화면으로 이동한다.

로그인 화면

레시피 조회 화면에서 로그인 버튼을 클릭하면 이동하는 화면이다.
이메일과 비밀번호를 입력하여 로그인 할 수 있다.
구글 OAuth를 사용하여 로그인 할 수 있다.
로그인 버튼을 클릭하면 로그인 처리를 하고 레시피 조회 화면으로 이동한다.

개인 정보 수정 화면

레시피 조회 화면에서 유저 아이콘을 클릭하고 개인 정보 수정 버튼을 클릭하면 이동하는 화면이다.
현재 비밀번호를 입력하여 닉네임, 비밀번호를 수정 할 수 있다.
수정 버튼을 클릭하면 수정 처리를 하고 레시피 조회 화면으로 이동한다.

레시피 조회 화면 - 로그인 후

로그인 후 리다이렉트 된 화면이다.
가장 최근에 올라온 레시피를 띄워준다.
상단에 있는 재료 태그를 클릭했을 때 해당 재료가 태그된 레시피를 최신 순으로 조회할 수 있다.
스크롤 하면 다른 레시피를 확인할 수 있다.
상단에 있는 로그아웃 버튼을 클릭하면 화면이 새로고침 되면서 로그아웃된다.
상단에 있는 유저 아이콘을 클릭하면 옆에 개인 정보 변경 화면, 내 레시피 목록 화면으로 이동할 수 있는 메뉴가 뜬다.

레시피 작성 화면

레시피를 작성할 때 뜨는 화면이다.
파일 찾기를 했을 때 첨부한 이미지가 미리보기로 뜨는 경우도 있는데, 내 기억에 보안에 문제가 있어 그렇게 접근할 수 없는 경우가 많아 파일 명만 띄우도록 디자인했다.

레시피 수정 화면

레시피를 수정 및 삭제할 때 뜨는 화면이다.
작성할 때 첨부했던 이미지가 미리보기로 뜬다.
레시피 사이트인만큼 무조건 한 장의 이미지는 추가하도록 디자인 해 삭제 버튼이 없다.
입력한 태그를 수정할 수 있다.
수정 버튼을 클릭하면 레시피를 수정 처리하고 화면이 새로고침 된다.
삭제 버튼을 클릭하면 레시피를 삭제 처리하고 내 레시피 조회 목록으로 이동한다.

평가

개인 평가

기능 구현에 치중하고, 또 디자인 경험이 별로 없어 너무 단순하게 디자인 된 것 같다. 화면 구성에 대한 피드백을 받으면 수정할 예정이다.