지식2n은 세상의 모든 질문에는 답변이 있다는 캐치프레이즈를 가진, 질문하고 답변하는 앱입니다.
이곳에서 여러분들은 어떠한 궁금한 거라도 질문할 수 있고, 내가 알고 있는 어떤 지식도 답변을 달 수 있습니다.
이름의 유래는 '세상에 질문이 n개 있다면, 그에 대한 답변도 n개 있지 않을까?'
'그렇다면 총 2n개의 글이 달리지 않을까?'에서 시작했습니다.
Team2에서 만든 공간에서 즐겁게 뛰어놀아 주세요.
Spring developer: 우혁준, 이지원, 조성규
iOS developer: 김령교, 박정헌, 박채현, 홍희주
핵심적인 기능들을 추린 워크플로우는 다음과 같습니다.
지식2n은 질문하고, 답변해서, 반응하기을 핵심 기능으로 하며, 그밖에도 다양한 기능을 제공합니다.
시연에서는 직접 두눈으로 보여드렸지만, 다른 팀꺼 본다고/직접 발표한다고/개인상의 일정 때문에 등등의 이유로 못 본 분들을 위해!
지식2n 사용 설명서에서 지식2n은 어떤 기능을 갖추고 있는지 깔끔하게 설명해드리겠습니다 😊
(여담으로, 지식2n만의 추가 기능으로는 질문에 공감, 공감순 정렬, 랜덤질문 등이 있습니다!)
지식2n의 핵심 기능은 다음과 같습니다.
이외에도 다음과 같이 다양한 기능을 담았습니다.
지식2n을 만들면서 기능적으로 여러 난관을 겪었습니다.
처음에 난관을 만났을 때는 당황했지만, 구글링도 하고 다른 사람들과 지식을 공유하면서 난관들을 하나씩 극복해갔습니다.
그러한 시련과 극복을 거친 끝에, 이렇게 자랑스러운 앱이 탄생할 수 있었습니다.
아래의 글부터는, 지식2n에서 자랑하고 싶은 내용을 하나씩 짚어가며 소개하고자 합니다.
Team2 리드미의 하이라이트라고 볼 수 있을 것 같네요:blush:
그러면 지금부터 시작하겠습니다!
(아래의 사진부터는 발표 자료로, 발표 자료를 보강하는 내용을 글로 적도록 하겠습니다.)
와플 토이프로젝트를 만들며 필수적으로 도입하라고 한 요소 중 하나였던 소셜 로그인!
지식2n에서는 다양한 소셜 로그인 중 카카오 로그인을 도입하였습니다.
발표 자료에서 도식화되어 있는 내용을 조금 더 구체적으로 설명하자면,
저희는 먼저 Kakao Developer에 지식2n앱을 등록하고, iOS를 기반으로 하고 있기 때문에 iOS 플랫폼을 도입하였습니다.
카카오 로그인은 토큰을 통해 인증이 이루어지는데,
iOS는 카카오 토큰을 받음->받은 카카오 토큰을 스프링에 전달->
스프링은 다시 카카오한테 토큰을 줘서 유저 정보를 전달받음->전달받은 유저 정보를 스프링 db에 전달
순서로 로그인이 진행됩니다.
만약 카카오 로그인을 한번도 하지 않은 회원이라면 db에 새로운 유저 정보를 저장하고,
이전에 카카오 로그인을 했던 유저라면 db의 last_login 칼럼에 현재 시간 정보를 제공합니다.
이 과정을 통해, 지식2n은 카카오 유저들이 간편하게 앱을 사용할 수 있도록 하였습니다.
답변하기, 나의질문 등 지식2n에서는 다양한 질문을 다루어야 하기 때문에, 기준에 따른 정렬과 페이지네이션이 중요합니다.
이를 구현하기 위해 QueryDsl을 적극적으로 활용하였습니다.
orderBy와 desc를 통해 최신순, 좋아요순, 답변수순을 통해 질문들을 역방향으로 정렬하였으며(답변수순은 앱 내에서는 미반영)
offset(page*amount), limit(amount)를 통해 각 페이지에서 첫번째 글부터 amount 번째까지의 글을 불러오도록 하였습니다.
Https는 Http에 SSL 보안을 얹은 것으로, Http에 비해 보안성과 사이트 로딩 속도가 뛰어납니다.
지식2n의 Https 구현을 설명하기 위해서는 먼저 저희의 배포 방식에 대해 알아두어야 합니다.
저희는 AWS의 Elastic Beanstalk를 통해 백 서버를 배포시켰습니다.
Elastic Beanstalk는 EC2(인스턴스), RDS(데이터베이스) 뿐만이 아니라
앱 배포화 최적화를 위해 필요한 로드 밸런서, 프로비저닝, 오토 스케일링 등의 작업들을 자동으로 해줍니다.
그로 인해, 다양한 항목을 왔다갔다 하지 않은 채 비교적 간단하게 앱을 배포할 수 있었습니다.
그런데 Elastic Beanstalk를 활용한 배포와 Https가 무슨 상관이냐고요?
Elastic Beanstalk의 다양한 최적화 중 우리는 로드 밸런서에 주목해야 합니다.
로드 밸런서는 트래픽이 많은 서버의 과부화를 방지하기 위해 트래픽을 여러 서버에 균등하게 분배하는 역할을 하고 있습니다.
Https을 연결하기 위해서, 저희는 먼저 가비아라는 사이트에서 Https 도메인을 구매하였습니다.
구매한 도메인은 AWS의 Route 53에 등록한 이후, DNS를 Elastic Beanstalk의 로드 밸런서와 연결시켰습니다.
그리고 Amazon Certificate Manager를 통해 인증서를 발급받아 Beanstalk까지의 연결을 Https로 연결되도록 하였습니다.
Interceptor는 Request를 컨트롤러의 Handler로 들어오기 전에 낚아채어 원하는 로직을 수행한 후 Handler로 보내는 역할을 합니다.
저희 팀은 초반에는 주로 Interceptor에게 Authorization의 역할을 수행시켜,
토큰을 받으면 해당 토큰의 유저 정보가 있는지 검증하고, 만약 틀렸거나 토큰 자체가 없다면 예외를 반환시켰습니다.
하지만 개발을 할수록 이러한 로직에는 ❗문제❗가 발생했습니다.
앞서 말했듯 Authorization의 Interceptor는 토큰이 없으면 예외를 반환시키는데,
만약 토큰이 있든 없든 각각의 결과값을 내놓아야 한다면 어떻게 처리해야 할까요?
가령 ❤️하트 색깔에 대해서는 예를 들어봅시다.
상세질문에는 모든 유저가 접근할 수 있으며, 좋아요를 누른 유저는 하트가 분홍색으로 칠해져야 합니다.
그렇다면, 로그인하지 않은 유저도 로그인한 유저도 모두 받아야하지 않을까요?
이런 경우에는 토큰을 제공하지 않는 유저에게는 예외를 반환하는 기존의 문제로는 해결을 할 수 없습니다.
우리는 이 상황을 어떻게 해결해야 할까요?
저희는 이런 상황을 해결하기 위해 기존의 Interceptor를 분화시켜 AuthInterceptor1, AuthInterceptor2로 두 개를 만들었습니다.
그리고 AuthInterceptor1에서는 모든 Api에 접근하여 토큰이 있다면 유저 정보를, 토큰이 없다면 null을 반환하도록 하였고,
AuthInterceptor2에서는 특정 Api에 접근하여 유저 정보가 있다면 로직을 실행시키도록, null만 있다면 예외를 반환하도록 했습니다.
그리고 기존에 있던, 만료된 토큰은 401 예외를 반환(401 반환 즉시 프론트에서 재발급 요청)시키는 일과
탈퇴한 유저의 토큰은 접근이 안되게 하도록 하는 일은 AuthInterceptor1에게 맡겼습니다.
이러한 과정을 통해, 질문등록/답변수정/프로필수정 등 Authorization이 필요한 일과
하트색깔/채택하기버튼등장 같이 Authentication만 필요한 일 모두를 훌륭하게 소화하였습니다.
지식2n을 처음 쓰는 분들이 제일 먼저 만나는 홈화면!
홈화면은 상단은 4개의 이미지를 옆으로 스와이프할 수 있고, 하단에서는 나의 질문들을 아래로 스와이프하며 확인할 수 있습니다.
어떻게 한 화면에 두 방향의 스와이프가 가능할까요?
이걸 위해서 저희는 하나의 화면에 두개의 다른 View를 걸어놨습니다.
상단의 View에서는 ScrollView를 걸어놨고, 그 안에 4개의 이미지를 StackView로 묶어놔 StackView를 ScrollView 안에 넣었습니다.
ScrollView는 자기보다 큰 이미지가 걸려있으면 스크롤을 할 수 있기 때문에, 높이는 같고 가로로만 긴 StackView는 횡스크롤을 하게 됩니다.
반면에 아래쪽에 있는 나의 질문은 TableView를 걸어놓았습니다.
각각의 질문들이 마치 보이지 않는 선으로 이뤄진 표처럼 생겼는데요.
TableView는 화면을 넘기면 자동으로 스크롤할 수 있기 때문에 질문이 많이 쌓이면 아래로 스와이프를 할 수 있게 됩니다.
지식2n을 만드는 데에 가장 큰 난관이었던 사진 업로드!
저희는 질문등록/답변등록/프사 수정에 사진 업로드가 필요하였고,
그러한 사진들을 저장하기 위해 AWS에서 제공하는 파일 서비스인 S3을 사용하였습니다.
S3을 사용하기 위해서는 서버와 S3 간의 통신이 중요한데, 이를 위해 S3 버킷을 만들고 스프링 서버와 연결하였어요.
사진을 보내기 위해서 iOS에서 갖고 있는 사진을 스프링에 넘기고,
스프링은 다시 그걸 S3에 넘겨서 파일 이름을 전달받는 과정이 이루어져야 합니다.
저희는 프로필 사진을 추가할 때는 단독으로, 질문에 사진들을 올릴 때는 사진 순서에 맞게 order를 부여하여
원하는 순서대로 사진을 추가하고자 하였습니다.
이제 기본 구현 방식을 알았으니까, 사진 업로드의 응용 버전으로 들어가봅시다.
3장의 사진과 함께 질문을 올렸는데, 그 중 2번째 사진을 삭제하고 새로운 사진을 추가하면 어떻게 될까요?
휴대폰에서 두번째 사진을 삭제하고 답변등록 버튼을 누르면, iOS에서는 삭제된 사진은 빼고, 새로운 사진은 넣어서
총 3개의 사진을 order에 맞게 List 형태로 배열합니다.
수정된 List을 포함하여 질문을 스프링에 전송하면,
스프링은 삭제할 사진은 삭제하고, 추가된 사진은 추가하고, 기존의 사진들을 order 값을 변경합니다.
그리고 삭제할 사진과 추가된 사진은 S3에 보내고, S3는 삭제된 사진 객체들은 제거하고 추가된 사진들은 다시 저장합니다.
그렇게 하면 수정되면 질문답변에서는 새로운 사진들이 실리게 됩니다.
여기서 특히 내가 원하는 순서대로 사진이 배열된다는 점을 잘 봐주시면 감사하겠습니다:blush:
홈화면에서 감초 역할을 톡톡히 했던 랜덤질문과 운영자질문, 이 둘은 어떻게 구현하였을까요?
먼저 랜덤질문은, 사실 서버가 갈아엎어지고 질문들이 사라지곤 해서 일반적인 findById로는 구현이 어려웠습니다.
어떻게 하면 매번 다른 질문을 부를 수 있을까? 정답은 idx를 걸어두고 페이지네이션을 하는 것이었습니다.
먼저 질문의 개수를 센 후, (0~1까지 임의의 수)*(질문의 개수)->Long화를 통해 인덱스를 구하고,
offset과 limit으로 해당 인덱스의 질문 하나만을 추출하니 매번 다른 질문을 들고올 수 있었습니다.
운영자질문은, 답변하기탭에 있는 수많은 질문들 중 "나의 2023년 목표는?"만 운영자 질문인데요.
저 질문은 단순히 저희가 운영자 질문으로 정한 게 아니라, 실제로 운영자 전용 계정(닉네임 지식낭자)을 생성하여 만든 질문입니다.
그래서 코드를 뜯어보면 ADMIN_ID가 고정 유저 아이디로 있으며, 해당 상수는 common 패키지에 저장되어 있습니다.
단순히 아이디로 추출하는 게 아니라, 지식낭자 님이 새로운 질문을 만들면 그때마다 새로운 질문이 업데이트되겠죠:blush:
지식2n 리드미를 마지막까지 읽어주신 여러분들에게 감사를 표하며, 지금까지 꼭꼭 숨겨놓았던 마지막 기능을 소개하려고 합니다.
저희는 기존의 지식2n에 있던 홈화면의 보라색 버튼을 활용하여 개발자 후기 화면을 만들었습니다.
이곳에서는 저희의 소감과 함께 깃허브, 인스타 링크를 달아두었습니다.
저희가 어떤 사람인지 궁금하다면 언제든지 후기 화면을 방문해주세요:blush:
여기까지 해서 지식2n의 소개를 마치려고 합니다.
처음 만들 때만 해도 어떻게 다 만들지 막막했는데, 다 만들고 보니 꽤나 멋진 앱이 탄생하였네요!
백문이 불여일견, 이제 저희 앱을 직접 써보는 건 어떨까요?
재밌게 즐겨주시고, 혹시 오류가 생기면 귀중한 피드백을 드리면 감사하겠습니다
2팀도, 다른 팀도, 와플 운영진 분들까지 모두 수고많으셨습니다. 특히 우리 2팀은 다들 정말로 고생하셨어요!!:blush:
그럼 저희는 다음에 또 만나요 바이바이:wave:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent